waveform in worker

ondras · Sep 4, 2017 · 634a23f · 634a23f
1 parent 78394ea
commit 634a23f
Show file tree

Hide file tree

Showing 12 changed files with 186 additions and 135 deletions.
diff --git a/Makefile b/Makefile
@@ -15,6 +15,7 @@ electron:
 	cp bin/mp-electron.sh $(ELECTRON)/mp.sh
 	cp bin/mp-electron.bat $(ELECTRON)/mp.bat
 	cp bin/install.bat $(ELECTRON)
+	cp js/worker.js $(ELECTRON)/
 	ln -f -r -s sample $(ELECTRON)
 
 nw:
@@ -24,6 +25,7 @@ nw:
 	cp -r $(COMMON) $(NW)
 	cp js/nw.app.js $(NW)/app.js
 	cp bin/mp-nw.sh $(NW)/mp.sh
+	cp js/worker.js $(ELECTRON)/
 	ln -f -r -s sample $(NW)
 
 web:
@@ -34,6 +36,7 @@ web:
 	cp html/index.html $(WEB)
 	cp js/web.app.js $(WEB)/app.js
 	cp js/web.main.js $(WEB)/main.js
+	cp js/worker.js $(ELECTRON)/
 	ln -f -r -s sample $(WEB)
 
 watch: all

diff --git a/bin/mp-electron.sh b/bin/mp-electron.sh
@@ -1,2 +1,2 @@
 #!/bin/sh
