wavesurfer 0.0.1

data/vendor/assets/javascripts/plugin/wavesurfer.regions.js

@@ -0,0 +1,390 @@
+'use strict';
+
+/* Regions manager */
+WaveSurfer.Regions = {
+    init: function (wavesurfer) {
+        this.wavesurfer = wavesurfer;
+        this.wrapper = this.wavesurfer.drawer.wrapper;
+
+        /* Id-based hash of regions. */
+        this.list = {};
+    },
+
+    /* Remove a region. */
+    add: function (params) {
+        var region = Object.create(WaveSurfer.Region);
+        region.init(params, this.wavesurfer);
+
+        this.list[region.id] = region;
+
+        region.on('remove', (function () {
+            delete this.list[region.id];
+        }).bind(this));
+
+        return region;
+    },
+
+    /* Remove all regions. */
+    clear: function () {
+        Object.keys(this.list).forEach(function (id) {
+            this.list[id].remove();
+        }, this);
+    },
+
+    enableDragSelection: function (params) {
+        var my = this;
+        var drag;
+        var start;
+        var region;
+
+        this.wrapper.addEventListener('mousedown', function (e) {
+            drag = true;
+            start = my.wavesurfer.drawer.handleEvent(e);
+            region = null;
+        });
+        this.wrapper.addEventListener('mouseup', function () {
+            drag = false;
+            region = null;
+        });
+        this.wrapper.addEventListener('mousemove', function (e) {
+            if (!drag) { return; }
+
+            if (!region) {
+                region = my.add(params || {});
+            }
+
+            var duration = my.wavesurfer.getDuration();
+            var end = my.wavesurfer.drawer.handleEvent(e);
+            region.update({
+                start: Math.min(end * duration, start * duration),
+                end: Math.max(end * duration, start * duration)
+            });
+        });
+    }
+};
+
+WaveSurfer.Region = {
+    /* Helper function to assign CSS styles. */
+    style: WaveSurfer.Drawer.style,
+
+    init: function (params, wavesurfer) {
+        this.wavesurfer = wavesurfer;
+        this.wrapper = wavesurfer.drawer.wrapper;
+
+        this.id = params.id == null ? WaveSurfer.util.getId() : params.id;
+        this.start = Number(params.start) || 0;
+        this.end = params.end == null ?
+            // small marker-like region
+            this.start + (4 / this.wrapper.scrollWidth) * this.wavesurfer.getDuration() :
+            Number(params.end);
+        this.resize = params.resize === undefined ? true : Boolean(params.resize);
+        this.drag = params.drag === undefined ? true : Boolean(params.drag);
+        this.loop = Boolean(params.loop);
+        this.color = params.color || 'rgba(0, 0, 0, 0.1)';
+        this.data = params.data || {};
+
+        this.bindInOut();
+        this.render();
+
+        this.wavesurfer.fireEvent('region-created', this);
+    },
+
+    /* Update region params. */
+    update: function (params) {
+        if (null != params.start) {
+            this.start = Number(params.start);
+        }
+        if (null != params.end) {
+            this.end = Number(params.end);
+        }
+        if (null != params.loop) {
+            this.loop = Boolean(params.loop);
+        }
+        if (null != params.color) {
+            this.color = params.color;
+        }
+        if (null != params.data) {
+            this.data = params.data;
+        }
+        if (null != params.resize) {
+            this.resize = Boolean(params.resize);
+        }
+        if (null != params.drag) {
+            this.drag = Boolean(params.drag);
+        }
+        this.updateRender();
+        this.fireEvent('update');
+        this.wavesurfer.fireEvent('region-updated', this);
+    },
+
+    /* Remove a single region. */
+    remove: function (region) {
+        if (this.element) {
+            this.wrapper.removeChild(this.element);
+            this.element = null;
+            this.fireEvent('remove');
+            this.wavesurfer.fireEvent('region-removed', this);
+        }
+    },
+
+    /* Play the audio region. */
+    play: function () {
+        this.wavesurfer.play(this.start, this.end);
+        this.fireEvent('play');
+        this.wavesurfer.fireEvent('region-play', this);
+    },
+
+    /* Play the region in loop. */
+    playLoop: function () {
+        this.play();
+        this.once('out', this.playLoop.bind(this));
+    },
+
+    /* Render a region as a DOM element. */
+    render: function () {
+        var regionEl = document.createElement('region');
+        regionEl.className = 'wavesurfer-region';
+        regionEl.title = this.formatTime(this.start, this.end);
+
+        var width = this.wrapper.scrollWidth;
+        this.style(regionEl, {
+            position: 'absolute',
+            zIndex: 2,
+            height: '100%',
+            top: '0px'
+        });
+
+        /* Resize handles */
+        if (this.resize) {
+            var handleLeft = regionEl.appendChild(document.createElement('handle'));
+            var handleRight = regionEl.appendChild(document.createElement('handle'));
+            handleLeft.className = 'wavesurfer-handle wavesurfer-handle-start';
+            handleRight.className = 'wavesurfer-handle wavesurfer-handle-end';
+            var css = {
+                cursor: 'col-resize',
+                position: 'absolute',
+                left: '0px',
+                top: '0px',
+                width: '1%',
+                maxWidth: '4px',
+                height: '100%'
+            };
+            this.style(handleLeft, css);
+            this.style(handleRight, css);
+            this.style(handleRight, {
+                left: '100%'
+            });
+        }
+
+        this.element = this.wrapper.appendChild(regionEl);
+        this.updateRender();
+        this.bindEvents(regionEl);
+    },
+
+    formatTime: function (start, end) {
+        return (start == end ? [ start ] : [ start, end ]).map(function (time) {
+            return [
+                Math.floor((time % 3600) / 60), // minutes
+                ('00' + Math.floor(time % 60)).slice(-2) // seconds
+            ].join(':');
+        }).join('–');
+    },
+
+    /* Update element's position, width, color. */
+    updateRender: function () {
+        var dur = this.wavesurfer.getDuration();
+        var width = this.wrapper.scrollWidth;
+
+        if (this.start < 0) {
+          this.start = 0;
+          this.end = this.end - this.start;
+        }
+        if (this.end > dur) {
+          this.end = dur;
+          this.start = dur - (this.end - this.start);
+        }
+        this.style(this.element, {
+            left: ~~(this.start / dur * width) + 'px',
+            width: ~~((this.end - this.start) / dur * width) + 'px',
+            backgroundColor: this.color,
+            cursor: this.drag ? 'move' : 'default'
+        });
+        this.element.title = this.formatTime(this.start, this.end);
+    },
+
+    /* Bind audio events. */
+    bindInOut: function () {
+        var my = this;
+
+        var onPlay = function () {
+            my.firedIn = false;
+            my.firedOut = false;
+        };
+
+        var onProcess = function (time) {
+            if (!my.firedIn && my.start <= time && my.end > time) {
+                my.firedIn = true;
+                my.fireEvent('in');
+                my.wavesurfer.fireEvent('region-in', my);
+            }
+            if (!my.firedOut && my.firedIn && my.end <= time) {
+                my.firedOut = true;
+                my.fireEvent('out');
+                my.wavesurfer.fireEvent('region-out', my);
+            }
+        };
+
+        this.wavesurfer.on('play', onPlay);
+        this.wavesurfer.backend.on('audioprocess', onProcess);
+
+        this.on('remove', function () {
+            my.wavesurfer.un('play', onPlay);
+            my.wavesurfer.backend.un('audioprocess', onProcess);
+        });
+
+        /* Loop playback. */
+        this.on('out', function () {
+            if (my.loop) {
+                my.wavesurfer.play(my.start);
+            }
+        });
+    },
+
+    /* Bind DOM events. */
+    bindEvents: function () {
+        var my = this;
+
+        this.element.addEventListener('mouseenter', function (e) {
+            my.fireEvent('mouseenter', e);
+            my.wavesurfer.fireEvent('region-mouseenter', my, e);
+        });
+
+        this.element.addEventListener('mouseleave', function (e) {
+            my.fireEvent('mouseleave', e);
+            my.wavesurfer.fireEvent('region-mouseleave', my, e);
+        });
+
+        this.element.addEventListener('click', function (e) {
+            e.preventDefault();
+            my.fireEvent('click', e);
+            my.wavesurfer.fireEvent('region-click', my, e);
+        });
+
+        this.element.addEventListener('dblclick', function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            my.fireEvent('dblclick', e);
+            my.wavesurfer.fireEvent('region-dblclick', my, e);
+        });
+
+        /* Drag or resize on mousemove. */
+        (this.drag || this.resize) && (function () {
+            var duration = my.wavesurfer.getDuration();
+            var drag;
+            var resize;
+            var startTime;
+
+            var onDown = function (e) {
+                e.stopPropagation();
+                startTime = my.wavesurfer.drawer.handleEvent(e) * duration;
+
+                if (e.target.tagName.toLowerCase() == 'handle') {
+                    if (e.target.classList.contains('wavesurfer-handle-start')) {
+                        resize = 'start';
+                    } else {
+                        resize = 'end';
+                    }
+                } else {
+                    drag = true;
+                }
+            };
+            var onUp = function (e) {
+                if (drag || resize) {
+                    drag = false;
+                    resize = false;
+                    e.stopPropagation();
+                    e.preventDefault();
+
+                    my.fireEvent('update-end');
+                    my.wavesurfer.fireEvent('region-update-end');
+                }
+            };
+            var onMove = function (e) {
+                if (drag || resize) {
+                    var time = my.wavesurfer.drawer.handleEvent(e) * duration;
+                    var delta = time - startTime;
+                    startTime = time;
+
+                    // Drag
+                    if (my.drag && drag) {
+                        my.onDrag(delta);
+                    }
+
+                    // Resize
+                    if (my.resize && resize) {
+                        my.onResize(delta, resize);
+                    }
+                }
+            };
+
+            my.element.addEventListener('mousedown', onDown);
+            my.wrapper.addEventListener('mousemove', onMove);
+            document.body.addEventListener('mouseup', onUp);
+
+            my.on('remove', function () {
+                document.body.removeEventListener('mouseup', onUp);
+                my.wrapper.removeEventListener('mousemove', onMove);
+            });
+
+            my.wavesurfer.on('destroy', function () {
+                document.body.removeEventListener('mouseup', onUp);
+            });
+        }());
+    },
+
+    onDrag: function (delta) {
+        this.update({
+            start: this.start + delta,
+            end: this.end + delta
+        });
+    },
+
+    onResize: function (delta, direction) {
+        if (direction == 'start') {
+            this.update({
+                start: Math.min(this.start + delta, this.end),
+                end: Math.max(this.start + delta, this.end)
+            });
+        } else {
+            this.update({
+                start: Math.min(this.end + delta, this.start),
+                end: Math.max(this.end + delta, this.start)
+            });
+        }
+    }
+};
+
+WaveSurfer.util.extend(WaveSurfer.Region, WaveSurfer.Observer);
+
+
+/* Augment WaveSurfer with region methods. */
+WaveSurfer.initRegions = function () {
+    if (!this.regions) {
+        this.regions = Object.create(WaveSurfer.Regions);
+        this.regions.init(this);
+    }
+};
+
+WaveSurfer.addRegion = function (options) {
+    this.initRegions();
+    return this.regions.add(options);
+};
+
+WaveSurfer.clearRegions = function () {
+    this.regions && this.regions.clear();
+};
+
+WaveSurfer.enableDragSelection = function (options) {
+    this.initRegions();
+    this.regions.enableDragSelection(options);
+};

data/vendor/assets/javascripts/plugin/wavesurfer.spectrogram.js

@@ -0,0 +1,210 @@
+'use strict';
+
+WaveSurfer.Spectrogram = {
+    init: function (params) {
+        this.params = params;
+        var wavesurfer = this.wavesurfer = params.wavesurfer;
+
+        if (!this.wavesurfer) {
+            throw Error('No WaveSurfer intance 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('redraw', this.render.bind(this));
+    },
+
+    createWrapper: function () {
+        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);