wavesurfer 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 681097b7ed76d7f145a5057975cbb28290a6c514
+  data.tar.gz: 6eae3e0b07cd65f61b0cb819b745e9a11ce25133
+SHA512:
+  metadata.gz: 076cf51b74820f0880cc2b1338a42b424ccbf4d874d59b8cac15ac465744e44f2b8e108cab494a51fbe361817333920cea7e27b94d04c1fa7b3fe38d359ba541
+  data.tar.gz: 9dbb1ad884e6e81a92d5369ea3a1b0c4a6a862b7180608fe01531c1bef1f1cebeabaee6f2ea4c5a17e7b0a61be791e810af7f24d5fd893f2206055d4ab276a43

data/lib/wavesurfer.rb

@@ -0,0 +1,6 @@
+require 'wavesurfer/version'
+
+module Wavesurfer
+  class Engine < Rails::Engine
+  end  
+end

data/lib/wavesurfer/version.rb

@@ -0,0 +1,3 @@
+module Wavesurfer
+  VERSION = "0.0.1"
+end

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

@@ -0,0 +1,252 @@
+'use strict';
+
+WaveSurfer.ELAN = {
+    Types: {
+        ALIGNABLE_ANNOTATION: 'ALIGNABLE_ANNOTATION',
+        REF_ANNOTATION: 'REF_ANNOTATION'
+    },
+
+    init: function (params) {
+        this.data = null;
+        this.params = params;
+        this.container = 'string' == typeof params.container ?
+            document.querySelector(params.container) : params.container;
+
+        if (!this.container) {
+            throw Error('No container for ELAN');
+        }
+
+        this.bindClick();
+
+        if (params.url) {
+            this.load(params.url);
+        }
+    },
+
+    load: function (url) {
+        var my = this;
+        this.loadXML(url, function (xml) {
+            my.data = my.parseElan(xml);
+            my.render();
+            my.fireEvent('ready', my.data);
+        });
+    },
+
+    loadXML: function (url, callback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', url, true);
+        xhr.responseType = 'document';
+        xhr.send();
+        xhr.addEventListener('load', function (e) {
+            callback && callback(e.target.responseXML);
+        });
+    },
+
+    parseElan: function (xml) {
+        var _forEach = Array.prototype.forEach;
+        var _map = Array.prototype.map;
+
+        var data = {
+            media: {},
+            timeOrder: {},
+            tiers: [],
+            annotations: {},
+            alignableAnnotations: []
+        };
+
+        var header = xml.querySelector('HEADER');
+        var inMilliseconds = header.getAttribute('TIME_UNITS') == 'milliseconds';
+        var media = header.querySelector('MEDIA_DESCRIPTOR');
+        data.media.url = media.getAttribute('MEDIA_URL');
+        data.media.type = media.getAttribute('MIME_TYPE');
+
+        var timeSlots = xml.querySelectorAll('TIME_ORDER TIME_SLOT');
+        var timeOrder = {};
+        _forEach.call(timeSlots, function (slot) {
+            var value = parseFloat(slot.getAttribute('TIME_VALUE'));
+            // If in milliseconds, convert to seconds with rounding
+            if (inMilliseconds) {
+                value = Math.round(value * 1e2) / 1e5;
+            }
+            timeOrder[slot.getAttribute('TIME_SLOT_ID')] = value;
+        });
+
+        data.tiers = _map.call(xml.querySelectorAll('TIER'), function (tier) {
+            return {
+                id: tier.getAttribute('TIER_ID'),
+                linguisticTypeRef: tier.getAttribute('LINGUISTIC_TYPE_REF'),
+                defaultLocale: tier.getAttribute('DEFAULT_LOCALE'),
+                annotations: _map.call(
+                    tier.querySelectorAll('REF_ANNOTATION, ALIGNABLE_ANNOTATION'),
+                    function (node) {
+                        var annot = {
+                            type: node.nodeName,
+                            id: node.getAttribute('ANNOTATION_ID'),
+                            ref: node.getAttribute('ANNOTATION_REF'),
+                            value: node.querySelector('ANNOTATION_VALUE')
+                                .textContent.trim()
+                        };
+
+                        if (this.Types.ALIGNABLE_ANNOTATION == annot.type) {
+                            // Add start & end to alignable annotation
+                            annot.start = timeOrder[node.getAttribute('TIME_SLOT_REF1')];
+                            annot.end = timeOrder[node.getAttribute('TIME_SLOT_REF2')];
+
+                            // Add to the list of alignable annotations
+                            data.alignableAnnotations.push(annot);
+                        }
+
+                        // Additionally, put into the flat map of all annotations
+                        data.annotations[annot.id] = annot;
+
+                        return annot;
+                    }, this
+                )
+            };
+        }, this);
+
+        // Create JavaScript references between annotations
+        data.tiers.forEach(function (tier) {
+            tier.annotations.forEach(function (annot) {
+                if (null != annot.ref) {
+                    annot.reference = data.annotations[annot.ref];
+                }
+            }, this);
+        }, this);
+
+        // Sort alignable annotations by start & end
+        data.alignableAnnotations.sort(function (a, b) {
+            var d = a.start - b.start;
+            if (d == 0) {
+                d = b.end - a.end;
+            }
+            return d;
+        });
+
+        data.length = data.alignableAnnotations.length;
+
+        return data;
+    },
+
+    render: function () {
+        // apply tiers filter
+        var tiers = this.data.tiers;
+        if (this.params.tiers) {
+            tiers = tiers.filter(function (tier) {
+                return tier.id in this.params.tiers;
+            }, this);
+        }
+
+        // denormalize references to alignable annotations
+        var backRefs = {};
+        var indeces = {};
+        tiers.forEach(function (tier, index) {
+            tier.annotations.forEach(function (annot) {
+                if (annot.reference &&
+                    annot.reference.type == this.Types.ALIGNABLE_ANNOTATION) {
+                    if (!(annot.reference.id in backRefs)) {
+                        backRefs[annot.ref] = {};
+                    }
+                    backRefs[annot.ref][index] = annot;
+                    indeces[index] = true;
+                }
+            }, this);
+        }, this);
+        indeces = Object.keys(indeces).sort();
+
+        this.renderedAlignable = this.data.alignableAnnotations.filter(
+            function (alignable) {
+                return backRefs[alignable.id];
+            }
+        );
+
+        // table
+        var table = document.createElement('table');
+        table.className = 'wavesurfer-annotations';
+
+        // head
+        var thead = document.createElement('thead');
+        var headRow = document.createElement('tr');
+        thead.appendChild(headRow);
+        table.appendChild(thead);
+        var th = document.createElement('th');
+        th.textContent = 'Time';
+        th.className = 'wavesurfer-time';
+        headRow.appendChild(th);
+        indeces.forEach(function (index) {
+            var tier = tiers[index];
+            var th = document.createElement('th');
+            th.className = 'wavesurfer-tier-' + tier.id;
+            th.textContent = tier.id;
+            th.style.width = this.params.tiers[tier.id];
+            headRow.appendChild(th);
+        }, this);
+
+        // body
+        var tbody = document.createElement('tbody');
+        table.appendChild(tbody);
+        this.renderedAlignable.forEach(function (alignable) {
+            var row = document.createElement('tr');
+            row.id = 'wavesurfer-alignable-' + alignable.id;
+            tbody.appendChild(row);
+
+            var td = document.createElement('td');
+            td.className = 'wavesurfer-time';
+            td.textContent = alignable.start.toFixed(1) + '–' +
+                alignable.end.toFixed(1);
+            row.appendChild(td);
+
+            var backRef = backRefs[alignable.id];
+            indeces.forEach(function (index) {
+                var tier = tiers[index];
+                var td = document.createElement('td');
+                var annotation = backRef[index];
+                if (annotation) {
+                    td.id = 'wavesurfer-annotation-' + annotation.id;
+                    td.dataset.ref = alignable.id;
+                    td.dataset.start = alignable.start;
+                    td.dataset.end = alignable.end;
+                    td.textContent = annotation.value;
+                }
+                td.className = 'wavesurfer-tier-' + tier.id;
+                row.appendChild(td);
+            }, this);
+        }, this);
+
+        this.container.innerHTML = '';
+        this.container.appendChild(table);
+    },
+
+    bindClick: function () {
+        var my = this;
+        this.container.addEventListener('click', function (e) {
+            var ref = e.target.dataset.ref;
+            if (null != ref) {
+                var annot = my.data.annotations[ref];
+                if (annot) {
+                    my.fireEvent('select', annot.start, annot.end);
+                }
+            }
+        });
+    },
+
+    getRenderedAnnotation: function (time) {
+        var result;
+        this.renderedAlignable.some(function (annotation) {
+            if (annotation.start <= time && annotation.end >= time) {
+                result = annotation;
+                return true;
+            }
+            return false;
+        });
+        return result;
+    },
+
+    getAnnotationNode: function (annotation) {
+        return document.getElementById(
+            'wavesurfer-alignable-' + annotation.id
+        );
+    }
+};
+
+WaveSurfer.util.extend(WaveSurfer.ELAN, WaveSurfer.Observer);

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

