Fixed prompt style bug by renaming className to class, and added .mp3 file export support.

Author: johnnesky

README.md

@@ -19,8 +19,8 @@ Beep Box is developed by [John Nesky](http://www.johnnesky.com/).
 
 The source code is available under the MIT license. The code is written in
 [TypeScript](https://www.typescriptlang.org/), which requires
-[node/npm](https://www.npmjs.com/get-npm), so install that first. Then to build
-this project, open the command line and run:
+[node & npm](https://www.npmjs.com/get-npm), so install those first. Then to
+build this project, open the command line and run:
 
 ```
 git clone https://github.com/johnnesky/beepbox.git
@@ -33,29 +33,38 @@ npm run build
 
 The code is divided into several folders.
 
-The synth/ folder has just the code you need to be able to play BeepBox songs
-out loud, and you could use this code in your own projects, like a web game.
-After compiling the synth code, open website/synth_example.html to see a demo
-using it. To rebuild just the synth code, run:
+The [synth/](synth) folder has just the code you need to be able to play BeepBox
+songs out loud, and you could use this code in your own projects, like a web
+game. After compiling the synth code, open website/synth_example.html to see a
+demo using it. To rebuild just the synth code, run:
 
 ```
 npm run build-synth
 ```
 
-The editor/ folder has additional code to display the online song editor
-interface. After compiling the editor code, open website/index.html to see the
-editor interface. To rebuild just the editor code, run:
+The [editor/](editor) folder has additional code to display the online song
+editor interface. After compiling the editor code, open website/index.html to
+see the editor interface. To rebuild just the editor code, run:
 
 ```
 npm run build-editor
 ```
 
-The player/ folder has a miniature song player interface for embedding on other
-sites. To rebuild just the player code, run:
+The [player/](player) folder has a miniature song player interface for embedding
+on other sites. To rebuild just the player code, run:
 
 ```
 npm run build-player
 ```
 
-The website/ folder contains index.html files to view the interfaces. The build
-process outputs JavaScript files into this folder.
+The [website/](website) folder contains index.html files to view the interfaces.
+The build process outputs JavaScript files into this folder.
+
+## Dependencies
+
+Most of the dependencies are listed in [package.json](package.json), although
+I'd like to note that BeepBox also has an indirect, optional dependency on
+[lamejs](https://github.com/zhuker/lamejs) via
+[jsdelivr](https://www.jsdelivr.com/) for exporting .mp3 files. If the user
+attempts to export an .mp3 file, BeepBox will direct the browser to download
+that dependency on demand.

editor/BarScrollBar.ts

@@ -23,7 +23,7 @@ import {ColorConfig} from "./ColorConfig";
 			this._rightHighlight,
 		);
 
-		public readonly container: HTMLElement = HTML.div({className: "barScrollBar", style: "width: 512px; height: 20px; overflow: hidden; position: relative;"}, this._svg);
+		public readonly container: HTMLElement = HTML.div({class: "barScrollBar", style: "width: 512px; height: 20px; overflow: hidden; position: relative;"}, this._svg);
 
 		private _mouseX: number = 0;
 		//private _mouseY: number = 0;

editor/BeatsPerBarPrompt.ts

@@ -17,10 +17,10 @@ import {ColorConfig} from "./ColorConfig";
 			option({value: "stretch"}, "Stretch notes to fit in bars."),
 			option({value: "overflow"}, "Overflow notes across bars."),
 		);
-		private readonly _cancelButton: HTMLButtonElement = button({className: "cancelButton"});
-		private readonly _okayButton: HTMLButtonElement = button({className: "okayButton", style: "width:45%;"}, "Okay");
+		private readonly _cancelButton: HTMLButtonElement = button({class: "cancelButton"});
+		private readonly _okayButton: HTMLButtonElement = button({class: "okayButton", style: "width:45%;"}, "Okay");
 
-		public readonly container: HTMLDivElement = div({className: "prompt noSelection", style: "width: 250px;"},
+		public readonly container: HTMLDivElement = div({class: "prompt noSelection", style: "width: 250px;"},
 			h2("Beats Per Bar"),
 			div({style: "display: flex; flex-direction: row; align-items: center; height: 2em; justify-content: flex-end;"},
 				div({style: "text-align: right;"},
@@ -31,7 +31,7 @@ import {ColorConfig} from "./ColorConfig";
 				this._beatsStepper,
 			),
 			div({style: "display: flex; flex-direction: row; align-items: center; height: 2em; justify-content: flex-end;"},
-				div({className: "selectContainer", style: "width: 100%;"}, this._conversionStrategySelect),
+				div({class: "selectContainer", style: "width: 100%;"}, this._conversionStrategySelect),
 			),
 			div({style: "display: flex; flex-direction: row-reverse; justify-content: space-between;"},
 				this._okayButton,

editor/ChannelSettingsPrompt.ts

@@ -15,10 +15,10 @@ import {ChangePatternsPerChannel, ChangeInstrumentsPerChannel, ChangeChannelCoun
 		private readonly _instrumentsStepper: HTMLInputElement = input({style: "width: 3em; margin-left: 1em;", type: "number", step: "1"});
 		private readonly _pitchChannelStepper: HTMLInputElement = input({style: "width: 3em; margin-left: 1em;", type: "number", step: "1"});
 		private readonly _drumChannelStepper: HTMLInputElement = input({style: "width: 3em; margin-left: 1em;", type: "number", step: "1"});
-		private readonly _cancelButton: HTMLButtonElement = button({className: "cancelButton"});
-		private readonly _okayButton: HTMLButtonElement = button({className: "okayButton", style: "width:45%;"}, "Okay");
+		private readonly _cancelButton: HTMLButtonElement = button({class: "cancelButton"});
+		private readonly _okayButton: HTMLButtonElement = button({class: "okayButton", style: "width:45%;"}, "Okay");
 
-		public readonly container: HTMLDivElement = div({className: "prompt noSelection", style: "width: 250px;"},
+		public readonly container: HTMLDivElement = div({class: "prompt noSelection", style: "width: 250px;"},
 			h2("Channel Settings"),
 			div({style: "display: flex; flex-direction: row; align-items: center; height: 2em; justify-content: flex-end;"},
 				"Pitch channels:",

editor/EditorConfig.ts

@@ -23,7 +23,7 @@ import {DictionaryArray, BeepBoxOption, InstrumentType, toNameMap} from "../synt
 	}
 
 	export class EditorConfig {
-		public static readonly version: string = "3.0.9";
+		public static readonly version: string = "3.0.10";
 		public static readonly versionDisplayName: string = "BeepBox " + EditorConfig.version;
 		public static readonly presetCategories: DictionaryArray<PresetCategory> = toNameMap([
 			{name: "Custom Instruments", presets: <DictionaryArray<Preset>> toNameMap([

editor/ExportPrompt.ts

@@ -47,11 +47,12 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 		private readonly _enableOutro: HTMLInputElement = input({type: "checkbox"});
 		private readonly _formatSelect: HTMLSelectElement = select({style: "width: 100%;"},
 			option({value: "wav"}, "Export to .wav file."),
+			option({value: "mp3"}, "Export to .mp3 file."),
 			option({value: "midi"}, "Export to .mid file."),
 			option({value: "json"}, "Export to .json file."),
 		);
-		private readonly _cancelButton: HTMLButtonElement = button({className: "cancelButton"});
-		private readonly _exportButton: HTMLButtonElement = button({className: "exportButton", style: "width:45%;"}, "Export");
+		private readonly _cancelButton: HTMLButtonElement = button({class: "cancelButton"});
+		private readonly _exportButton: HTMLButtonElement = button({class: "exportButton", style: "width:45%;"}, "Export");
 		private static readonly midiSustainInstruments: number[] = [
 			0x4A, // rounded -> recorder
 			0x47, // triangle -> clarinet
@@ -83,7 +84,7 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 			0x6A, // spiky -> shamisen
 		];
 
-		public readonly container: HTMLDivElement = div({className: "prompt noSelection", style: "width: 200px;"},
+		public readonly container: HTMLDivElement = div({class: "prompt noSelection", style: "width: 200px;"},
 			h2("Export Options"),
 			div({style: "display: flex; flex-direction: row; align-items: center; justify-content: space-between;"},
 				"File name:",
@@ -101,7 +102,8 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 					div({style: "display: table-cell; vertical-align: middle;"}, this._enableOutro),
 				),
 			),
-			div({className: "selectContainer", style: "width: 100%;"}, this._formatSelect),
+			div({class: "selectContainer", style: "width: 100%;"}, this._formatSelect),
+			div({style: "text-align: left;"}, "(Be patient, exporting may take some time...)"),
 			div({style: "display: flex; flex-direction: row-reverse; justify-content: space-between;"},
 				this._exportButton,
 			),
@@ -181,6 +183,9 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 				case "wav":
 					this._exportToWav();
 					break;
+				case "mp3":
+					this._exportToMp3();
+					break;
 				case "midi":
 					this._exportToMidi();
 					break;
@@ -192,9 +197,9 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 			}
 		}
 
-		private _exportToWav(): void {
-			
+		private _synthesize(sampleRate: number): {recordedSamplesL: Float32Array, recordedSamplesR: Float32Array} {
 			const synth: Synth = new Synth(this._doc.song);
+			synth.samplesPerSecond = sampleRate;
 			synth.loopRepeatCount = Number(this._loopDropDown.value) - 1;
 			if (!this._enableIntro.checked) {
 				for (let introIter: number = 0; introIter < this._doc.song.loopStart; introIter++) {
@@ -208,8 +213,15 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 			synth.synthesize(recordedSamplesL, recordedSamplesR, sampleFrames);
 			//console.log("export timer", (performance.now() - timer) / 1000.0);
 
+			return {recordedSamplesL, recordedSamplesR};
+		}
+		
+		private _exportToWav(): void {
+			const sampleRate: number = 48000; // Use professional video editing standard sample rate for .wav file export.
+			const {recordedSamplesL, recordedSamplesR} = this._synthesize(sampleRate);
+			const sampleFrames: number = recordedSamplesL.length;
+			
 			const wavChannelCount: number = 2;
-			const sampleRate: number = 44100;
 			const bytesPerSample: number = 2;
 			const bitsPerSample: number = 8 * bytesPerSample;
 			const sampleCount: number = wavChannelCount * sampleFrames;
@@ -235,9 +247,10 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 
 			if (bytesPerSample > 1) {
 				// usually samples are signed. 
+				const range: number = (1 << (bitsPerSample - 1)) - 1;
 				for (let i: number = 0; i < sampleFrames; i++) {
-					let valL: number = Math.floor(Math.max(-1, Math.min(1, recordedSamplesL[i])) * ((1 << (bitsPerSample - 1)) - 1));
-					let valR: number = Math.floor(Math.max(-1, Math.min(1, recordedSamplesR[i])) * ((1 << (bitsPerSample - 1)) - 1));
+					let valL: number = Math.floor(Math.max(-1, Math.min(1, recordedSamplesL[i])) * range);
+					let valR: number = Math.floor(Math.max(-1, Math.min(1, recordedSamplesR[i])) * range);
 					if (bytesPerSample == 2) {
 						data.setInt16(index, valL, true); index += 2;
 						data.setInt16(index, valR, true); index += 2;
@@ -258,12 +271,55 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 				}
 			}
 
-			const blob = new Blob([arrayBuffer], {type: "audio/wav"});
+			const blob: Blob = new Blob([arrayBuffer], {type: "audio/wav"});
 			save(blob, this._fileName.value.trim() + ".wav");
-			
 			this._close();
 		}
 
+		private _exportToMp3(): void {
+			const whenEncoderIsAvailable = (): void => {
+				const sampleRate: number = 44100; // Use consumer CD standard sample rate for .mp3 export.
+				const {recordedSamplesL, recordedSamplesR} = this._synthesize(sampleRate);
+				
+				const lamejs: any = (<any> window)["lamejs"];
+				const channelCount: number = 2;
+				const kbps: number = 192;
+				const sampleBlockSize: number = 1152;
+				const mp3encoder: any = new lamejs.Mp3Encoder(channelCount, sampleRate, kbps);
+				const mp3Data: any[] = [];
+				
+				const left: Int16Array = new Int16Array(recordedSamplesL.length);
+				const right: Int16Array = new Int16Array(recordedSamplesR.length);
+				const range: number = (1 << 15) - 1;
+				for (let i: number = 0; i < recordedSamplesL.length; i++) {
+					left[i]  = Math.floor(Math.max(-1, Math.min(1, recordedSamplesL[i])) * range);
+					right[i] = Math.floor(Math.max(-1, Math.min(1, recordedSamplesR[i])) * range);
+				}
+				
+				for (let i: number = 0; i < left.length; i += sampleBlockSize) {
+					const leftChunk: Int16Array = left.subarray(i, i + sampleBlockSize);
+					const rightChunk: Int16Array = right.subarray(i, i + sampleBlockSize);
+					const mp3buf: any = mp3encoder.encodeBuffer(leftChunk, rightChunk);
+					if (mp3buf.length > 0) mp3Data.push(mp3buf);
+				}
+				const mp3buf: any = mp3encoder.flush();
+				if (mp3buf.length > 0) mp3Data.push(mp3buf);
+				
+				const blob: Blob = new Blob(mp3Data, {type: "audio/mp3"});
+				save(blob, this._fileName.value.trim() + ".mp3");
+				this._close();
+			}
+			
+			if ("lamejs" in window) {
+				whenEncoderIsAvailable();
+			} else {
+				var script = document.createElement("script");
+				script.src = "https://cdn.jsdelivr.net/npm/lamejs@1.2.0/lame.min.js";
+				script.onload = whenEncoderIsAvailable;
+				document.head.appendChild(script);
+			}
+		}
+		
 		private _exportToMidi(): void {
 			const song: Song = this._doc.song;
 			const midiTicksPerBeepBoxTick: number = 2;
@@ -699,7 +755,7 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 				writer.rewriteUint32(trackStartIndex, writer.getWriteIndex() - trackStartIndex - 4);
 			}
 
-			const blob = new Blob([writer.toCompactArrayBuffer()], {type: "audio/midi"});
+			const blob: Blob = new Blob([writer.toCompactArrayBuffer()], {type: "audio/midi"});
 			save(blob, this._fileName.value.trim() + ".mid");
 
 			this._close();
@@ -708,7 +764,7 @@ import {MidiChunkType, MidiFileFormat, MidiControlEventMessage, MidiEventType, M
 		private _exportToJson(): void {
 			const jsonObject: Object = this._doc.song.toJsonObject(this._enableIntro.checked, Number(this._loopDropDown.value), this._enableOutro.checked);
 			const jsonString: string = JSON.stringify(jsonObject, null, '\t');
-			const blob = new Blob([jsonString], {type: "application/json"});
+			const blob: Blob = new Blob([jsonString], {type: "application/json"});
 			save(blob, this._fileName.value.trim() + ".json");
 			this._close();
 		}

editor/HarmonicsEditor.ts

@@ -24,7 +24,7 @@ import {prettyNumber} from "./EditorConfig";
 			this._lastControlPointContainer,
 		);
 
-		public readonly container: HTMLElement = HTML.div({className: "harmonics", style: "height: 2em;"}, this._svg);
+		public readonly container: HTMLElement = HTML.div({class: "harmonics", style: "height: 2em;"}, this._svg);
 
 		private _mouseX: number = 0;
 		private _mouseY: number = 0;

editor/ImportPrompt.ts

@@ -16,9 +16,9 @@ import {ArrayBufferReader} from "./ArrayBufferReader";
 
 	export class ImportPrompt implements Prompt {
 		private readonly _fileInput: HTMLInputElement = input({type: "file", accept: ".json,application/json,.mid,.midi,audio/midi,audio/x-midi"});
-		private readonly _cancelButton: HTMLButtonElement = button({className: "cancelButton"});
+		private readonly _cancelButton: HTMLButtonElement = button({class: "cancelButton"});
 
-		public readonly container: HTMLDivElement = div({className: "prompt noSelection", style: "width: 300px;"},
+		public readonly container: HTMLDivElement = div({class: "prompt noSelection", style: "width: 300px;"},
 			h2("Import"),
 			p({style: "text-align: left; margin: 0.5em 0;"},
 				"BeepBox songs can be exported and re-imported as .json files. You could also use other means to make .json files for BeepBox as long as they follow the same structure.",

editor/MoveNotesSidewaysPrompt.ts

@@ -16,10 +16,10 @@ import {ColorConfig} from "./ColorConfig";
 			option({value: "overflow"}, "Overflow notes across bars."),
 			option({value: "wrapAround"}, "Wrap notes around within bars."),
 		);
-		private readonly _cancelButton: HTMLButtonElement = button({className: "cancelButton"});
-		private readonly _okayButton: HTMLButtonElement = button({className: "okayButton", style: "width:45%;"}, "Okay");
+		private readonly _cancelButton: HTMLButtonElement = button({class: "cancelButton"});
+		private readonly _okayButton: HTMLButtonElement = button({class: "okayButton", style: "width:45%;"}, "Okay");
 
-		public readonly container: HTMLDivElement = div({className: "prompt noSelection", style: "width: 250px;"},
+		public readonly container: HTMLDivElement = div({class: "prompt noSelection", style: "width: 250px;"},
 			h2("Move Notes Sideways"),
 			div({style: "display: flex; flex-direction: row; align-items: center; height: 2em; justify-content: flex-end;"},
 				div({style: "text-align: right;"},
@@ -30,7 +30,7 @@ import {ColorConfig} from "./ColorConfig";
 				this._beatsStepper,
 			),
 			div({style: "display: flex; flex-direction: row; align-items: center; height: 2em; justify-content: flex-end;"},
-				div({className: "selectContainer", style: "width: 100%;"}, this._conversionStrategySelect),
+				div({class: "selectContainer", style: "width: 100%;"}, this._conversionStrategySelect),
 			),
 			div({style: "display: flex; flex-direction: row-reverse; justify-content: space-between;"},
 				this._okayButton,

editor/SongDurationPrompt.ts

@@ -17,10 +17,10 @@ import {ColorConfig} from "./ColorConfig";
 			option({value: "end"},       "Apply change at end of song."),
 			option({value: "beginning"}, "Apply change at beginning of song."),
 		);
-		private readonly _cancelButton: HTMLButtonElement = button({className: "cancelButton"});
-		private readonly _okayButton: HTMLButtonElement = button({className: "okayButton", style: "width:45%;"}, "Okay");
+		private readonly _cancelButton: HTMLButtonElement = button({class: "cancelButton"});
+		private readonly _okayButton: HTMLButtonElement = button({class: "okayButton", style: "width:45%;"}, "Okay");
 
-		public readonly container: HTMLDivElement = div({className: "prompt noSelection", style: "width: 250px;"},
+		public readonly container: HTMLDivElement = div({class: "prompt noSelection", style: "width: 250px;"},
 			h2("Song Length"),
 			div({style: "display: flex; flex-direction: row; align-items: center; height: 2em; justify-content: flex-end;"},
 				div({style: "display: inline-block; text-align: right;"},
@@ -31,7 +31,7 @@ import {ColorConfig} from "./ColorConfig";
 				this._barsStepper,
 			),
 			div({style: "display: flex; flex-direction: row; align-items: center; height: 2em; justify-content: flex-end;"},
-				div({className: "selectContainer", style: "width: 100%;"}, this._positionSelect),
+				div({class: "selectContainer", style: "width: 100%;"}, this._positionSelect),
 			),
 			div({style: "display: flex; flex-direction: row-reverse; justify-content: space-between;"},
 				this._okayButton,