wavesurfer 0.0.1

data/vendor/assets/javascripts/src/mediaelement.js

@@ -0,0 +1,160 @@
+'use strict';
+
+WaveSurfer.MediaElement = Object.create(WaveSurfer.WebAudio);
+
+WaveSurfer.util.extend(WaveSurfer.MediaElement, {
+    init: function (params) {
+        this.params = params;
+
+        // Dummy media to catch errors
+        this.media = {
+            currentTime: 0,
+            duration: 0,
+            paused: true,
+            playbackRate: 1,
+            play: function () {},
+            pause: function () {}
+        };
+
+        this.mediaType = params.mediaType.toLowerCase();
+        this.elementPosition = params.elementPosition;
+    },
+
+    load: function (url, container, peaks) {
+        var my = this;
+
+        var media = document.createElement(this.mediaType);
+        media.controls = false;
+        media.autoplay = false;
+        media.preload = 'auto';
+        media.src = url;
+
+        media.addEventListener('error', function () {
+            my.fireEvent('error', 'Error loading media element');
+        });
+
+        media.addEventListener('canplay', function () {
+            my.fireEvent('canplay');
+        });
+
+        media.addEventListener('ended', function () {
+            my.fireEvent('finish');
+        });
+
+        media.addEventListener('timeupdate', function () {
+            my.fireEvent('audioprocess', my.getCurrentTime());
+        });
+
+        var prevMedia = container.querySelector(this.mediaType);
+        if (prevMedia) {
+            container.removeChild(prevMedia);
+        }
+        container.appendChild(media);
+
+        this.media = media;
+        this.peaks = peaks;
+        this.onPlayEnd = null;
+        this.buffer = null;
+        this.setPlaybackRate(this.playbackRate);
+    },
+
+    isPaused: function () {
+        return this.media.paused;
+    },
+
+    getDuration: function () {
+        var duration = this.media.duration;
+        if (duration >= Infinity) { // streaming audio
+            duration = this.media.seekable.end();
+        }
+        return duration;
+    },
+
+    getCurrentTime: function () {
+        return this.media.currentTime;
+    },
+
+    getPlayedPercents: function () {
+        return (this.getCurrentTime() / this.getDuration()) || 0;
+    },
+
+    /**
+     * Set the audio source playback rate.
+     */
+    setPlaybackRate: function (value) {
+        this.playbackRate = value || 1;
+        this.media.playbackRate = this.playbackRate;
+    },
+
+    seekTo: function (start) {
+        if (start != null) {
+            this.media.currentTime = start;
+        }
+        this.clearPlayEnd();
+    },
+
+    /**
+     * Plays the loaded audio region.
+     *
+     * @param {Number} start Start offset in seconds,
+     * relative to the beginning of a clip.
+     * @param {Number} end End offset in seconds,
+     * relative to the beginning of a clip.
+     */
+    play: function (start, end) {
+        this.seekTo(start);
+        this.media.play();
+        end && this.setPlayEnd(end);
+    },
+
+    /**
+     * Pauses the loaded audio.
+     */
+    pause: function () {
+        this.media.pause();
+        this.clearPlayEnd();
+    },
+
+    setPlayEnd: function (end) {
+        var my = this;
+        this.onPlayEnd = function (time) {
+            if (time >= end) {
+                my.pause();
+                my.seekTo(end);
+            }
+        };
+        this.on('audioprocess', this.onPlayEnd);
+    },
+
+    clearPlayEnd: function () {
+        if (this.onPlayEnd) {
+            this.un('audioprocess', this.onPlayEnd);
+            this.onPlayEnd = null;
+        }
+    },
+
+    getPeaks: function (length) {
+        if (this.buffer) {
+            return WaveSurfer.WebAudio.getPeaks.call(this, length);
+        }
+        return this.peaks || [];
+    },
+
+    getVolume: function () {
+        return this.media.volume;
+    },
+
+    setVolume: function (val) {
+        this.media.volume = val;
+    },
+
+    destroy: function () {
+        this.pause();
+        this.unAll();
+        this.media.parentNode && this.media.parentNode.removeChild(this.media);
+        this.media = null;
+    }
+});
+
+//For backwards compatibility
+WaveSurfer.AudioElement = WaveSurfer.MediaElement;