@@ -0,0 +1,173 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['wavesurfer'], factory);
+    } else {
+        root.WaveSurfer.Microphone = factory(root.WaveSurfer);
+    }
+}(this, function (WaveSurfer) {
+    'use strict';
+
+    WaveSurfer.Microphone = {
+        init: function (params) {
+            this.params = params;
+
+            var wavesurfer = this.wavesurfer = params.wavesurfer;
+
+            if (!this.wavesurfer) {
+                throw new Error('No WaveSurfer instance provided');
+            }
+
+            this.active = false;
+            this.paused = false;
+
+            // cross-browser getUserMedia
+            this.getUserMedia = (
+                navigator.getUserMedia ||
+                navigator.webkitGetUserMedia ||
+                navigator.mozGetUserMedia ||
+                navigator.msGetUserMedia
+            ).bind(navigator);
+
+            // The buffer size in units of sample-frames.
+            // If specified, the bufferSize must be one of the following values:
+            // 256, 512, 1024, 2048, 4096, 8192, 16384. Defaults to 4096.
+            this.bufferSize = this.params.bufferSize || 4096;
+
+            // Integer specifying the number of channels for this node's input,
+            // defaults to 1. Values of up to 32 are supported.
+            this.numberOfInputChannels = this.params.numberOfInputChannels || 1;
+
+            // Integer specifying the number of channels for this node's output,
+            // defaults to 1. Values of up to 32 are supported.
+            this.numberOfOutputChannels = this.params.numberOfOutputChannels || 1;
+
+            // wavesurfer's AudioContext where we'll route the mic signal to
+            this.micContext = this.wavesurfer.backend.getAudioContext();
+        },
+
+        /**
+         * Allow user to select audio input device, eg. microphone, and
+         * start the visualization.
+         */
+        start: function() {
+            this.getUserMedia({
+                video: false,
+                audio: true
+            },
+            this.gotStream.bind(this),
+            this.deviceError.bind(this));
+        },
+
+        /**
+         * Pause/resume visualization.
+         */
+        togglePlay: function() {
+            if (!this.active) {
+                // start it first
+                this.start();
+            } else {
+                // toggle paused
+                this.paused = !this.paused;
+
+                if (this.paused) {
+                    // disconnect sources so they can be used elsewhere
+                    // (eg. during audio playback)
+                    this.disconnect();
+                } else {
+                    // resume visualization
+                    this.connect();
+                }
+            }
+        },
+
+        /**
+         * Stop the microphone and visualization.
+         */
+        stop: function() {
+            if (this.active) {
+                this.active = false;
+
+                if (this.stream) {
+                    this.stream.stop();
+                }
+                this.disconnect();
+                this.wavesurfer.empty();
+            }
+        },
+
+        /**
+         * Connect the media sources that feed the visualization.
+         */
+        connect: function() {
+            if (this.stream !== undefined) {
+                // Create an AudioNode from the stream.
+                this.mediaStreamSource = this.micContext.createMediaStreamSource(this.stream);
+
+                this.levelChecker = this.micContext.createScriptProcessor(
+                    this.bufferSize, this.numberOfInputChannels, this.numberOfOutputChannels);
+                this.mediaStreamSource.connect(this.levelChecker);
+
+                this.levelChecker.connect(this.micContext.destination);
+                this.levelChecker.onaudioprocess = this.reloadBuffer.bind(this);
+            }
+        },
+
+        /**
+         * Disconnect the media sources that feed the visualization.
+         */
+        disconnect: function() {
+            if (this.mediaStreamSource !== undefined) {
+                this.mediaStreamSource.disconnect();
+            }
+
+            if (this.levelChecker !== undefined) {
+                this.levelChecker.disconnect();
+            }
+        },
+
+        /**
+         * Redraw the waveform.
+         */
+        reloadBuffer: function(event) {
+            if (!this.paused) {
+                this.wavesurfer.empty();
+                this.wavesurfer.loadDecodedBuffer(event.inputBuffer);
+            }
+        },
+
+        /**
+         * Audio input device is ready.
+         *
+         * @param {LocalMediaStream} stream: the microphone's media stream.
+         */
+        gotStream: function(stream) {
+            this.stream = stream;
+            this.active = true;
+
+            this.connect();
+
+            // notify listeners
+            this.fireEvent('deviceReady', stream);
+        },
+
+        /**
+         * Destroy the microphone plugin.
+         */
+        destroy: function(event) {
+            this.stop();
+        },
+
+        /**
+         * Device error callback.
+         */
+        deviceError: function(code) {
+            // notify listeners
+            this.fireEvent('deviceError', code);
+        }
+
+    };
+
+    WaveSurfer.util.extend(WaveSurfer.Microphone, WaveSurfer.Observer);
+
+    return WaveSurfer.Microphone;
+}));

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

