wavesurfer-rails 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d583a26ff8fe19758090aa446c2888af1f3578c6
-  data.tar.gz: 01700088d6050b7b858d6cfbf9bce1098c9dc5cf
+  metadata.gz: 2ba42fdbe55d716deca91292edf9857e6771bb8d
+  data.tar.gz: 88fd5152b12e3f2d7a9a77f09c8f9b1781f23911
 SHA512:
-  metadata.gz: 49608f4c19dd4cbbe3efabaa5de60f4d02142fe436206a0a1a62150e73d1840fa2f5bb9306bd8b0c5d81ea6b03ffaba60a4db79e07549e7ba2028945412339a0
-  data.tar.gz: f32462fd869f0a0d02eb2d326cf1b204b5f3a4fa1637964fc58cd437dc6296622f6c19630449ffec1cb93692e2042aa362f9cdbc4386e13edf4103580342a0f9
+  metadata.gz: cc7175991a6695b50c5e011982197f31e4def0b297d09005dc32bc9645d83347cd96219553702ce1be8e717ee3b5e3265c5171a0c9f02b3524386f3e25c06717
+  data.tar.gz: cf77560f0044a0ca8b092b7f05c62142ab8880ed785dbac4e6c054dfe21709cd7d349870b1fdb16f18ba5920298ec5dc59acab894f7ef01c5d1a726d77592d68

data/README.md

@@ -1,6 +1,6 @@
 # Wavesurfer-rails
 
-[Wavesurfer-js](http://wavesurfer-js.org/)
+[Wavesurfer Homepage](http://wavesurfer-js.org/)
 
 ## Installation
 
@@ -20,7 +20,18 @@ In `app/assets/javascripts/application.js` put the following:
 //= require wavesurfer
 ```
 
-If you want the wavesurfer plugins:
+If you want the wavesurfer plugins, you can require them all individually:
+
+```javascript
+//= require ws-plugins/wavesurfer.elan.js
+//= require ws-plugins/wavesurfer.microphone.js
+//= require ws-plugins/wavesurfer.minimap.js
+//= require ws-plugins/wavesurfer.regions.js
+//= require ws-plugins/wavesurfer.spectrogram.js
+//= require ws-plugins/wavesurfer.timeline.js
+```
+
+Or require them all at once:
 
 ```javascript
 //= require wavesurfer-plugins

data/lib/wavesurfer/rails/version.rb

@@ -1,5 +1,5 @@
 module Wavesurfer
   module Rails
-    VERSION = "0.1.1"
+    VERSION = "0.1.2"
   end
 end

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

@@ -1,6 +1,6 @@
-//= require plugin/wavesurfer.elan.min.js
-//= require plugin/wavesurfer.microphone.min.js
-//= require plugin/wavesurfer.minimap.min.js
-//= require plugin/wavesurfer.regions.min.js
-//= require plugin/wavesurfer.spectrogram.min.js
-//= require plugin/wavesurfer.timeline.min.js
+//= require ws-plugins/wavesurfer.elan.js
+//= require ws-plugins/wavesurfer.microphone.js
+//= require ws-plugins/wavesurfer.minimap.js
+//= require ws-plugins/wavesurfer.regions.js
+//= require ws-plugins/wavesurfer.spectrogram.js
+//= require ws-plugins/wavesurfer.timeline.js

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