data/vendor/assets/javascripts/src/util.js

@@ -0,0 +1,132 @@
+/* Common utilities */
+WaveSurfer.util = {
+    extend: function (dest) {
+        var sources = Array.prototype.slice.call(arguments, 1);
+        sources.forEach(function (source) {
+            Object.keys(source).forEach(function (key) {
+                dest[key] = source[key];
+            });
+        });
+        return dest;
+    },
+
+    getId: function () {
+        return 'wavesurfer_' + Math.random().toString(32).substring(2);
+    },
+
+    ajax: function (options) {
+        var ajax = Object.create(WaveSurfer.Observer);
+        var xhr = new XMLHttpRequest();
+        var fired100 = false;
+
+        xhr.open(options.method || 'GET', options.url, true);
+        xhr.responseType = options.responseType || 'json';
+
+        xhr.addEventListener('progress', function (e) {
+            ajax.fireEvent('progress', e);
+            if (e.lengthComputable && e.loaded == e.total) {
+                fired100 = true;
+            }
+        });
+
+        xhr.addEventListener('load', function (e) {
+            if (!fired100) {
+                ajax.fireEvent('progress', e);
+            }
+            ajax.fireEvent('load', e);
+
+            if (200 == xhr.status || 206 == xhr.status) {
+                ajax.fireEvent('success', xhr.response, e);
+            } else {
+                ajax.fireEvent('error', e);
+            }
+        });
+
+        xhr.addEventListener('error', function (e) {
+            ajax.fireEvent('error', e);
+        });
+
+        xhr.send();
+        ajax.xhr = xhr;
+        return ajax;
+    }
+};
+
+
+/* Observer */
+WaveSurfer.Observer = {
+    /**
+     * Attach a handler function for an event.
+     */
+    on: function (event, fn) {
+        if (!this.handlers) { this.handlers = {}; }
+
+        var handlers = this.handlers[event];
+        if (!handlers) {
+            handlers = this.handlers[event] = [];
+        }
+        handlers.push(fn);
+
+        // Return an event descriptor
+        return {
+            name: event,
+            callback: fn,
+            un: this.un.bind(this, event, fn)
+        };
+    },
+
+    /**
+     * Remove an event handler.
+     */
+    un: function (event, fn) {
+        if (!this.handlers) { return; }
+
+        var handlers = this.handlers[event];
+        if (handlers) {
+            if (fn) {
+                for (var i = handlers.length - 1; i >= 0; i--) {
+                    if (handlers[i] == fn) {
+                        handlers.splice(i, 1);
+                    }
+                }
+            } else {
+                handlers.length = 0;
+            }
+        }
+    },
+
+    /**
+     * Remove all event handlers.
+     */
+    unAll: function () {
+        this.handlers = null;
+    },
+
+    /**
+     * Attach a handler to an event. The handler is executed at most once per
+     * event type.
+     */
+    once: function (event, handler) {
+        var my = this;
+        var fn = function () {
+            handler.apply(this, arguments);
+            setTimeout(function () {
+                my.un(event, fn);
+            }, 0);
+        };
+        return this.on(event, fn);
+    },
+
+    fireEvent: function (event) {
+        if (!this.handlers) { return; }
+        var handlers = this.handlers[event];
+        var args = Array.prototype.slice.call(arguments, 1);
+        handlers && handlers.forEach(function (fn) {
+            fn.apply(null, args);
+        });
+    }
+};
+
+
+/* Make the main WaveSurfer object an observer */
+WaveSurfer.util.extend(WaveSurfer, WaveSurfer.Observer);

data/vendor/assets/javascripts/src/wavesurfer.js

