wavesurfer 0.0.1

data/vendor/assets/javascripts/plugin/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.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;
+}));

data/vendor/assets/javascripts/src/drawer.canvas.js

@@ -0,0 +1,134 @@
+'use strict';
+
+WaveSurfer.Drawer.Canvas = Object.create(WaveSurfer.Drawer);
+
+WaveSurfer.util.extend(WaveSurfer.Drawer.Canvas, {
+    createElements: function () {
+        var waveCanvas = this.wrapper.appendChild(
+            this.style(document.createElement('canvas'), {
+                position: 'absolute',
+                zIndex: 1,
+                top: 0,
+                bottom: 0
+            })
+        );
+        this.waveCc = waveCanvas.getContext('2d');
+
+        this.progressWave = this.wrapper.appendChild(
+            this.style(document.createElement('wave'), {
+                position: 'absolute',
+                zIndex: 2,
+                top: 0,
+                bottom: 0,
+                overflow: 'hidden',
+                width: '0',
+                display: 'none',
+                boxSizing: 'border-box',
+                borderRightStyle: 'solid',
+                borderRightWidth: this.params.cursorWidth + 'px',
+                borderRightColor: this.params.cursorColor
+            })
+        );
+
+        if (this.params.waveColor != this.params.progressColor) {
+            var progressCanvas = this.progressWave.appendChild(
+                document.createElement('canvas')
+            );
+            this.progressCc = progressCanvas.getContext('2d');
+        }
+    },
+
+    updateSize: function () {
+        var width = Math.round(this.width / this.params.pixelRatio);
+
+        this.waveCc.canvas.width = this.width;
+        this.waveCc.canvas.height = this.height;
+        this.style(this.waveCc.canvas, { width: width + 'px'});
+
+        this.style(this.progressWave, { display: 'block'});
+
+        if (this.progressCc) {
+            this.progressCc.canvas.width = this.width;
+            this.progressCc.canvas.height = this.height;
+            this.style(this.progressCc.canvas, { width: width + 'px'});
+        }
+
+        this.clearWave();
+    },
+
+    clearWave: function () {
+        this.waveCc.clearRect(0, 0, this.width, this.height);
+        if (this.progressCc) {
+            this.progressCc.clearRect(0, 0, this.width, this.height);
+        }
+    },
+
+    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;
+        // 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;
+        var scale = 1;
+        if (this.params.fillParent && this.width != length) {
+            scale = this.width / length;
+        }
+        var max = 1;
+        if (this.params.normalize) {
+            max = Math.max.apply(Math, peaks);
+        }
+
+        this.waveCc.fillStyle = this.params.waveColor;
+        if (this.progressCc) {
+            this.progressCc.fillStyle = this.params.progressColor;
+        }
+
+        [ this.waveCc, this.progressCc ].forEach(function (cc) {
+            if (!cc) { return; }
+
+            cc.beginPath();
+            cc.moveTo($, halfH + offsetY);
+
+            for (var i = 0; i < length; i++) {
+                var h = Math.round(peaks[i] / max * halfH);
+                cc.lineTo(i * scale + $, halfH + h + offsetY);
+            }
+
+            cc.lineTo(this.width + $, halfH + offsetY);
+            cc.moveTo($, halfH + offsetY);
+
+            for (var i = 0; i < length; i++) {
+                var h = Math.round(peaks[i] / max * halfH);
+                cc.lineTo(i * scale + $, halfH - h + offsetY);
+            }
+
+            cc.lineTo(this.width + $, halfH + offsetY);
+            cc.closePath();
+            cc.fill();
+
+            // Always draw a median line
+            cc.fillRect(0, halfH + offsetY - $, this.width, $);
+        }, this);
+    },
+
+    updateProgress: function (progress) {
+        var pos = Math.round(
+            this.width * progress
+        ) / this.params.pixelRatio;
+        this.style(this.progressWave, { width: pos + 'px' });
+    }
+});

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

