added audioplayer contrib module

2017-11-25 16:05:32 +01:00
parent ff23c45e43
commit 0942e9a212
174 changed files with 21682 additions and 0 deletions
@@ -0,0 +1,128 @@
+'use strict';
+
+// Create an instance
+var wavesurfer;
+
+// Init & load audio file
+document.addEventListener('DOMContentLoaded', function () {
+    // Init
+    wavesurfer = WaveSurfer.create({
+        container: document.querySelector('#waveform'),
+        waveColor: '#A8DBA8',
+        progressColor: '#3B8686'
+    });
+
+    // Load audio from URL
+    wavesurfer.load('../media/demo.wav');
+
+    // Equalizer
+    wavesurfer.on('ready', function () {
+        var EQ = [
+            {
+                f: 32,
+                type: 'lowshelf'
+            }, {
+                f: 64,
+                type: 'peaking'
+            }, {
+                f: 125,
+                type: 'peaking'
+            }, {
+                f: 250,
+                type: 'peaking'
+            }, {
+                f: 500,
+                type: 'peaking'
+            }, {
+                f: 1000,
+                type: 'peaking'
+            }, {
+                f: 2000,
+                type: 'peaking'
+            }, {
+                f: 4000,
+                type: 'peaking'
+            }, {
+                f: 8000,
+                type: 'peaking'
+            }, {
+                f: 16000,
+                type: 'highshelf'
+            }
+        ];
+
+        // Create filters
+        var filters = EQ.map(function (band) {
+            var filter = wavesurfer.backend.ac.createBiquadFilter();
+            filter.type = band.type;
+            filter.gain.value = 0;
+            filter.Q.value = 1;
+            filter.frequency.value = band.f;
+            return filter;
+        });
+
+        // Connect filters to wavesurfer
+        wavesurfer.backend.setFilters(filters);
+
+        // Bind filters to vertical range sliders
+        var container = document.querySelector('#equalizer');
+        filters.forEach(function (filter) {
+            var input = document.createElement('input');
+            wavesurfer.util.extend(input, {
+                type: 'range',
+                min: -40,
+                max: 40,
+                value: 0,
+                title: filter.frequency.value
+            });
+            input.style.display = 'inline-block';
+            input.setAttribute('orient', 'vertical');
+            wavesurfer.util.style(input, {
+                'webkitAppearance': 'slider-vertical',
+                width: '50px',
+                height: '150px'
+            });
+            container.appendChild(input);
+
+            var onChange = function (e) {
+                filter.gain.value = ~~e.target.value;
+            };
+
+            input.addEventListener('input', onChange);
+            input.addEventListener('change', onChange);
+        });
+
+        // For debugging
+        wavesurfer.filters = filters;
+    });
+
+    // Log errors
+    wavesurfer.on('error', function (msg) {
+        console.log(msg);
+    });
+
+    // Bind play/pause button
+    document.querySelector(
+        '[data-action="play"]'
+    ).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
+
+    // Progress bar
+    (function () {
+        var progressDiv = document.querySelector('#progress-bar');
+        var progressBar = progressDiv.querySelector('.progress-bar');
+
+        var showProgress = function (percent) {
+            progressDiv.style.display = 'block';
+            progressBar.style.width = percent + '%';
+        };
+
+        var hideProgress = function () {
+            progressDiv.style.display = 'none';
+        };
+
+        wavesurfer.on('loading', showProgress);
+        wavesurfer.on('ready', hideProgress);
+        wavesurfer.on('destroy', hideProgress);
+        wavesurfer.on('error', hideProgress);
+    }());
+});