wavesurfer.js - npm Package Compare versions

Comparing version 1.0.18 to 1.0.19

bower.json

 {
   "name"          : "wavesurfer.js",
-  "version"       : "1.0.18",
+  "version"       : "1.0.19",
   "homepage"      : "https://github.com/katspaugh/wavesurfer.js",
@@ -5,0 +5,0 @@ "main"          : "build/wavesurfer.min.js",

example/main.js

@@ -21,6 +21,2 @@ 'use strict';
 
-    if (location.search.match('normalize')) {
-        options.normalize = true;
-    }
-
     // Init
@@ -27,0 +23,0 @@ wavesurfer.init(options);

package.json

 {
   "name": "wavesurfer.js",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
@@ -5,0 +5,0 @@ "main": "build/wavesurfer.cjs.js",

README.md

@@ -69,3 +69,2 @@ # wavesurfer.js
 | `minPxPerSec` | integer | `50` | Minimum number of pixels per second of audio. |
-| `normalize` | boolean | `false` | If `true`, normalize by the maximum peak instead of 1.0. |
 | `pixelRatio` | integer | `window.devicePixelRatio` | Can be set to `1` for faster rendering. |
@@ -72,0 +71,0 @@ | `progressColor` | string | `#555` | The fill color of the part of the waveform behind the cursor. |

src/drawer.canvas.js

@@ -21,3 +21,2 @@ 'use strict';
                 width: '0',
-                height: this.params.height + 'px',
                 boxSizing: 'border-box',
@@ -38,3 +37,3 @@ borderRightStyle: 'solid',
 
-    updateWidth: function () {
+    updateSize: function () {
         var width = Math.round(this.width / this.params.pixelRatio);
@@ -62,8 +61,21 @@
 
-    drawWave: function (peaks, max) {
+    drawWave: function (peaks, channelIndex) {
+        // 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(this.drawWave, this);
+                return;
+            } else {
+                peaks = channels[0];
+            }
+        }
+
         // A half-pixel offset makes lines crisp
         var $ = 0.5 / this.params.pixelRatio;
-
-        var halfH = this.height / 2;
-        var coef = halfH / max;
+        // A margin between split waveforms
+        var height = this.params.height * this.params.pixelRatio;
+        var offsetY = height * channelIndex || 0;
+        var halfH = height / 2;
         var length = peaks.length;
@@ -84,22 +96,23 @@ var scale = 1;
             cc.beginPath();
-            cc.moveTo($, halfH);
+            cc.moveTo($, halfH + offsetY);
 
             for (var i = 0; i < length; i++) {
-                var h = Math.round(peaks[i] * coef);
-                cc.lineTo(i * scale + $, halfH + h);
+                var h = Math.round(peaks[i] * halfH);
+                cc.lineTo(i * scale + $, halfH + h + offsetY);
             }
 
-            cc.lineTo(this.width + $, halfH);
-            cc.moveTo($, halfH);
+            cc.lineTo(this.width + $, halfH + offsetY);
+            cc.moveTo($, halfH + offsetY);
 
             for (var i = 0; i < length; i++) {
-                var h = Math.round(peaks[i] * coef);
-                cc.lineTo(i * scale + $, halfH - h);
+                var h = Math.round(peaks[i] * halfH);
+                cc.lineTo(i * scale + $, halfH - h + offsetY);
             }
 
-            cc.lineTo(this.width + $, halfH);
+            cc.lineTo(this.width + $, halfH + offsetY);
+            cc.closePath();
             cc.fill();
 
             // Always draw a median line
-            cc.fillRect(0, halfH - $, this.width, $);
+            cc.fillRect(0, halfH + offsetY - $, this.width, $);
         }, this);
@@ -106,0 +119,0 @@ },

src/drawer.js

@@ -74,8 +74,3 @@ 'use strict';
         this.setWidth(length);
-        if (this.params.normalize) {
-            var max = WaveSurfer.util.max(peaks);
-        } else {
-            max = 1;
-        }
-        this.drawWave(peaks, max);
+        this.drawWave(peaks);
     },
@@ -152,5 +147,14 @@
 
-        this.updateWidth();
+        this.updateSize();
     },
 
+    setHeight: function (height) {
+        if (height == this.height) { return; }
+        this.height = height;
+        this.style(this.wrapper, {
+            height: ~~(this.height / this.params.pixelRatio) + 'px'
+        });
+        this.updateSize();
+    },
+
     progress: function (progress) {
@@ -183,3 +187,3 @@ var minPxDelta = 1 / this.params.pixelRatio;
 
-    updateWidth: function () {},
+    updateSize: function () {},
 
@@ -186,0 +190,0 @@ drawWave: function (peaks, max) {},

src/util.js

@@ -17,14 +17,2 @@ /* Common utilities */
 
-    max: function (values, min) {
-        var max = -Infinity;
-        for (var i = 0, len = values.length; i < len; i++) {
-            var val = values[i];
-            if (min != null) {
-                val = Math.abs(val - min);
-            }
-            if (val > max) { max = val; }
-        }
-        return max;
-    },
-
     ajax: function (options) {
@@ -31,0 +19,0 @@ var ajax = Object.create(WaveSurfer.Observer);

src/wavesurfer.js

@@ -24,3 +24,2 @@ /**
         hideScrollbar : false,
-        normalize     : false,
         audioContext  : null,
@@ -32,2 +31,3 @@ container     : null,
         interact      : true,
+        splitChannels : false,
         renderer      : 'Canvas',
@@ -34,0 +34,0 @@ backend       : 'WebAudio',

src/webaudio.js

@@ -168,13 +168,15 @@ 'use strict';
     /**
-     * @returns {Float32Array} Array of peaks.
+     * @returns {Array} Array of peaks or array of arrays of peaks.
      */
     getPeaks: function (length) {
-        var buffer = this.buffer;
-        var sampleSize = buffer.length / length;
+        var sampleSize = this.buffer.length / length;
         var sampleStep = ~~(sampleSize / 10) || 1;
-        var channels = buffer.numberOfChannels;
-        var peaks = new Float32Array(length);
+        var channels = this.buffer.numberOfChannels;
+        var splitPeaks = [];
+        var mergedPeaks = [];
 
         for (var c = 0; c < channels; c++) {
-            var chan = buffer.getChannelData(c);
+            var peaks = splitPeaks[c] = [];
+            var chan = this.buffer.getChannelData(c);
+
             for (var i = 0; i < length; i++) {
@@ -193,4 +195,6 @@ var start = ~~(i * sampleSize);
                 }
-                if (c == 0 || max > peaks[i]) {
-                    peaks[i] = max;
+                peaks[i] = max;
+
+                if (c == 0 || max > mergedPeaks[i]) {
+                    mergedPeaks[i] = max;
                 }
@@ -200,3 +204,3 @@ }
 
-        return peaks;
+        return this.params.splitChannels ? splitPeaks : mergedPeaks;
     },
@@ -203,0 +207,0 @@

No alert changes

Improved metrics

Total package byte prevSize

4006512

increased by1.03%

Lines of code

42150

increased by2.95%

Worsened metrics

Number of lines in readme file

208

decreased by-0.48%

No dependency changes