@@ -0,0 +1,440 @@
+/**
+ * wavesurfer.js
+ *
+ * https://github.com/katspaugh/wavesurfer.js
+ *
+ * This work is licensed under a Creative Commons Attribution 3.0 Unported License.
+ */
+
+'use strict';
+
+var WaveSurfer = {
+    defaultParams: {
+        height        : 128,
+        waveColor     : '#999',
+        progressColor : '#555',
+        cursorColor   : '#333',
+        cursorWidth   : 1,
+        skipLength    : 2,
+        minPxPerSec   : 20,
+        pixelRatio    : window.devicePixelRatio,
+        fillParent    : true,
+        scrollParent  : false,
+        hideScrollbar : false,
+        normalize     : false,
+        audioContext  : null,
+        container     : null,
+        dragSelection : true,
+        loopSelection : true,
+        audioRate     : 1,
+        interact      : true,
+        splitChannels : false,
+        renderer      : 'Canvas',
+        backend       : 'WebAudio',
+        mediaType     : 'audio'
+    },
+
+    init: function (params) {
+        // Extract relevant parameters (or defaults)
+        this.params = WaveSurfer.util.extend({}, this.defaultParams, params);
+
+        this.container = 'string' == typeof params.container ?
+            document.querySelector(this.params.container) :
+            this.params.container;
+
+        if (!this.container) {
+            throw new Error('Container element not found');
+        }
+
+        if (typeof this.params.mediaContainer == 'undefined') {
+            this.mediaContainer = this.container;
+        } else if (typeof this.params.mediaContainer == 'string') {
+            this.mediaContainer = document.querySelector(this.params.mediaContainer);
+        } else {
+            this.mediaContainer = this.params.mediaContainer;
+        }
+
+        if (!this.mediaContainer) {
+            throw new Error('Media Container element not found');
+        }
+
+        // Used to save the current volume when muting so we can
+        // restore once unmuted
+        this.savedVolume = 0;
+        // The current muted state
+        this.isMuted = false;
+        // Will hold a list of event descriptors that need to be
+        // cancelled on subsequent loads of audio
+        this.tmpEvents = [];
+
+        this.createDrawer();
+        this.createBackend();
+    },
+
+    createDrawer: function () {
+        var my = this;
+
+        this.drawer = Object.create(WaveSurfer.Drawer[this.params.renderer]);
+        this.drawer.init(this.container, this.params);
+
+        this.drawer.on('redraw', function () {
+            my.drawBuffer();
+            my.drawer.progress(my.backend.getPlayedPercents());
+        });
+
+        // Click-to-seek
+        this.drawer.on('click', function (e, progress) {
+            setTimeout(function () {
+                my.seekTo(progress);
+            }, 0);
+        });
+
+        // Relay the scroll event from the drawer
+        this.drawer.on('scroll', function (e) {
+            my.fireEvent('scroll', e);
+        });
+    },
+
+    createBackend: function () {
+        var my = this;
+
+        if (this.backend) {
+            this.backend.destroy();
+        }
+
+        // Back compat
+        if (this.params.backend == 'AudioElement') {
+            this.params.backend = 'MediaElement';
+        }
+
+        if (this.params.backend == 'WebAudio' && !WaveSurfer.WebAudio.supportsWebAudio()) {
+            this.params.backend = 'MediaElement';
+        }
+
+        this.backend = Object.create(WaveSurfer[this.params.backend]);
+        this.backend.init(this.params);
+
+        this.backend.on('finish', function () {
+            my.fireEvent('finish');
+        });
+
+        this.backend.on('audioprocess', function (time) {
+            my.drawer.progress(my.backend.getPlayedPercents());
+            my.fireEvent('audioprocess', time);
+        });
+    },
+
+    getDuration: function () {
+        return this.backend.getDuration();
+    },
+
+    getCurrentTime: function () {
+        return this.backend.getCurrentTime();
+    },
+
+    play: function (start, end) {
+        this.backend.play(start, end);
+        this.fireEvent('play');
+    },
+
+    pause: function () {
+        this.backend.pause();
+        this.fireEvent('pause');
+    },
+
+    playPause: function () {
+        this.backend.isPaused() ? this.play() : this.pause();
+    },
+
+    skipBackward: function (seconds) {
+        this.skip(-seconds || -this.params.skipLength);
+    },
+
+    skipForward: function (seconds) {
+        this.skip(seconds || this.params.skipLength);
+    },
+
+    skip: function (offset) {
+        var position = this.getCurrentTime() || 0;
+        var duration = this.getDuration() || 1;
+        position = Math.max(0, Math.min(duration, position + (offset || 0)));
+        this.seekAndCenter(position / duration);
+    },
+
+    seekAndCenter: function (progress) {
+        this.seekTo(progress);
+        this.drawer.recenter(progress);
+    },
+
+    seekTo: function (progress) {
+        var paused = this.backend.isPaused();
+        // avoid small scrolls while paused seeking
+        var oldScrollParent = this.params.scrollParent;
+        if (paused) {
+            this.params.scrollParent = false;
+        }
+        this.backend.seekTo(progress * this.getDuration());
+        this.drawer.progress(this.backend.getPlayedPercents());
+
+        if (!paused) {
+            this.backend.pause();
+            this.backend.play();
+        }
+        this.params.scrollParent = oldScrollParent;
+        this.fireEvent('seek', progress);
+    },
+
+    stop: function () {
+        this.pause();
+        this.seekTo(0);
+        this.drawer.progress(0);
+    },
+
+    /**
+     * Set the playback volume.
+     *
+     * @param {Number} newVolume A value between 0 and 1, 0 being no
+     * volume and 1 being full volume.
+     */
+    setVolume: function (newVolume) {
+        this.backend.setVolume(newVolume);
+    },
+
+    /**
+     * Set the playback rate.
+     *
+     * @param {Number} rate A positive number. E.g. 0.5 means half the
+     * normal speed, 2 means double speed and so on.
+     */
+    setPlaybackRate: function (rate) {
+        this.backend.setPlaybackRate(rate);
+    },
+
+    /**
+     * Toggle the volume on and off. It not currenly muted it will
+     * save the current volume value and turn the volume off.
+     * If currently muted then it will restore the volume to the saved
+     * value, and then rest the saved value.
+     */
+    toggleMute: function () {
+        if (this.isMuted) {
+            // If currently muted then restore to the saved volume
+            // and update the mute properties
+            this.backend.setVolume(this.savedVolume);
+            this.isMuted = false;
+        } else {
+            // If currently not muted then save current volume,
+            // turn off the volume and update the mute properties
+            this.savedVolume = this.backend.getVolume();
+            this.backend.setVolume(0);
+            this.isMuted = true;
+        }
+    },
+
+    toggleScroll: function () {
+        this.params.scrollParent = !this.params.scrollParent;
+        this.drawBuffer();
+    },
+
+    toggleInteraction: function () {
+        this.params.interact = !this.params.interact;
+    },
+
+    drawBuffer: function () {
+        var nominalWidth = Math.round(
+            this.getDuration() * this.params.minPxPerSec * this.params.pixelRatio
+        );
+        var parentWidth = this.drawer.getWidth();
+        var width = nominalWidth;
+
+        // Fill container
+        if (this.params.fillParent && (!this.params.scrollParent || nominalWidth < parentWidth)) {
+            width = parentWidth;
+        }
+
+        var peaks = this.backend.getPeaks(width);
+        this.drawer.drawPeaks(peaks, width);
+        this.fireEvent('redraw', peaks, width);
+    },
+
+    /**
+     * Internal method.
+     */
+    loadArrayBuffer: function (arraybuffer) {
+        this.decodeArrayBuffer(arraybuffer, function (data) {
+            this.loadDecodedBuffer(data);
+        }.bind(this));
+    },
+
+    /**
+     * Directly load an externally decoded AudioBuffer.
+     */
+    loadDecodedBuffer: function (buffer) {
+        this.backend.load(buffer);
+        this.drawBuffer();
+        this.fireEvent('ready');
+    },
+
+    /**
+     * Loads audio data from a Blob or File object.
+     *
+     * @param {Blob|File} blob Audio data.
+     */
+    loadBlob: function (blob) {
+        var my = this;
+        // Create file reader
+        var reader = new FileReader();
+        reader.addEventListener('progress', function (e) {
+            my.onProgress(e);
+        });
+        reader.addEventListener('load', function (e) {
+            my.loadArrayBuffer(e.target.result);
+        });
+        reader.addEventListener('error', function () {
+            my.fireEvent('error', 'Error reading file');
+        });
+        reader.readAsArrayBuffer(blob);
+        this.empty();
+    },
+
+    /**
+     * Loads audio and rerenders the waveform.
+     */
+    load: function (url, peaks) {
+        switch (this.params.backend) {
+            case 'WebAudio': return this.loadBuffer(url);
+            case 'MediaElement': return this.loadMediaElement(url, peaks);
+        }
+    },
+
+    /**
+     * Loads audio using Web Audio buffer backend.
+     */
+    loadBuffer: function (url) {
+        this.empty();
+        // load via XHR and render all at once
+        return this.getArrayBuffer(url, this.loadArrayBuffer.bind(this));
+    },
+
+    loadMediaElement: function (url, peaks) {
+        this.empty();
+        this.backend.load(url, this.mediaContainer, peaks);
+
+        this.tmpEvents.push(
+            this.backend.once('canplay', (function () {
+                this.drawBuffer();
+                this.fireEvent('ready');
+            }).bind(this)),
+
+            this.backend.once('error', (function (err) {
+                this.fireEvent('error', err);
+            }).bind(this))
+        );
+
+
+        // If no pre-decoded peaks provided, attempt to download the
+        // audio file and decode it with Web Audio.
+        if (!peaks && this.backend.supportsWebAudio()) {
+            this.getArrayBuffer(url, (function (arraybuffer) {
+                this.decodeArrayBuffer(arraybuffer, (function (buffer) {
+                    this.backend.buffer = buffer;
+                    this.drawBuffer();
+                }).bind(this));
+            }).bind(this));
+        }
+    },
+
+    decodeArrayBuffer: function (arraybuffer, callback) {
+        this.backend.decodeArrayBuffer(
+            arraybuffer,
+            this.fireEvent.bind(this, 'decoded'),
+            this.fireEvent.bind(this, 'error', 'Error decoding audiobuffer')
+        );
+        this.tmpEvents.push(
+            this.once('decoded', callback)
+        );
+    },
+
+    getArrayBuffer: function (url, callback) {
+        var my = this;
+        var ajax = WaveSurfer.util.ajax({
+            url: url,
+            responseType: 'arraybuffer'
+        });
+        this.tmpEvents.push(
+            ajax.on('progress', function (e) {
+                my.onProgress(e);
+            }),
+            ajax.on('success', callback),
+            ajax.on('error', function (e) {
+                my.fireEvent('error', 'XHR error: ' + e.target.statusText);
+            })
+        );
+        return ajax;
+    },
+
+    onProgress: function (e) {
+        if (e.lengthComputable) {
+            var percentComplete = e.loaded / e.total;
+        } else {
+            // Approximate progress with an asymptotic
+            // function, and assume downloads in the 1-3 MB range.
+            percentComplete = e.loaded / (e.loaded + 1000000);
+        }
+        this.fireEvent('loading', Math.round(percentComplete * 100), e.target);
+    },
+
+    /**
+     * Exports PCM data into a JSON array and opens in a new window.
+     */
+    exportPCM: function (length, accuracy, noWindow) {
+        length = length || 1024;
+        accuracy = accuracy || 10000;
+        noWindow = noWindow || false;
+        var peaks = this.backend.getPeaks(length, accuracy);
+        var arr = [].map.call(peaks, function (val) {
+            return Math.round(val * accuracy) / accuracy;
+        });
+        var json = JSON.stringify(arr);
+        if (!noWindow) {
+            window.open('data:application/json;charset=utf-8,' +
+                encodeURIComponent(json));
+        }
+        return json;
+    },
+
+    clearTmpEvents: function () {
+        this.tmpEvents.forEach(function (e) { e.un(); });
+    },
+
+    /**
+     * Display empty waveform.
+     */
+    empty: function () {
+        if (!this.backend.isPaused()) {
+            this.stop();
+            this.backend.disconnectSource();
+        }
+        this.clearTmpEvents();
+        this.drawer.progress(0);
+        this.drawer.setWidth(0);
+        this.drawer.drawPeaks({ length: this.drawer.getWidth() }, 0);
+    },
+
+    /**
+     * Remove events, elements and disconnect WebAudio nodes.
+     */
+    destroy: function () {
+        this.fireEvent('destroy');
+        this.clearTmpEvents();
+        this.unAll();
+        this.backend.destroy();
+        this.drawer.destroy();
+    }
+};
+
+WaveSurfer.create = function (params) {
+    var wavesurfer = Object.create(WaveSurfer);
+    wavesurfer.init(params);
+    return wavesurfer;
+};