Trigger "waveform-ready" event whenever waveform peaks are drawn (kat…

…spaugh#2077)

* trigger waveform-ready event after peaks are draw, when peaks are provided and backend is of type MediaElement and MediaElementBackend

* updated changelog

* unit test for waveform-ready event

* - fixed constants names
- added comments
- unit test with a jasmine spy, to assert that waveform-ready event is triggered only once

* fire waveform-ready in loadBuffer

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* fix assertion inherited from upstream that credentials would be "same-origin"

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* switch back to "same-origin" in test to see if it passes in CI

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* explanatory comment

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* Move CHANGELOG entry to Next.

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* add emit annotations

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* camelCase the event name

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* update test description

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* fix event name

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* use fetchFile

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* add word "stereo"

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* issue number

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

* tests passing

Signed-off-by: Bjorn Westergard <bjornw@gmail.com>

Co-authored-by: marizuccara <mari.zuccara@gmail.com>

CHANGES.md

@@ -5,6 +5,7 @@ Next (unreleased)
 -----------------
 
 - Fix performance issues with `seekTo` while audio is playing (#2045)
+- Trigger `waveform-ready` event when provided peaks are drawn (#2031)
 
 4.1.1 (24.09.2020)
 ------------------

spec/mediaelement-shared.js

@@ -32,6 +32,23 @@ export function sharedTests(backend) {
         loadElement();
     });
 
+    /**
+     * @test {WaveSurfer#waveform-ready} When the waveform is drawn, the 'waveform-ready' event is triggered
+     */
+    it('should fire waveform-ready event when the waveform is drawn', function(done) {
+        const waveformReadySpy = jasmine.createSpy('waveform-ready-spy');
+
+        wavesurfer.on('waveform-ready', () => {
+            waveformReadySpy();
+
+            expect(waveformReadySpy).toHaveBeenCalledTimes(1);
+
+            done();
+        });
+
+        loadAudioPeaks();
+    });
+
     /**
      * @test {WaveSurfer#play}
      * @test {WaveSurfer#isPlaying}
@@ -300,3 +317,12 @@ function loadElement() {
     audioElement.src = TestHelpers.EXAMPLE_FILE_PATH;
     wavesurfer.load(audioElement);
 }
+
+/** Retrieve normalized waveform peaks, then load an audio resource giving peaks and setting preload attribute to 'none' **/
+function loadAudioPeaks() {
+    TestHelpers.getPeaks(TestHelpers.EXAMPLE_STEREO_FILE_JSON_PATH, (peaks) => {
+        const src = TestHelpers.EXAMPLE_STEREO_FILE_PATH;
+
+        wavesurfer.load(src, peaks, 'none', TestHelpers.EXAMPLE_STEREO_FILE_DURATION);
+    });
+}

spec/test-helpers.js

@@ -1,4 +1,5 @@
 import WaveSurfer from '../src/wavesurfer.js';
+import fetchFile from '../src/util/fetch.js';
 
 const TestHelpers = {
     /** Example audio clip */
@@ -10,6 +11,15 @@ const TestHelpers = {
     /** Length of example audio clip (in seconds) */
     EXAMPLE_FILE_DURATION: 21,
 
+    /** Example stero audio clip with waveform */
+    EXAMPLE_STEREO_FILE_PATH: '/base/spec/support/stereo.mp3',
+
+    /** Length of example audio clip with waveform (in seconds) */
+    EXAMPLE_STEREO_FILE_DURATION: 51,
+
+    /** Example waveform peaks */
+    EXAMPLE_STEREO_FILE_JSON_PATH: '/base/spec/support/stereo-peaks.json',
+
     createElement(id, type) {
         if (id == undefined) {
             id = WaveSurfer.util.getId('waveform_');
@@ -48,6 +58,26 @@ const TestHelpers = {
             cursorColor: 'white'
         };
         return [WaveSurfer.create(options), element];
+    },
+
+    /**
+     * Normalize audio peaks
+     *
+     * @param  {String} jsonFilePath
+     * @param  {function} successHandler
+     */
+    getPeaks(jsonFilePath, successHandler) {
+        fetchFile({
+            url: jsonFilePath,
+            responseType: 'json'
+        }).on(
+            'success',
+            peaks => {
+                const max = peaks.data.reduce((max, el) => (el > max ? el : max));
+                const normalizedPeaks = peaks.data.map(el => el / max);
+                return successHandler(normalizedPeaks);
+            }
+        );
     }
 };
 

spec/util.spec.js

@@ -23,7 +23,6 @@ describe('util.fetchFile:', function() {
             // options
             expect(instance.fetchRequest.url).toEndWith(options.url);
             expect(instance.fetchRequest.cache).toEqual('default');
-            expect(instance.fetchRequest.credentials).toEqual('same-origin');
             expect(instance.fetchRequest.method).toEqual('GET');
             expect(instance.fetchRequest.mode).toEqual('cors');
 

src/wavesurfer.js

@@ -1391,6 +1391,7 @@ export default class WaveSurfer extends util.Observer {
      * Loads audio using Web Audio buffer backend.
      *
      * @private
+     * @emits WaveSurfer#waveform-ready
      * @param {string} url URL of audio file
      * @param {number[]|Number.<Array[]>} peaks Peaks data
      * @param {?number} duration Optional duration of audio file
@@ -1407,6 +1408,7 @@ export default class WaveSurfer extends util.Observer {
         if (peaks) {
             this.backend.setPeaks(peaks, duration);
             this.drawBuffer();
+            this.fireEvent('waveform-ready');
             this.tmpEvents.push(this.once('interaction', load));
         } else {
             return load();
@@ -1417,6 +1419,7 @@ export default class WaveSurfer extends util.Observer {
      * Either create a media element, or load an existing media element.
      *
      * @private
+     * @emits WaveSurfer#waveform-ready
      * @param {string|HTMLMediaElement} urlOrElt Either a path to a media file, or an
      * existing HTML5 Audio/Video Element
      * @param {number[]|Number.<Array[]>} peaks Array of peaks. Required to bypass web audio
@@ -1451,9 +1454,11 @@ export default class WaveSurfer extends util.Observer {
             this.backend.once('error', err => this.fireEvent('error', err))
         );
 
+        // If peaks are provided, render them and fire the `waveform-ready` event.
         if (peaks) {
             this.backend.setPeaks(peaks, duration);
             this.drawBuffer();
+            this.fireEvent('waveform-ready');
         }
 
         // If no pre-decoded peaks are provided, or are provided with