wavesurfer-rails 0.1.12 → 0.1.21

data/vendor/assets/javascripts/ws-plugins/wavesurfer.spectrogram.js

@@ -0,0 +1,223 @@
+'use strict';
+
+WaveSurfer.Spectrogram = {
+    init: function (params) {
+        this.params = params;
+        var wavesurfer = this.wavesurfer = params.wavesurfer;
+
+        if (!this.wavesurfer) {
+            throw Error('No WaveSurfer instance provided');
+        }
+
+        this.frequenciesDataUrl = params.frequenciesDataUrl;
+
+        var drawer = this.drawer = this.wavesurfer.drawer;
+        this.buffer = this.wavesurfer.backend.buffer;
+
+        this.container = 'string' == typeof params.container ?
+            document.querySelector(params.container) : params.container;
+
+        if (!this.container) {
+            throw Error('No container for WaveSurfer spectrogram');
+        }
+
+        this.width = drawer.width;
+        this.pixelRatio = this.params.pixelRatio || wavesurfer.params.pixelRatio;
+        this.fftSamples = this.params.fftSamples || wavesurfer.params.fftSamples || 512;
+        this.height = this.fftSamples / 2;
+
+        this.createWrapper();
+        this.createCanvas();
+        this.render();
+
+        wavesurfer.drawer.wrapper.onscroll = this.updateScroll.bind(this);
+        wavesurfer.on('destroy', this.destroy.bind(this));
+    },
+
+    destroy: function () {
+        this.unAll();
+        if (this.wrapper) {
+            this.wrapper.parentNode.removeChild(this.wrapper);
+            this.wrapper = null;
+        }
+    },
+
+    createWrapper: function () {
+        var prevSpectrogram = this.container.querySelector('spectrogram');
+        if (prevSpectrogram) {
+            this.container.removeChild(prevSpectrogram);
+        }
+
+        var wsParams = this.wavesurfer.params;
+
+        this.wrapper = this.container.appendChild(
+            document.createElement('spectrogram')
+        );
+        this.drawer.style(this.wrapper, {
+            display: 'block',
+            position: 'relative',
+            userSelect: 'none',
+            webkitUserSelect: 'none',
+            height: this.height + 'px'
+        });
+
+        if (wsParams.fillParent || wsParams.scrollParent) {
+            this.drawer.style(this.wrapper, {
+                width: '100%',
+                overflowX: 'hidden',
+                overflowY: 'hidden'
+            });
+        }
+
+        var my = this;
+        this.wrapper.addEventListener('click', function (e) {
+            e.preventDefault();
+            var relX = 'offsetX' in e ? e.offsetX : e.layerX;
+            my.fireEvent('click', (relX / my.scrollWidth) || 0);
+        });
+    },
+
+    createCanvas: function () {
+        var canvas = this.canvas = this.wrapper.appendChild(
+          document.createElement('canvas')
+        );
+
+        this.spectrCc = canvas.getContext('2d');
+
+        this.wavesurfer.drawer.style(canvas, {
+            position: 'absolute',
+            zIndex: 4
+        });
+    },
+
+    render: function () {
+        this.updateCanvasStyle();
+
+        if (this.frequenciesDataUrl) {
+            this.loadFrequenciesData(this.frequenciesDataUrl);
+        }
+        else {
+            this.getFrequencies(this.drawSpectrogram);
+        }
+    },
+
+    updateCanvasStyle: function () {
+        var width = Math.round(this.width / this.pixelRatio) + 'px';
+        this.canvas.width = this.width;
+        this.canvas.height = this.height;
+        this.canvas.style.width = width;
+    },
+
+    drawSpectrogram: function(frequenciesData, my) {
+        var spectrCc = my.spectrCc;
+
+        var length = my.wavesurfer.backend.getDuration();
+        var height = my.height;
+
+        var pixels = my.resample(frequenciesData);
+
+        var heightFactor = 2 / my.buffer.numberOfChannels;
+
+        for (var i = 0; i < pixels.length; i++) {
+            for (var j = 0; j < pixels[i].length; j++) {
+                var colorValue = 255 - pixels[i][j];
+                my.spectrCc.fillStyle = 'rgb(' + colorValue + ', '  + colorValue + ', ' + colorValue + ')';
+                my.spectrCc.fillRect(i, height - j * heightFactor, 1, 1 * heightFactor);
+            }
+        }
+    },
+
+    getFrequencies: function(callback) {
+        var fftSamples = this.fftSamples;
+        var buffer = this.buffer;
+        
+        var frequencies = [];
+        var context = new window.OfflineAudioContext(1, buffer.length, buffer.sampleRate);
+        var source = context.createBufferSource();
+        var processor = context.createScriptProcessor(0, 1, 1);
+
+        var analyser = context.createAnalyser();
+        analyser.fftSize = fftSamples;
+        analyser.smoothingTimeConstant = (this.width / buffer.duration < 10) ? 0.75 : 0.25;
+    
+        source.buffer = buffer;
+
+        source.connect(analyser);
+        analyser.connect(processor);
+        processor.connect(context.destination);
+
+        processor.onaudioprocess = function () {
+            var array = new Uint8Array(analyser.frequencyBinCount);
+            analyser.getByteFrequencyData(array);
+            frequencies.push(array);
+        };
+
+        source.start(0);
+        context.startRendering();
+
+        var my = this;
+        context.oncomplete = function() { callback(frequencies, my); };
+    },
+
+    loadFrequenciesData: function (url) {
+        var my = this;
+
+        var ajax = WaveSurfer.util.ajax({ url: url });
+
+        ajax.on('success', function(data) { my.drawSpectrogram(JSON.parse(data), my); });
+        ajax.on('error', function (e) {
+            my.fireEvent('error', 'XHR error: ' + e.target.statusText);
+        });
+
+        return ajax;
+    },
+
+    updateScroll: function(e) {
+      this.wrapper.scrollLeft = e.target.scrollLeft;
+    },
+
+    resample: function(oldMatrix, columnsNumber) {
+        var columnsNumber = this.width;
+        var newMatrix = [];
+
+        var oldPiece = 1 / oldMatrix.length;
+        var newPiece = 1 / columnsNumber;
+
+        for (var i = 0; i < columnsNumber; i++) {
+            var column = new Array(oldMatrix[0].length);
+
+            for (var j = 0; j < oldMatrix.length; j++) {
+                var oldStart = j * oldPiece;
+                var oldEnd = oldStart + oldPiece;
+                var newStart = i * newPiece;
+                var newEnd = newStart + newPiece;
+
+                var overlap = (oldEnd <= newStart || newEnd <= oldStart) ? 
+                                0 :
+                                Math.min(Math.max(oldEnd, newStart), Math.max(newEnd, oldStart)) -
+                                Math.max(Math.min(oldEnd, newStart), Math.min(newEnd, oldStart));
+
+                if (overlap > 0) {
+                    for (var k = 0; k < oldMatrix[0].length; k++) {
+                        if (column[k] == null) {
+                            column[k] = 0;
+                        }
+                        column[k] += (overlap / newPiece) * oldMatrix[j][k];
+                    }
+                }
+            }
+
+            var intColumn = new Uint8Array(oldMatrix[0].length);
+
+            for (var k = 0; k < oldMatrix[0].length; k++) {
+                intColumn[k] = column[k];
+            }
+
+            newMatrix.push(intColumn);
+        }
+
+        return newMatrix;
+    }
+};
+
+WaveSurfer.util.extend(WaveSurfer.Spectrogram, WaveSurfer.Observer);

