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

Timestamp:

2021-09-16T11:10:39+12:00 (3 years ago)

Author:

cstephen

Message:

Use unbound audio object.
Update translations.

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue (modified) (8 diffs)

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

@@ -2 +2 @@
     <!-- Used to calculate the character size of our monospace font -->
     <span class="monospace-font-sizer">ngā tama a rangi</span>
-
-    <audio id="transcriptionAudio" ref="audioPlayer">
-        <source id="transcriptionAudioSource" ref="audioPlayerSource" />
-    </audio>
 
     <div class="paper">
@@ -76 +72 @@
         return {
             /** @type {{id: String, url: String} | null} */
-            currentlyLoadedAudio: null
+            currentlyLoadedAudio: null,
+            player: new Audio()
         }
     },
@@ -86 +83 @@
     }),
     watch: {
-        playbackState(newValue) {
+        async playbackState(newValue) {
             if (!newValue.isPlaying) {
                 return;
@@ -92 +89 @@
 
             const transcription = this.transcriptions.get(newValue.id);
-            loadTranscriptionAudio(this.$refs.audioPlayer, this.$refs.audioPlayerSource, transcription, this.currentlyLoadedAudio);
+            loadTranscriptionAudio(this.player, transcription, this.currentlyLoadedAudio);
 
             let playbackTime = 0;
@@ -99 +96 @@
             }
 
-            this.$refs.audioPlayer.currentTime = playbackTime;
-            this.$refs.audioPlayer.play();
+            this.player.currentTime = playbackTime;
+            await this.player.play();
         }//,
         // shouldPlayAudio(newValue) {
@@ -112 +109 @@
     },
     mounted() {
-        pollAudioTime(this.$refs.audioPlayer, this.$store);
+        pollAudioTime(this.player, this.$store);
     }
 }
@@ -135 +132 @@
 /**
  * Loads an audio file.
+ * @param {Audio} player The audio player.
  * @param {TranscriptionViewModel} transcription The name of the requested audio file.
  * @param {{id: String, url: String} | null} current The currently loaded audio.
  * @returns {{id: String, url: String}} If a new audio file was loaded, a new audio tracking object, else the current one.
  */
-function loadTranscriptionAudio(audioElement, audioElementSource, transcription, current) {
+function loadTranscriptionAudio(player, transcription, current) {
     if (current == null || current.id !== transcription.id) {
         // TODO: Need to profile on some larger tracks; this may not be worth it? Better to cache a URL object instead?
@@ -147 +145 @@
 
         const urlObject = URL.createObjectURL(transcription.file);
-        audioElementSource.src = urlObject;
-        audioElement.load();
+        player.src = urlObject;
+        player.load();
 
         return { id: transcription.id, url: urlObject };