From ca217c6a59fe1846b09fb40cd7644599717c5606 Mon Sep 17 00:00:00 2001 From: agamemnus Date: Sat, 27 May 2017 02:24:46 -0400 Subject: [PATCH 1/8] Update drawer.multicanvas.js --- src/drawer.multicanvas.js | 160 ++++++++++++++++++++------------------ 1 file changed, 84 insertions(+), 76 deletions(-) diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js index 76f91ade3..a6d21a1e2 100644 --- a/src/drawer.multicanvas.js +++ b/src/drawer.multicanvas.js @@ -140,97 +140,105 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { }, drawBars: function (peaks, channelIndex, start, end) { - // Split channels - if (peaks[0] instanceof Array) { - var channels = peaks; - if (this.params.splitChannels) { - this.setHeight(channels.length * this.params.height * this.params.pixelRatio); - channels.forEach(function(channelPeaks, i) { - this.drawBars(channelPeaks, i, start, end); - }, this); - return; - } else { - peaks = channels[0]; + var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame; + var my = this; + requestAnimationFrame(function() { + // Split channels + if (peaks[0] instanceof Array) { + var channels = peaks; + if (my.params.splitChannels) { + my.setHeight(channels.length * my.params.height * my.params.pixelRatio); + channels.forEach(function(channelPeaks, i) { + my.drawBars(channelPeaks, i, start, end); + }); + return; + } else { + peaks = channels[0]; + } } - } - // Bar wave draws the bottom only as a reflection of the top, - // so we don't need negative values - var hasMinVals = [].some.call(peaks, function (val) {return val < 0;}); - // Skip every other value if there are negatives. - var peakIndexScale = 1; - if (hasMinVals) { - peakIndexScale = 2; - } + // Bar wave draws the bottom only as a reflection of the top, + // so we don't need negative values + var hasMinVals = [].some.call(peaks, function (val) {return val < 0;}); + // Skip every other value if there are negatives. + var peakIndexScale = 1; + if (hasMinVals) { + peakIndexScale = 2; + } - // A half-pixel offset makes lines crisp - var width = this.width; - var height = this.params.height * this.params.pixelRatio; - var offsetY = height * channelIndex || 0; - var halfH = height / 2; - var length = peaks.length / peakIndexScale; - var bar = this.params.barWidth * this.params.pixelRatio; - var gap = Math.max(this.params.pixelRatio, ~~(bar / 2)); - var step = bar + gap; - - var absmax = 1 / this.params.barHeight; - if (this.params.normalize) { - var max = WaveSurfer.util.max(peaks); - var min = WaveSurfer.util.min(peaks); - absmax = -min > max ? -min : max; - } + // A half-pixel offset makes lines crisp + var width = my.width; + var height = my.params.height * my.params.pixelRatio; + var offsetY = height * channelIndex || 0; + var halfH = height / 2; + var length = peaks.length / peakIndexScale; + var bar = my.params.barWidth * my.params.pixelRatio; + var gap = Math.max(my.params.pixelRatio, ~~(bar / 2)); + var step = bar + gap; + + var absmax = 1 / this.params.barHeight; + if (my.params.normalize) { + var max = WaveSurfer.util.max(peaks); + var min = WaveSurfer.util.min(peaks); + absmax = -min > max ? -min : max; + } - var scale = length / width; + var scale = length / width; - for (var i = (start / scale); i < (end / scale); i += step) { - var peak = peaks[Math.floor(i * scale * peakIndexScale)] || 0; - var h = Math.round(peak / absmax * halfH); - this.fillRect(i + this.halfPixel, halfH - h + offsetY, bar + this.halfPixel, h * 2); - } + for (var i = (start / scale); i < (end / scale); i += step) { + var peak = peaks[Math.floor(i * scale * peakIndexScale)] || 0; + var h = Math.round(peak / absmax * halfH); + my.fillRect(i + my.halfPixel, halfH - h + offsetY, bar + my.halfPixel, h * 2); + } + }) }, drawWave: function (peaks, channelIndex, start, end) { - // Split channels - if (peaks[0] instanceof Array) { - var channels = peaks; - if (this.params.splitChannels) { - this.setHeight(channels.length * this.params.height * this.params.pixelRatio); - channels.forEach(function(channelPeaks, i) { - this.drawWave(channelPeaks, i, start, end); - }, this); - return; - } else { - peaks = channels[0]; + var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame; + var my = this; + requestAnimationFrame(function() { + // Split channels + if (peaks[0] instanceof Array) { + var channels = peaks; + if (my.params.splitChannels) { + my.setHeight(channels.length * my.params.height * my.params.pixelRatio); + channels.forEach(function(channelPeaks, i) { + my.drawWave(channelPeaks, i, start, end); + }); + return; + } else { + peaks = channels[0]; + } } - } - // Support arrays without negative peaks - var hasMinValues = [].some.call(peaks, function (val) { return val < 0; }); - if (!hasMinValues) { - var reflectedPeaks = []; - for (var i = 0, len = peaks.length; i < len; i++) { - reflectedPeaks[2 * i] = peaks[i]; - reflectedPeaks[2 * i + 1] = -peaks[i]; + // Support arrays without negative peaks + var hasMinValues = [].some.call(peaks, function (val) { return val < 0; }); + if (!hasMinValues) { + var reflectedPeaks = []; + for (var i = 0, len = peaks.length; i < len; i++) { + reflectedPeaks[2 * i] = peaks[i]; + reflectedPeaks[2 * i + 1] = -peaks[i]; + } + peaks = reflectedPeaks; } - peaks = reflectedPeaks; - } - // A half-pixel offset makes lines crisp - var height = this.params.height * this.params.pixelRatio; - var offsetY = height * channelIndex || 0; - var halfH = height / 2; + // A half-pixel offset makes lines crisp + var height = my.params.height * my.params.pixelRatio; + var offsetY = height * channelIndex || 0; + var halfH = height / 2; - var absmax = 1 / this.params.barHeight; - if (this.params.normalize) { - var max = WaveSurfer.util.max(peaks); - var min = WaveSurfer.util.min(peaks); - absmax = -min > max ? -min : max; - } + var absmax = 1 / my.params.barHeight; + if (my.params.normalize) { + var max = WaveSurfer.util.max(peaks); + var min = WaveSurfer.util.min(peaks); + absmax = -min > max ? -min : max; + } - this.drawLine(peaks, absmax, halfH, offsetY, start, end); + my.drawLine(peaks, absmax, halfH, offsetY, start, end); - // Always draw a median line - this.fillRect(0, halfH + offsetY - this.halfPixel, this.width, this.halfPixel); + // Always draw a median line + my.fillRect(0, halfH + offsetY - my.halfPixel, my.width, my.halfPixel); + }) }, drawLine: function (peaks, absmax, halfH, offsetY, start, end) { From 7d532a24dfc5981d00745d27b05649e0ade68197 Mon Sep 17 00:00:00 2001 From: agamemnus Date: Sat, 27 May 2017 02:27:31 -0400 Subject: [PATCH 2/8] Update drawer.multicanvas.js --- src/drawer.multicanvas.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js index a6d21a1e2..ab962ab5f 100644 --- a/src/drawer.multicanvas.js +++ b/src/drawer.multicanvas.js @@ -190,7 +190,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { var h = Math.round(peak / absmax * halfH); my.fillRect(i + my.halfPixel, halfH - h + offsetY, bar + my.halfPixel, h * 2); } - }) + }); }, drawWave: function (peaks, channelIndex, start, end) { @@ -238,7 +238,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { // Always draw a median line my.fillRect(0, halfH + offsetY - my.halfPixel, my.width, my.halfPixel); - }) + }); }, drawLine: function (peaks, absmax, halfH, offsetY, start, end) { From 621cf2604b9dcbade40633696393dfc8faaa2cda Mon Sep 17 00:00:00 2001 From: agamemnus Date: Sat, 27 May 2017 13:19:46 -0400 Subject: [PATCH 3/8] Update drawer.multicanvas.js --- src/drawer.multicanvas.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js index ab962ab5f..1bb2a7f7c 100644 --- a/src/drawer.multicanvas.js +++ b/src/drawer.multicanvas.js @@ -140,9 +140,8 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { }, drawBars: function (peaks, channelIndex, start, end) { - var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame; var my = this; - requestAnimationFrame(function() { + Wavesurfer.util.requestAnimationFrame(function() { // Split channels if (peaks[0] instanceof Array) { var channels = peaks; @@ -194,9 +193,8 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { }, drawWave: function (peaks, channelIndex, start, end) { - var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame; var my = this; - requestAnimationFrame(function() { + Wavesurfer.util.requestAnimationFrame(function() { // Split channels if (peaks[0] instanceof Array) { var channels = peaks; From 0735e602061c390fd6cef603ff8e8d005bb05b1b Mon Sep 17 00:00:00 2001 From: agamemnus Date: Sat, 27 May 2017 13:29:08 -0400 Subject: [PATCH 4/8] Update drawer.multicanvas.js --- src/drawer.multicanvas.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js index 1bb2a7f7c..764779a1e 100644 --- a/src/drawer.multicanvas.js +++ b/src/drawer.multicanvas.js @@ -141,7 +141,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { drawBars: function (peaks, channelIndex, start, end) { var my = this; - Wavesurfer.util.requestAnimationFrame(function() { + WaveSurfer.util.requestAnimationFrame(function() { // Split channels if (peaks[0] instanceof Array) { var channels = peaks; @@ -194,7 +194,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { drawWave: function (peaks, channelIndex, start, end) { var my = this; - Wavesurfer.util.requestAnimationFrame(function() { + WaveSurfer.util.requestAnimationFrame(function() { // Split channels if (peaks[0] instanceof Array) { var channels = peaks; From 4d64cefc0a2d66d449fd26eccf8a5f39e7107ac2 Mon Sep 17 00:00:00 2001 From: agamemnus Date: Sat, 27 May 2017 13:41:37 -0400 Subject: [PATCH 5/8] I have no idea why this failed. --- src/drawer.multicanvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js index 764779a1e..878fa1672 100644 --- a/src/drawer.multicanvas.js +++ b/src/drawer.multicanvas.js @@ -53,7 +53,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { } this.canvases.forEach(function (entry, i) { - // Add some overlap to prevent vertical white stripes, keep the width even for simplicity. + // Add some overlap to prevent vertical white stripes -- keep the width even for simplicity. var canvasWidth = this.maxCanvasWidth + 2 * Math.ceil(this.params.pixelRatio / 2); if (i == this.canvases.length - 1) { From 219a2e368a67426ea05a89a9354fdc3b67cc93e9 Mon Sep 17 00:00:00 2001 From: agamemnus Date: Mon, 29 May 2017 09:19:20 -0400 Subject: [PATCH 6/8] Update drawer.multicanvas.js --- src/drawer.multicanvas.js | 168 ++++++++++++++++++-------------------- 1 file changed, 81 insertions(+), 87 deletions(-) diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js index 878fa1672..008354850 100644 --- a/src/drawer.multicanvas.js +++ b/src/drawer.multicanvas.js @@ -53,7 +53,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { } this.canvases.forEach(function (entry, i) { - // Add some overlap to prevent vertical white stripes -- keep the width even for simplicity. + // Add some overlap to prevent vertical white stripes, keep the width even for simplicity. var canvasWidth = this.maxCanvasWidth + 2 * Math.ceil(this.params.pixelRatio / 2); if (i == this.canvases.length - 1) { @@ -139,113 +139,107 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { } }, - drawBars: function (peaks, channelIndex, start, end) { - var my = this; - WaveSurfer.util.requestAnimationFrame(function() { - // Split channels - if (peaks[0] instanceof Array) { - var channels = peaks; - if (my.params.splitChannels) { - my.setHeight(channels.length * my.params.height * my.params.pixelRatio); - channels.forEach(function(channelPeaks, i) { - my.drawBars(channelPeaks, i, start, end); - }); - return; - } else { - peaks = channels[0]; - } + drawBars: utils.frame(function(peaks, channelIndex, start, end) { + // Split channels + if (peaks[0] instanceof Array) { + var channels = peaks; + if (this.params.splitChannels) { + this.setHeight(channels.length * this.params.height * this.params.pixelRatio); + channels.forEach(function(channelPeaks, i) { + this.drawBars(channelPeaks, i, start, end); + }, this); + return; + } else { + peaks = channels[0]; } + } - // Bar wave draws the bottom only as a reflection of the top, - // so we don't need negative values - var hasMinVals = [].some.call(peaks, function (val) {return val < 0;}); - // Skip every other value if there are negatives. - var peakIndexScale = 1; - if (hasMinVals) { - peakIndexScale = 2; - } + // Bar wave draws the bottom only as a reflection of the top, + // so we don't need negative values + var hasMinVals = [].some.call(peaks, function (val) {return val < 0;}); + // Skip every other value if there are negatives. + var peakIndexScale = 1; + if (hasMinVals) { + peakIndexScale = 2; + } - // A half-pixel offset makes lines crisp - var width = my.width; - var height = my.params.height * my.params.pixelRatio; - var offsetY = height * channelIndex || 0; - var halfH = height / 2; - var length = peaks.length / peakIndexScale; - var bar = my.params.barWidth * my.params.pixelRatio; - var gap = Math.max(my.params.pixelRatio, ~~(bar / 2)); - var step = bar + gap; - - var absmax = 1 / this.params.barHeight; - if (my.params.normalize) { - var max = WaveSurfer.util.max(peaks); - var min = WaveSurfer.util.min(peaks); - absmax = -min > max ? -min : max; - } + // A half-pixel offset makes lines crisp + var width = this.width; + var height = this.params.height * this.params.pixelRatio; + var offsetY = height * channelIndex || 0; + var halfH = height / 2; + var length = peaks.length / peakIndexScale; + var bar = this.params.barWidth * this.params.pixelRatio; + var gap = Math.max(this.params.pixelRatio, ~~(bar / 2)); + var step = bar + gap; + + var absmax = 1 / this.params.barHeight; + if (this.params.normalize) { + var max = WaveSurfer.util.max(peaks); + var min = WaveSurfer.util.min(peaks); + absmax = -min > max ? -min : max; + } - var scale = length / width; + var scale = length / width; - for (var i = (start / scale); i < (end / scale); i += step) { - var peak = peaks[Math.floor(i * scale * peakIndexScale)] || 0; - var h = Math.round(peak / absmax * halfH); - my.fillRect(i + my.halfPixel, halfH - h + offsetY, bar + my.halfPixel, h * 2); - } - }); + for (var i = (start / scale); i < (end / scale); i += step) { + var peak = peaks[Math.floor(i * scale * peakIndexScale)] || 0; + var h = Math.round(peak / absmax * halfH); + this.fillRect(i + this.halfPixel, halfH - h + offsetY, bar + this.halfPixel, h * 2); + } }, drawWave: function (peaks, channelIndex, start, end) { - var my = this; - WaveSurfer.util.requestAnimationFrame(function() { - // Split channels - if (peaks[0] instanceof Array) { - var channels = peaks; - if (my.params.splitChannels) { - my.setHeight(channels.length * my.params.height * my.params.pixelRatio); - channels.forEach(function(channelPeaks, i) { - my.drawWave(channelPeaks, i, start, end); - }); - return; - } else { - peaks = channels[0]; - } + // Split channels + if (peaks[0] instanceof Array) { + var channels = peaks; + if (this.params.splitChannels) { + this.setHeight(channels.length * this.params.height * this.params.pixelRatio); + channels.forEach(function(channelPeaks, i) { + this.drawWave(channelPeaks, i, start, end); + }, this); + return; + } else { + peaks = channels[0]; } + } - // Support arrays without negative peaks - var hasMinValues = [].some.call(peaks, function (val) { return val < 0; }); - if (!hasMinValues) { - var reflectedPeaks = []; - for (var i = 0, len = peaks.length; i < len; i++) { - reflectedPeaks[2 * i] = peaks[i]; - reflectedPeaks[2 * i + 1] = -peaks[i]; - } - peaks = reflectedPeaks; + // Support arrays without negative peaks + var hasMinValues = [].some.call(peaks, function (val) { return val < 0; }); + if (!hasMinValues) { + var reflectedPeaks = []; + for (var i = 0, len = peaks.length; i < len; i++) { + reflectedPeaks[2 * i] = peaks[i]; + reflectedPeaks[2 * i + 1] = -peaks[i]; } + peaks = reflectedPeaks; + } - // A half-pixel offset makes lines crisp - var height = my.params.height * my.params.pixelRatio; - var offsetY = height * channelIndex || 0; - var halfH = height / 2; + // A half-pixel offset makes lines crisp + var height = this.params.height * this.params.pixelRatio; + var offsetY = height * channelIndex || 0; + var halfH = height / 2; - var absmax = 1 / my.params.barHeight; - if (my.params.normalize) { - var max = WaveSurfer.util.max(peaks); - var min = WaveSurfer.util.min(peaks); - absmax = -min > max ? -min : max; - } + var absmax = 1 / this.params.barHeight; + if (this.params.normalize) { + var max = WaveSurfer.util.max(peaks); + var min = WaveSurfer.util.min(peaks); + absmax = -min > max ? -min : max; + } - my.drawLine(peaks, absmax, halfH, offsetY, start, end); + this.drawLine(peaks, absmax, halfH, offsetY, start, end); - // Always draw a median line - my.fillRect(0, halfH + offsetY - my.halfPixel, my.width, my.halfPixel); - }); - }, + // Always draw a median line + this.fillRect(0, halfH + offsetY - this.halfPixel, this.width, this.halfPixel); + }), - drawLine: function (peaks, absmax, halfH, offsetY, start, end) { + drawLine: utils.frame(function(peaks, absmax, halfH, offsetY, start, end) { this.canvases.forEach (function (entry) { this.setFillStyles(entry); this.drawLineToContext(entry, entry.waveCtx, peaks, absmax, halfH, offsetY, start, end); this.drawLineToContext(entry, entry.progressCtx, peaks, absmax, halfH, offsetY, start, end); }, this); - }, + }), drawLineToContext: function (entry, ctx, peaks, absmax, halfH, offsetY, start, end) { if (!ctx) { return; } From b926ebbbd507c7aa736676ac3d9d66647922b63d Mon Sep 17 00:00:00 2001 From: agamemnus Date: Mon, 29 May 2017 09:32:54 -0400 Subject: [PATCH 7/8] Update drawer.multicanvas.js --- src/drawer.multicanvas.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js index 008354850..4c6870830 100644 --- a/src/drawer.multicanvas.js +++ b/src/drawer.multicanvas.js @@ -139,7 +139,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { } }, - drawBars: utils.frame(function(peaks, channelIndex, start, end) { + drawBars: WaveSurfer.utils.frame(function (peaks, channelIndex, start, end) { // Split channels if (peaks[0] instanceof Array) { var channels = peaks; @@ -187,9 +187,9 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { var h = Math.round(peak / absmax * halfH); this.fillRect(i + this.halfPixel, halfH - h + offsetY, bar + this.halfPixel, h * 2); } - }, + }), - drawWave: function (peaks, channelIndex, start, end) { + drawWave: WaveSurfer.utils.frame(function (peaks, channelIndex, start, end) { // Split channels if (peaks[0] instanceof Array) { var channels = peaks; @@ -233,13 +233,13 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { this.fillRect(0, halfH + offsetY - this.halfPixel, this.width, this.halfPixel); }), - drawLine: utils.frame(function(peaks, absmax, halfH, offsetY, start, end) { + drawLine: function (peaks, absmax, halfH, offsetY, start, end) { this.canvases.forEach (function (entry) { this.setFillStyles(entry); this.drawLineToContext(entry, entry.waveCtx, peaks, absmax, halfH, offsetY, start, end); this.drawLineToContext(entry, entry.progressCtx, peaks, absmax, halfH, offsetY, start, end); }, this); - }), + }, drawLineToContext: function (entry, ctx, peaks, absmax, halfH, offsetY, start, end) { if (!ctx) { return; } From 9661b00b22e296b68eeaac50ab14ab872808f90e Mon Sep 17 00:00:00 2001 From: agamemnus Date: Mon, 29 May 2017 09:37:32 -0400 Subject: [PATCH 8/8] Update drawer.multicanvas.js --- src/drawer.multicanvas.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js index 4c6870830..0797ba0f7 100644 --- a/src/drawer.multicanvas.js +++ b/src/drawer.multicanvas.js @@ -139,7 +139,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { } }, - drawBars: WaveSurfer.utils.frame(function (peaks, channelIndex, start, end) { + drawBars: WaveSurfer.util.frame(function (peaks, channelIndex, start, end) { // Split channels if (peaks[0] instanceof Array) { var channels = peaks; @@ -189,7 +189,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, { } }), - drawWave: WaveSurfer.utils.frame(function (peaks, channelIndex, start, end) { + drawWave: WaveSurfer.util.frame(function (peaks, channelIndex, start, end) { // Split channels if (peaks[0] instanceof Array) { var channels = peaks;