@@ -0,0 +1,193 @@
+'use strict';
+
+WaveSurfer.Drawer = {
+    init: function (container, params) {
+        this.container = container;
+        this.params = params;
+
+        this.width = 0;
+        this.height = params.height * this.params.pixelRatio;
+
+        this.lastPos = 0;
+
+        this.createWrapper();
+        this.createElements();
+    },
+
+    createWrapper: function () {
+        this.wrapper = this.container.appendChild(
+            document.createElement('wave')
+        );
+
+        this.style(this.wrapper, {
+            display: 'block',
+            position: 'relative',
+            userSelect: 'none',
+            webkitUserSelect: 'none',
+            height: this.params.height + 'px'
+        });
+
+        if (this.params.fillParent || this.params.scrollParent) {
+            this.style(this.wrapper, {
+                width: '100%',
+                overflowX: this.params.hideScrollbar ? 'hidden' : 'auto',
+                overflowY: 'hidden'
+            });
+        }
+
+        this.setupWrapperEvents();
+    },
+
+    handleEvent: function (e) {
+        e.preventDefault();
+        var bbox = this.wrapper.getBoundingClientRect();
+        return ((e.clientX - bbox.left + this.wrapper.scrollLeft) / this.wrapper.scrollWidth) || 0;
+    },
+
+    setupWrapperEvents: function () {
+        var my = this;
+
+        this.wrapper.addEventListener('click', function (e) {
+            var scrollbarHeight = my.wrapper.offsetHeight - my.wrapper.clientHeight;
+            if (scrollbarHeight != 0) {
+                // scrollbar is visible.  Check if click was on it
+                var bbox = my.wrapper.getBoundingClientRect();
+                if (e.clientY >= bbox.bottom - scrollbarHeight) {
+                    // ignore mousedown as it was on the scrollbar
+                    return;
+                }
+            }
+
+            if (my.params.interact) {
+                my.fireEvent('click', e, my.handleEvent(e));
+            }
+        });
+
+        this.wrapper.addEventListener('scroll', function (e) {
+            my.fireEvent('scroll', e);
+        });
+    },
+
+    drawPeaks: function (peaks, length) {
+        this.resetScroll();
+        this.setWidth(length);
+        this.drawWave(peaks);
+    },
+
+    style: function (el, styles) {
+        Object.keys(styles).forEach(function (prop) {
+            if (el.style[prop] !== styles[prop]) {
+                el.style[prop] = styles[prop];
+            }
+        });
+        return el;
+    },
+
+    resetScroll: function () {
+        if (this.wrapper !== null) {
+            this.wrapper.scrollLeft = 0;
+        }
+    },
+
+    recenter: function (percent) {
+        var position = this.wrapper.scrollWidth * percent;
+        this.recenterOnPosition(position, true);
+    },
+
+    recenterOnPosition: function (position, immediate) {
+        var scrollLeft = this.wrapper.scrollLeft;
+        var half = ~~(this.wrapper.clientWidth / 2);
+        var target = position - half;
+        var offset = target - scrollLeft;
+        var maxScroll = this.wrapper.scrollWidth - this.wrapper.clientWidth;
+
+        if (maxScroll == 0) {
+            // no need to continue if scrollbar is not there
+            return;
+        }
+
+        // if the cursor is currently visible...
+        if (!immediate && -half <= offset && offset < half) {
+            // we'll limit the "re-center" rate.
+            var rate = 5;
+            offset = Math.max(-rate, Math.min(rate, offset));
+            target = scrollLeft + offset;
+        }
+
+        // limit target to valid range (0 to maxScroll)
+        target = Math.max(0, Math.min(maxScroll, target));
+        // no use attempting to scroll if we're not moving
+        if (target != scrollLeft) {
+            this.wrapper.scrollLeft = target;
+        }
+
+    },
+
+    getWidth: function () {
+        return Math.round(this.container.clientWidth * this.params.pixelRatio);
+    },
+
+    setWidth: function (width) {
+        if (width == this.width) { return; }
+
+        this.width = width;
+
+        if (this.params.fillParent || this.params.scrollParent) {
+            this.style(this.wrapper, {
+                width: ''
+            });
+        } else {
+            this.style(this.wrapper, {
+                width: ~~(this.width / this.params.pixelRatio) + 'px'
+            });
+        }
+
+        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) {
+        var minPxDelta = 1 / this.params.pixelRatio;
+        var pos = Math.round(progress * this.width) * minPxDelta;
+
+        if (pos < this.lastPos || pos - this.lastPos >= minPxDelta) {
+            this.lastPos = pos;
+
+            if (this.params.scrollParent) {
+                var newPos = ~~(this.wrapper.scrollWidth * progress);
+                this.recenterOnPosition(newPos);
+            }
+
+            this.updateProgress(progress);
+        }
+    },
+
+    destroy: function () {
+        this.unAll();
+        if (this.wrapper) {
+            this.container.removeChild(this.wrapper);
+            this.wrapper = null;
+        }
+    },
+
+    /* Renderer-specific methods */
+    createElements: function () {},
+
+    updateSize: function () {},
+
+    drawWave: function (peaks, max) {},
+
+    clearWave: function () {},
+
+    updateProgress: function (position) {}
+};
+
+WaveSurfer.util.extend(WaveSurfer.Drawer, WaveSurfer.Observer);