@@ -0,0 +1,200 @@
+'use strict';
+
+/* Minimap */
+WaveSurfer.Minimap = WaveSurfer.util.extend({}, WaveSurfer.Drawer, WaveSurfer.Drawer.Canvas, {
+    init: function (wavesurfer, params) {
+        this.wavesurfer = wavesurfer;
+        this.container = this.wavesurfer.drawer.container;
+        this.lastPos = this.wavesurfer.drawer.lastPos;
+        this.params = wavesurfer.util.extend(
+            {}, this.wavesurfer.drawer.params, {
+                showRegions: false,
+                showOverview: false,
+                overviewBorderColor: 'green',
+                overviewBorderSize: 2
+            }, params, {
+                scrollParent: false,
+                fillParent: true
+            }
+        );
+
+        this.width = 0;
+        this.height = this.params.height * this.params.pixelRatio;
+
+        this.createWrapper();
+        this.createElements();
+
+        if (WaveSurfer.Regions && this.params.showRegions) {
+            this.regions();
+        }
+
+        this.bindWaveSurferEvents();
+        this.bindMinimapEvents();
+    },
+    regions: function() {
+        var my = this;
+        this.regions = {};
+
+        this.wavesurfer.on('region-created', function(region) {
+            my.regions[region.id] = region;
+            my.renderRegions();
+        });
+
+        this.wavesurfer.on('region-updated', function(region) {
+            my.regions[region.id] = region;
+            my.renderRegions();
+        });
+
+        this.wavesurfer.on('region-removed', function(region) {
+            delete my.regions[region.id];
+            my.renderRegions();
+        });
+    },
+    renderRegions: function() {
+        var my = this;
+        var regionElements = this.wrapper.querySelectorAll('region');
+        for (var i = 0; i < regionElements.length; ++i) {
+          this.wrapper.removeChild(regionElements[i]);
+        }
+
+        Object.keys(this.regions).forEach(function(id){
+            var region = my.regions[id];
+            var width = (my.width * ((region.end - region.start) / my.wavesurfer.getDuration()));
+            var left = (my.width * (region.start / my.wavesurfer.getDuration()));
+            var regionElement = my.style(document.createElement('region'), {
+                height: 'inherit',
+                backgroundColor: region.color,
+                width: width + 'px',
+                left: left + 'px',
+                display: 'block',
+                position: 'absolute'
+            });
+            regionElement.classList.add(id);
+            my.wrapper.appendChild(regionElement);
+        });
+    },
+    createElements: function() {
+        WaveSurfer.Drawer.Canvas.createElements.call(this);
+
+        if (this.params.showOverview) {
+            this.overviewRegion =  this.style(document.createElement('overview'), {
+                height: (this.wrapper.offsetHeight - (this.params.overviewBorderSize * 2)) + 'px',
+                width: '0px',
+                display: 'block',
+                position: 'absolute',
+                cursor: 'move',
+                border: this.params.overviewBorderSize + 'px solid ' + this.params.overviewBorderColor,
+                zIndex: 2,
+                opacity: this.params.overviewOpacity
+            });
+
+            this.wrapper.appendChild(this.overviewRegion);
+        }
+    },
+
+    bindWaveSurferEvents: function () {
+        var my = this;
+        this.wavesurfer.on('ready', this.render.bind(this));
+        this.wavesurfer.on('audioprocess', function (currentTime) {
+            my.progress(my.wavesurfer.backend.getPlayedPercents());
+        });
+        this.wavesurfer.on('seek', function(progress) {
+            my.progress(my.wavesurfer.backend.getPlayedPercents());
+        });
+
+        if (this.params.showOverview) {
+            this.wavesurfer.on('scroll', function(event) {
+                if (!my.draggingOverview) {
+                    my.moveOverviewRegion(event.target.scrollLeft / my.ratio);
+                }
+            });
+
+            this.wavesurfer.drawer.wrapper.addEventListener('mouseover', function(event) {
+                if (my.draggingOverview)  {
+                    my.draggingOverview = false;
+                }
+            });
+        }
+
+        this.wavesurfer.on('destroy', this.destroy.bind(this));
+    },
+
+    bindMinimapEvents: function () {
+        var my = this;
+        var relativePositionX = 0;
+        var seek = true;
+        var positionMouseDown = {
+            clientX: 0,
+            clientY: 0
+        };
+
+        this.on('click', (function (e, position) {
+            if (seek)  {
+                this.progress(position);
+                this.wavesurfer.seekAndCenter(position);
+            } else {
+                seek = true;
+            }
+        }).bind(this));
+
+        if (this.params.showOverview) {
+            this.overviewRegion.addEventListener('mousedown', function(event) {
+                my.draggingOverview = true;
+                relativePositionX = event.layerX;
+                positionMouseDown.clientX = event.clientX;
+                positionMouseDown.clientY = event.clientY;
+            });
+
+            this.wrapper.addEventListener('mousemove', function(event) {
+                if(my.draggingOverview) {
+                    my.moveOverviewRegion(event.clientX - my.container.getBoundingClientRect().left - relativePositionX);
+                }
+            });
+
+            this.wrapper.addEventListener('mouseup', function(event) {
+                if (positionMouseDown.clientX - event.clientX === 0 && positionMouseDown.clientX - event.clientX === 0) {
+                    seek = true;
+                    my.draggingOverview = false;
+                } else if (my.draggingOverview)  {
+                    seek = false;
+                    my.draggingOverview = false;
+                }
+            });
+        }
+    },
+
+    render: function () {
+        var len = this.getWidth();
+        var peaks = this.wavesurfer.backend.getPeaks(len);
+        this.drawPeaks(peaks, len);
+
+        if (this.params.showOverview) {
+            //get proportional width of overview region considering the respective
+            //width of the drawers
+            this.ratio = this.wavesurfer.drawer.width / this.width;
+            this.waveShowedWidth = this.wavesurfer.drawer.width / this.ratio;
+            this.waveWidth = this.wavesurfer.drawer.width;
+            this.overviewWidth = (this.width / this.ratio);
+            this.overviewPosition = 0;
+            this.overviewRegion.style.width = (this.overviewWidth - (this.params.overviewBorderSize * 2)) + 'px';
+        }
+    },
+    moveOverviewRegion: function(pixels) {
+        if (pixels < 0) {
+            this.overviewPosition = 0;
+        } else if (pixels + this.overviewWidth < this.width) {
+            this.overviewPosition = pixels;
+        } else {
+            this.overviewPosition = (this.width - this.overviewWidth);
+        }
+        this.overviewRegion.style.left = this.overviewPosition + 'px';
+        this.wavesurfer.drawer.wrapper.scrollLeft = this.overviewPosition * this.ratio;
+    }
+});
+
+
+WaveSurfer.initMinimap = function (params) {
+    var map = Object.create(WaveSurfer.Minimap);
+    map.init(this, params);
+    return map;
+};