-~/node_modules/electron-prebuilt/dist/electron $(dirname $0)/main.js "$@"
+~/node_modules/electron/dist/electron $(dirname $0)/main.js "$@"
diff --git a/dist/electron/app.js b/dist/electron/app.js
@@ -750,21 +750,32 @@ class Waveform {
 
 	_decoded(audioBuffer) {
 		let channels = [];
-		let width = this._options.width / this._options.columns;
-
 		for (let i=0;i<audioBuffer.numberOfChannels;i++) {
 			channels.push(audioBuffer.getChannelData(i));
 		}
 
+		let w = new Worker("worker.js");
+
+		w.addEventListener("message", e => {
+			if (e.data.type == "waveform") { this._draw(e.data.data); }
+		});
+
+		w.postMessage({
+			type: "audio-buffer",
+			columns: this._options.columns,
+			channels
+		});
+	}
+
+	_draw(data) {
+		let width = this._options.width / this._options.columns;
+
 		let ctx = this._node.getContext("2d");
 		ctx.beginPath();
 		ctx.moveTo(0, this._node.height);
 
-		let samplesPerColumn = Math.floor(channels[0].length / this._options.columns);
 		for (let i=0;i<this._options.columns;i++) {
-			let val = this._computeColumn(channels, i*samplesPerColumn, (i+1)*samplesPerColumn);
-
-			let height = val * this._node.height;
+			let height = data[i] * this._node.height;
 			ctx.lineTo(i*width, this._node.height-height);
 		}
 
@@ -782,19 +793,6 @@ class Waveform {
 
 		ctx.fill();
 	}
-
-	_computeColumn(channels, fromSample, toSample) {
-		let sum = 0;
-
-		for (let i=fromSample; i<toSample; i++) {
-			for (let j=0; j<channels.length; j++) {
-				sum += Math.abs(channels[j][i]);
-			}
-		}
-
-		let count = (toSample - fromSample) * channels.length;
-		return 2*sum/count;
-	}
 }
 
 function accepts(arrayBuffer) {

diff --git a/dist/electron/mp.sh b/dist/electron/mp.sh
@@ -1,2 +1,2 @@
 #!/bin/sh
-~/node_modules/electron-prebuilt/dist/electron $(dirname $0)/main.js "$@"
+~/node_modules/electron/dist/electron $(dirname $0)/main.js "$@"
diff --git a/dist/electron/worker.js b/dist/electron/worker.js
@@ -0,0 +1,31 @@
+onmessage = function(e) {
+	switch (e.data.type) {
+		case "audio-buffer":
+			let data = computeWaveform(e.data.channels, e.data.columns);
+			postMessage({type:"waveform", data});
+		break;
+	}
+}
+
+function computeColumn(channels, fromSample, toSample) {
+	let sum = 0;
+
+	for (let i=fromSample; i<toSample; i++) {
+		for (let j=0; j<channels.length; j++) {
+			sum += Math.abs(channels[j][i]);
+		}
+	}
+
+	let count = (toSample - fromSample) * channels.length;
+	return 2*sum/count;
+}
+
+function computeWaveform(channels, columns) {
+	let data = [];
+	let samplesPerColumn = Math.floor(channels[0].length / columns);
+	for (let i=0;i<columns;i++) {
+		let val = computeColumn(channels, i*samplesPerColumn, (i+1)*samplesPerColumn);
+		data.push(val);
+	}
+	return data;
+}
diff --git a/dist/nw/app.js b/dist/nw/app.js
@@ -764,21 +764,32 @@ class Waveform {
 
 	_decoded(audioBuffer) {
 		let channels = [];
-		let width = this._options.width / this._options.columns;
-
 		for (let i=0;i<audioBuffer.numberOfChannels;i++) {
 			channels.push(audioBuffer.getChannelData(i));
 		}
 
+		let w = new Worker("worker.js");
+
+		w.addEventListener("message", e => {
+			if (e.data.type == "waveform") { this._draw(e.data.data); }
+		});
+
+		w.postMessage({
+			type: "audio-buffer",
+			columns: this._options.columns,
+			channels
+		});
+	}
+
+	_draw(data) {
+		let width = this._options.width / this._options.columns;
+
 		let ctx = this._node.getContext("2d");
 		ctx.beginPath();
 		ctx.moveTo(0, this._node.height);
 
-		let samplesPerColumn = Math.floor(channels[0].length / this._options.columns);
 		for (let i=0;i<this._options.columns;i++) {
-			let val = this._computeColumn(channels, i*samplesPerColumn, (i+1)*samplesPerColumn);
-
-			let height = val * this._node.height;
+			let height = data[i] * this._node.height;
 			ctx.lineTo(i*width, this._node.height-height);
 		}
 
@@ -796,19 +807,6 @@ class Waveform {
 
 		ctx.fill();
 	}
-
-	_computeColumn(channels, fromSample, toSample) {
-		let sum = 0;
-
-		for (let i=fromSample; i<toSample; i++) {
-			for (let j=0; j<channels.length; j++) {
-				sum += Math.abs(channels[j][i]);
-			}
-		}
-
-		let count = (toSample - fromSample) * channels.length;
-		return 2*sum/count;
-	}
 }
 
 function accepts(arrayBuffer) {

diff --git a/dist/web/app.js b/dist/web/app.js
@@ -746,21 +746,32 @@ class Waveform {
 
 	_decoded(audioBuffer) {
 		let channels = [];
-		let width = this._options.width / this._options.columns;
-
 		for (let i=0;i<audioBuffer.numberOfChannels;i++) {
 			channels.push(audioBuffer.getChannelData(i));
 		}
 
+		let w = new Worker("worker.js");
+
+		w.addEventListener("message", e => {
+			if (e.data.type == "waveform") { this._draw(e.data.data); }
+		});
+
+		w.postMessage({
+			type: "audio-buffer",
+			columns: this._options.columns,
+			channels
+		});
+	}
+
+	_draw(data) {
+		let width = this._options.width / this._options.columns;
+
 		let ctx = this._node.getContext("2d");
 		ctx.beginPath();
 		ctx.moveTo(0, this._node.height);
 
-		let samplesPerColumn = Math.floor(channels[0].length / this._options.columns);
 		for (let i=0;i<this._options.columns;i++) {
-			let val = this._computeColumn(channels, i*samplesPerColumn, (i+1)*samplesPerColumn);
-
-			let height = val * this._node.height;
+			let height = data[i] * this._node.height;
 			ctx.lineTo(i*width, this._node.height-height);
 		}
 
@@ -778,19 +789,6 @@ class Waveform {
 
 		ctx.fill();
 	}
-
-	_computeColumn(channels, fromSample, toSample) {
-		let sum = 0;
-
-		for (let i=fromSample; i<toSample; i++) {
-			for (let j=0; j<channels.length; j++) {
-				sum += Math.abs(channels[j][i]);
-			}
-		}
-
-		let count = (toSample - fromSample) * channels.length;
-		return 2*sum/count;
-	}
 }
 
 function accepts(arrayBuffer) {

diff --git a/js/electron.app.js b/js/electron.app.js
@@ -750,21 +750,32 @@ class Waveform {
 
 	_decoded(audioBuffer) {
 		let channels = [];
-		let width = this._options.width / this._options.columns;
-
 		for (let i=0;i<audioBuffer.numberOfChannels;i++) {
 			channels.push(audioBuffer.getChannelData(i));
 		}
 
+		let w = new Worker("worker.js");
+
+		w.addEventListener("message", e => {
+			if (e.data.type == "waveform") { this._draw(e.data.data); }
+		});
+
+		w.postMessage({
+			type: "audio-buffer",
+			columns: this._options.columns,
+			channels
+		});
+	}
+
+	_draw(data) {
+		let width = this._options.width / this._options.columns;
+
 		let ctx = this._node.getContext("2d");
 		ctx.beginPath();
 		ctx.moveTo(0, this._node.height);
 
-		let samplesPerColumn = Math.floor(channels[0].length / this._options.columns);
 		for (let i=0;i<this._options.columns;i++) {
-			let val = this._computeColumn(channels, i*samplesPerColumn, (i+1)*samplesPerColumn);
-
-			let height = val * this._node.height;
+			let height = data[i] * this._node.height;
 			ctx.lineTo(i*width, this._node.height-height);
 		}
 
@@ -782,19 +793,6 @@ class Waveform {
 
 		ctx.fill();
 	}
-
-	_computeColumn(channels, fromSample, toSample) {
-		let sum = 0;
-
-		for (let i=fromSample; i<toSample; i++) {
-			for (let j=0; j<channels.length; j++) {
-				sum += Math.abs(channels[j][i]);
-			}
-		}
-
-		let count = (toSample - fromSample) * channels.length;
-		return 2*sum/count;
-	}
 }
 
 function accepts(arrayBuffer) {

diff --git a/js/nw.app.js b/js/nw.app.js
@@ -764,21 +764,32 @@ class Waveform {
 
 	_decoded(audioBuffer) {
 		let channels = [];
-		let width = this._options.width / this._options.columns;
-
 		for (let i=0;i<audioBuffer.numberOfChannels;i++) {
 			channels.push(audioBuffer.getChannelData(i));
 		}
 
+		let w = new Worker("worker.js");
+
+		w.addEventListener("message", e => {
+			if (e.data.type == "waveform") { this._draw(e.data.data); }
+		});
+
+		w.postMessage({
+			type: "audio-buffer",
+			columns: this._options.columns,
+			channels
+		});
+	}
+
+	_draw(data) {
+		let width = this._options.width / this._options.columns;
+
 		let ctx = this._node.getContext("2d");
 		ctx.beginPath();
 		ctx.moveTo(0, this._node.height);
 
-		let samplesPerColumn = Math.floor(channels[0].length / this._options.columns);
 		for (let i=0;i<this._options.columns;i++) {
-			let val = this._computeColumn(channels, i*samplesPerColumn, (i+1)*samplesPerColumn);
-
-			let height = val * this._node.height;
+			let height = data[i] * this._node.height;
 			ctx.lineTo(i*width, this._node.height-height);
 		}
 
@@ -796,19 +807,6 @@ class Waveform {
 
 		ctx.fill();
 	}
-
-	_computeColumn(channels, fromSample, toSample) {
-		let sum = 0;
-
-		for (let i=fromSample; i<toSample; i++) {
-			for (let j=0; j<channels.length; j++) {
-				sum += Math.abs(channels[j][i]);
-			}
-		}
-
-		let count = (toSample - fromSample) * channels.length;
-		return 2*sum/count;
-	}
 }
 
 function accepts(arrayBuffer) {