Changeset 35631 for main/trunk

Timestamp:

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

Author:

cstephen

Message:

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

Location:

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

Files:

• components/AudioTimeBar.vue (modified) (2 diffs)
• components/TranscriptionItem.vue (modified) (2 diffs)
• components/TranscriptionItemEditor.vue (modified) (2 diffs)
• js/AudioPlaybackModule.js (modified) (5 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioTimeBar.vue

@@ -1 +1 @@
 <template>
 <div class="root">
-    <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled" />
-
     <button type="button" class="btn-fab theme-flat" :disabled="isDisabled"
             @click="stepBack" @mousedown="onStepBackMouseDown" @mouseup="onStepperMouseUp">
@@ -14 +12 @@
         <span class="material-icons mdi-s">arrow_forward_ios</span>
     </button>
+
+    <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled" />
 </div>
 </template>

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue

@@ -41 +41 @@
         </div>
 
-        <hr />
-
-        <TranscriptionItemEditor ref="editor" :transcription="transcription" style="margin-bottom: 1em" :enableEditing="enableEditing" />
-
         <div class="editor-controls">
             <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="audioLength" :isDisabled="playbackState.id != transcription.id" />
-
+        </div>
+
+        <hr />
+
+        <div class="editor-controls">
+            <TranscriptionItemEditor ref="editor" :transcription="transcription" style="margin-bottom: 1em" :enableEditing="enableEditing" />
             <toggle-button v-model="enableEditing" :title="translations.get('TranscriptionItemEditor_ToggleEditTooltip')">
                 <span class="material-icons">edit</span>
@@ -88 +89 @@
 .editor-controls {
     display: grid;
-    align-items: center;
+    align-items: flex-start;
     grid-template-columns: 1fr auto;
     margin: 0.5em 0 0.3em 0;

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue

@@ -12 +12 @@
         <ul class="list-view" v-else>
             <li v-for="(word, index) in words" :key="word.id" class="word-container">
-                <input :size="word.word.length === 0 ? 1 : word.word.length" :ref="word.id"
+                <input :size="word.word.length === 0 ? 1 : word.word.length" :ref="word.id" @click="loadAudio(word.startTime)"
                     class="editor-word" v-model="word.word" type="text" :class="{ 'word-highlight-applied': word.shouldHighlight }"
                     @beforeinput="onEditorBeforeInput($event, index)" @focusout="onEditorFocusOut(index)" @focus="onEditorFocus(index)" />
@@ -186 +186 @@
         async playAudio(startTime) {
             await AudioPlayback.play(this.transcription.id, startTime);
+        },
+
+        async loadAudio(startTime) {
+            await AudioPlayback.load(this.transcription.id, startTime);
         },
 

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);
     }