data/vendor/assets/javascripts/ws-plugins/wavesurfer.timeline.js

@@ -0,0 +1,196 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['wavesurfer'], factory);
+    } else {
+        root.WaveSurfer.Timeline = factory(root.WaveSurfer);
+    }
+}(this, function (WaveSurfer) {
+    'use strict';
+
+    WaveSurfer.Timeline = {
+        init: function (params) {
+            this.params = params;
+            var wavesurfer = this.wavesurfer = params.wavesurfer;
+
+            if (!this.wavesurfer) {
+                throw Error('No WaveSurfer intance provided');
+            }
+
+            var drawer = this.drawer = this.wavesurfer.drawer;
+
+            this.container = 'string' == typeof params.container ?
+                document.querySelector(params.container) : params.container;
+
+            if (!this.container) {
+                throw Error('No container for WaveSurfer timeline');
+            }
+
+            this.width = drawer.width;
+            this.height = this.params.height || 20;
+            this.notchPercentHeight = this.params.notchPercentHeight || 90;
+            this.primaryColor = this.params.primaryColor || '#000';
+            this.secondaryColor = this.params.secondaryColor || '#c0c0c0';
+            this.primaryFontColor = this.params.primaryFontColor || '#000';
+            this.secondaryFontColor = this.params.secondaryFontColor || '#000';
+            this.fontFamily = this.params.fontFamily || 'Arial';
+            this.fontSize = this.params.fontSize || 10;
+
+            this.createWrapper();
+            this.createCanvas();
+            this.render();
+
+            wavesurfer.drawer.wrapper.onscroll = this.updateScroll.bind(this);
+            wavesurfer.on('redraw', this.render.bind(this));
+            wavesurfer.on('destroy', this.destroy.bind(this));
+        },
+
+        destroy: function () {
+            this.unAll();
+            if (this.wrapper && this.wrapper.parentNode) {
+                this.wrapper.parentNode.removeChild(this.wrapper);
+                this.wrapper = null;
+            }
+        },
+
+        createWrapper: function () {
+            var prevTimeline = this.container.querySelector('timeline');
+            if (prevTimeline) {
+                this.container.removeChild(prevTimeline);
+            }
+
+            var wsParams = this.wavesurfer.params;
+            this.wrapper = this.container.appendChild(
+                document.createElement('timeline')
+            );
+            this.drawer.style(this.wrapper, {
+                display: 'block',
+                position: 'relative',
+                userSelect: 'none',
+                webkitUserSelect: 'none',
+                height: this.height + 'px'
+            });
+
+            if (wsParams.fillParent || wsParams.scrollParent) {
+                this.drawer.style(this.wrapper, {
+                    width: '100%',
+                    overflowX: 'hidden',
+                    overflowY: 'hidden'
+                });
+            }
+
+            var my = this;
+            this.wrapper.addEventListener('click', function (e) {
+                e.preventDefault();
+                var relX = 'offsetX' in e ? e.offsetX : e.layerX;
+                my.fireEvent('click', (relX / my.wrapper.scrollWidth) || 0);
+            });
+        },
+
+        createCanvas: function () {
+            var canvas = this.canvas = this.wrapper.appendChild(
+                document.createElement('canvas')
+            );
+
+            this.timeCc = canvas.getContext('2d');
+
+            this.wavesurfer.drawer.style(canvas, {
+                position: 'absolute',
+                zIndex: 4
+            });
+        },
+
+        render: function () {
+            this.updateCanvasStyle();
+            this.drawTimeCanvas();
+        },
+
+        updateCanvasStyle: function () {
+            var width = this.drawer.wrapper.scrollWidth;
+            this.canvas.width = width * this.wavesurfer.params.pixelRatio;
+            this.canvas.height = this.height * this.wavesurfer.params.pixelRatio;
+            this.canvas.style.width = width + 'px';
+            this.canvas.style.height = this.height + 'px';
+        },
+
+        drawTimeCanvas: function() {
+            var backend = this.wavesurfer.backend,
+                wsParams = this.wavesurfer.params,
+                duration = backend.getDuration();
+
+            if (wsParams.fillParent && !wsParams.scrollParent) {
+                var width = this.drawer.getWidth();
+            } else {
+                width = this.drawer.wrapper.scrollWidth * wsParams.pixelRatio;
+            }
+            var pixelsPerSecond = width/duration;
+
+            if (duration > 0) {
+                var curPixel = 0,
+                    curSeconds = 0,
+                    totalSeconds = parseInt(duration, 10) + 1,
+                    formatTime = function(seconds) {
+                        if (seconds/60 > 1) {
+                            var minutes = parseInt(seconds / 60),
+                                seconds = parseInt(seconds % 60);
+                            seconds = (seconds < 10) ? '0' + seconds : seconds;
+                            return '' + minutes + ':' + seconds;
+                        } else {
+                            return seconds;
+                        }
+                    };
+
+                if (pixelsPerSecond * 1 >= 25) {
+                    var timeInterval = 1;
+                    var primaryLabelInterval = 10;
+                    var secondaryLabelInterval = 5;
+                } else if (pixelsPerSecond * 5 >= 25) {
+                    var timeInterval = 5;
+                    var primaryLabelInterval = 6;
+                    var secondaryLabelInterval = 2;
+                } else if (pixelsPerSecond * 15 >= 25) {
+                    var timeInterval = 15;
+                    var primaryLabelInterval = 4;
+                    var secondaryLabelInterval = 2;
+                } else {
+                    var timeInterval = 60;
+                    var primaryLabelInterval = 4;
+                    var secondaryLabelInterval = 2;
+                }
+
+                var height1 = this.height - 4,
+                    height2 = (this.height * (this.notchPercentHeight / 100.0)) - 4,
+                    fontSize = this.fontSize * wsParams.pixelRatio;
+
+                for (var i = 0; i < totalSeconds/timeInterval; i++) {
+                    if (i % primaryLabelInterval == 0) {
+                        this.timeCc.fillStyle = this.primaryColor;
+                        this.timeCc.fillRect(curPixel, 0, 1, height1);
+                        this.timeCc.font = fontSize + 'px ' + this.fontFamily;
+                        this.timeCc.fillStyle = this.primaryFontColor;
+                        this.timeCc.fillText(formatTime(curSeconds), curPixel + 5, height1);
+                    } else if (i % secondaryLabelInterval == 0) {
+                        this.timeCc.fillStyle = this.secondaryColor;
+                        this.timeCc.fillRect(curPixel, 0, 1, height1);
+                        this.timeCc.font = fontSize + 'px ' + this.fontFamily;
+                        this.timeCc.fillStyle = this.secondaryFontColor;
+                        this.timeCc.fillText(formatTime(curSeconds), curPixel + 5, height1);
+                    } else {
+                        this.timeCc.fillStyle = this.secondaryColor;
+                        this.timeCc.fillRect(curPixel, 0, 1, height2);
+                    }
+
+                    curSeconds += timeInterval;
+                    curPixel += pixelsPerSecond * timeInterval;
+                }
+            }
+        },
+
+        updateScroll: function () {
+            this.wrapper.scrollLeft = this.drawer.wrapper.scrollLeft;
+        }
+    };
+
+    WaveSurfer.util.extend(WaveSurfer.Timeline, WaveSurfer.Observer);
+
+    return WaveSurfer.Timeline;
+}));

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: wavesurfer-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.12
+  version: 0.1.21
 platform: ruby
 authors:
 - Taylor Daugherty
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-09-28 00:00:00.000000000 Z
+date: 2015-09-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -55,15 +55,15 @@ files:
 - lib/wavesurfer/rails.rb
 - lib/wavesurfer/rails/engine.rb
 - lib/wavesurfer/rails/version.rb
