wavesurfer-rails 0.1.2 → 0.1.11

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

@@ -1,223 +0,0 @@
-'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

@@ -1,196 +0,0 @@
-(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;
-}));