Changeset 35631 for main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/js/AudioPlaybackModule.js

Timestamp:

2021-10-18T15:57:18+13:00 (3 years ago)

Author:

cstephen

Message:

Improve audio loading flow.
Load audio on word editor click.

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/js/AudioPlaybackModule.js (modified) (5 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/js/AudioPlaybackModule.js

@@ -34 +34 @@
         }
 
-        // setTimeout(poll, 33); // Slightly more than 30hz
         requestAnimationFrame(poll);
     })();
@@ -41 +40 @@
 /**
  * Loads an audio file.
- * @param {Audio} player The audio player.
+ * @param {HTMLAudioElement} player The audio player.
  * @param {TranscriptionViewModel} transcription The name of the requested audio file.
  * @param {LoadedAudio} current The currently loaded audio.
@@ -70 +69 @@
         this.player = new Audio();
         this.loadedAudio = new LoadedAudio(null, null);
+        this.requestedPlaybackTime = 0;
 
         pollAudioTime(this.player, store);
@@ -78 +78 @@
     }
 
+    static onCanPlayThrough() {
+        AudioPlayback.player.removeEventListener("canplaythrough", AudioPlayback.onCanPlayThrough);
+
+        AudioPlayback.player.currentTime = AudioPlayback.requestedPlaybackTime;
+        AudioPlayback.store.commit("playbackStateSetLength", { id: AudioPlayback.loadedAudio.id, time: AudioPlayback.player.duration });
+    }
+
     /**
-     * Plays a transcription's audio file.
-     * @param {String} id The ID of the transcription to play audio for.
-     * @param {Number} startTime The time into the audio at which to start playing. Leave negative to resume playback if paused.
+     * Loads a transcription's audio file.
+     * @param {String} id The ID of the transcription to load the audio of.
+     * @param {Number} startTime The time into the audio to set the current playback time to. Leave negative to select the last value, or zero.
      */
-    static async play(id, startTime = -1) {
+    static async load(id, startTime = -1) {
+        this.player.addEventListener("canplaythrough", this.onCanPlayThrough);
+
         const playbackTimes = this.store.state.playbackState.playbackTimes;
 
-        let playbackTime = startTime;
+        this.requestedPlaybackTime = startTime;
         if (playbackTimes.has(id) && startTime < 0) {
-            playbackTime = playbackTimes.get(id);
+            this.requestedPlaybackTime = playbackTimes.get(id);
         }
 
@@ -97 +106 @@
         }
 
-        this.player.currentTime = playbackTime;
+        this.player.currentTime = AudioPlayback.requestedPlaybackTime;
+        this.store.commit("playbackStateSetLength", { id: id, time: this.player.duration });
+    }
+
+    /**
+     * Plays a transcription's audio file.
+     * @param {String} id The ID of the transcription to play audio for.
+     * @param {Number} startTime The time into the audio at which to start playing. Leave negative to resume playback if paused.
+     */
+    static async play(id, startTime = -1) {
+        await this.load(id, startTime);
         await this.player.play();
-
-        this.store.commit("playbackStateSetLength", { id: id, time: this.player.duration });
         this.store.commit("playbackStateSetIsPlaying", true);
     }