-- vendor/assets/javascripts/plugin/wavesurfer.elan.min.js
-- vendor/assets/javascripts/plugin/wavesurfer.microphone.min.js
-- vendor/assets/javascripts/plugin/wavesurfer.minimap.min.js
-- vendor/assets/javascripts/plugin/wavesurfer.regions.min.js
-- vendor/assets/javascripts/plugin/wavesurfer.spectrogram.min.js
-- vendor/assets/javascripts/plugin/wavesurfer.timeline.min.js
 - vendor/assets/javascripts/wavesurfer-plugins.js
 - vendor/assets/javascripts/wavesurfer.js
 - vendor/assets/javascripts/wavesurfer.min.js
+- vendor/assets/javascripts/ws-plugins/wavesurfer.elan.js
+- vendor/assets/javascripts/ws-plugins/wavesurfer.microphone.js
+- vendor/assets/javascripts/ws-plugins/wavesurfer.minimap.js
+- vendor/assets/javascripts/ws-plugins/wavesurfer.regions.js
+- vendor/assets/javascripts/ws-plugins/wavesurfer.spectrogram.js
+- vendor/assets/javascripts/ws-plugins/wavesurfer.timeline.js
 - wavesurfer-rails.gemspec
 homepage: http://gdclifford.info/
 licenses: