Changeset 35446 for main

Timestamp:

2021-09-21T14:58:07+12:00 (3 years ago)

Author:

cstephen

Message:

Significant improvements to audio playback

Location:

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

Files:

• App.vue (modified) (2 diffs)
• components/TranscriptionItem.vue (modified) (4 diffs)
• components/TranscriptionItemEditor.vue (modified) (4 diffs)
• js/AudioPlaybackModule.js (modified) (4 diffs)
• main.js (modified) (1 diff)

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

@@ -103 +103 @@
     data() {
         return {
-            /** @type {{id: String, url: String} | null} */
-            currentlyLoadedAudio: null,
-            player: new Audio(),
             showInfo: false
         }
@@ -111 +108 @@
     computed: mapState({
         translations: state => state.translations,
-        transcriptions: state => state.rawTranscriptions,
-        playbackState: state => state.playbackState,
-        shouldPlayAudio: state => state.playbackState.isPlaying
-    }),
-    watch: {
-        async playbackState(newValue) {
-            if (!newValue.isPlaying) {
-                return;
-            }
-
-            const transcription = this.transcriptions.get(newValue.id);
-            loadTranscriptionAudio(this.player, transcription, this.currentlyLoadedAudio);
-
-            let playbackTime = 0;
-            if (newValue.currentTime > 0) {
-                playbackTime = newValue.currentTime;
-            }
-
-            this.player.currentTime = playbackTime;
-            await this.player.play();
-
-            this.playbackState.length = this.player.duration;
-        }//,
-        // shouldPlayAudio(newValue) {
-        //     if (newValue && this.$refs.audioPlayer.paused) {
-        //         this.$refs.audioPlayer.play();
-        //     }
-        //     else if (!newValue && !this.$refs.audioPlayer.paused) {
-        //         this.$refs.audioPlayer.pause();
-        //     }
-        // }
-    },
-    mounted() {
-        pollAudioTime(this.player, this.$store);
-    }
-}
-
-// Adapted from https://davidwalsh.name/javascript-polling
-function pollAudioTime(audioElement, store) {
-    var lastTime = 0;
-    (function p() {
-        if (audioElement.currentTime !== lastTime) {
-            lastTime = audioElement.currentTime;
-            store.commit("playbackStateSetCurrentTime", lastTime);
-            store.commit("playbackStateSetIsPlaying", true);
-        }
-        else {
-            store.commit("playbackStateSetIsPlaying", false);
-        }
-
-        setTimeout(p, 33); // Slightly more than 30hz
-    })();
-}
-
-/**
- * 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(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?
-        if (current !== null) {
-            URL.revokeObjectURL(current.url);
-        }
-
-        const urlObject = URL.createObjectURL(transcription.file);
-        player.src = urlObject;
-        player.load();
-
-        return { id: transcription.id, url: urlObject };
-    }
-
-    return current;
+        transcriptions: state => state.rawTranscriptions
+    })
 }
 </script>

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

@@ -3 +3 @@
         <!-- Header containing info and actions for the transcription -->
         <div class="transcription__header">
-            <button class="btn-fab" v-on:click="playAudio(-1)" type="button" title="Play Audio">
+            <button class="btn-fab" v-on:click="toggleAudio" type="button" title="Play Audio">
                 <span class="material-icons mdi-l play-button" v-if="!isPlaying">play_arrow</span>
                 <span class="material-icons mdi-l play-button" v-if="isPlaying">pause</span>
@@ -95 +95 @@
 import { mapState } from "vuex";
 import { saveAs } from "file-saver"
+import { TranscriptionViewModel } from "../main";
+import AudioPlayback from "../js/AudioPlaybackModule"
+import Util from "../js/Util"
 import TranscriptionItemEditor from "./TranscriptionItemEditor.vue"
-import { TranscriptionViewModel, PlaybackState } from "../main";
-import Util from "../js/Util"
 
 export default {
@@ -115 +116 @@
     computed: mapState({
         translations: state => state.translations,
-        isPlaying: state => state.playbackState.isPlaying
+        isPlaying(state) {
+            return state.playbackState.isPlaying && state.playbackState.id === this.transcription.id
+        }
     }),
     methods: {
@@ -121 +124 @@
             this.showEditor = !this.showEditor;
         },
-        playAudio(startTime = 0) {
-            const pState = new PlaybackState(this.transcription.id, true, startTime);
-            this.$store.commit("setPlaybackState", pState);
+        toggleAudio() {
+            this.isPlaying ? AudioPlayback.pause() : AudioPlayback.play(this.transcription.id, -1);
         },
         remove() {

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

@@ -78 +78 @@
 <script>
 import { mapState } from "vuex";
-import { TranscriptionViewModel, PlaybackState } from "../main";
+import { TranscriptionViewModel } from "../main";
+import AudioPlayback from "../js/AudioPlaybackModule"
 import AudioTimeBar from "./AudioTimeBar.vue"
 import Util from "../js/Util";
@@ -121 +122 @@
         return {
             enableEditing: false,
-            words: []
+            words: [],
+            lastHighlightedWordIndex: 0
         }
     },
@@ -140 +142 @@
     methods: {
         playAudio(startTime) {
-            const pState = new PlaybackState(this.transcription.id, true, startTime);
-            this.$store.commit("setPlaybackState", pState);
+            AudioPlayback.play(this.transcription.id, startTime);
         },
         /**
@@ -247 +248 @@
     watch: {
         currentPlaybackTime(newValue) {
+            this.words[this.lastHighlightedWordIndex].shouldHighlight = false;
+
             if (this.playbackState.id !== this.transcription.id) {
                 return;
             }
 
-            for (const word of this.words) {
-                word.shouldHighlight = word.startTime < newValue && word.endTime > newValue;
+            for (let i = 0; i < this.words.length; i++) {
+                const word = this.words[i];
+
+                if (word.startTime < newValue && word.endTime > newValue) {
+                    word.shouldHighlight = true;
+                    this.lastHighlightedWordIndex = i;
+                    break;
+                }
             }
         }

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

@@ -28 +28 @@
 function pollAudioTime(audioElement, store) {
     var lastTime = 0;
-    var shouldCommitNotPlaying = true;
 
-    (function p() {
+    (function poll() {
         if (audioElement.currentTime !== lastTime) {
             lastTime = audioElement.currentTime;
-            shouldCommitNotPlaying = true;
-
             store.commit("playbackStateSetCurrentTime", lastTime);
-            store.commit("playbackStateSetIsPlaying", true);
-        }
-        else if (shouldCommitNotPlaying) {
-            store.commit("playbackStateSetIsPlaying", false);
-            shouldCommitNotPlaying = false;
         }
 
-        setTimeout(p, 33); // Slightly more than 30hz
+        setTimeout(poll, 33); // Slightly more than 30hz
     })();
 }
@@ -79 +71 @@
         this.loadedAudio = new LoadedAudio(null, null);
 
-        pollAudioTime(this.player, store)
+        pollAudioTime(this.player, store);
+
+        this.player.addEventListener("ended", function() {
+            store.commit("playbackStateSetIsPlaying", false);
+        });
     }
 
@@ -88 +84 @@
      */
     static async play(id, startTime = -1) {
-        if (this.loadedAudio.id !== id) {
-            this.loadedAudio = loadAudio(this.player, this.store.state.rawTranscriptions[id], this.loadedAudio);
-
-            this.store.commit("playbackStateSetID", id);
-        }
-
         const playbackState = this.store.state.playbackState;
 
@@ -101 +91 @@
         }
 
+        if (this.loadedAudio.id !== id) {
+            this.loadedAudio = loadAudio(this.player, this.store.state.rawTranscriptions.get(id), this.loadedAudio);
+
+            this.store.commit("playbackStateSetID", id);
+        }
+
         this.player.currentTime = playbackTime;
         await this.player.play();
+
+        this.store.commit("playbackStateSetLength", this.player.duration);
+        this.store.commit("playbackStateSetIsPlaying", true);
     }
 
     static pause() {
         this.player.pause();
+        this.store.commit("playbackStateSetIsPlaying", false);
     }
 }

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

@@ -104 +104 @@
             state.playbackState.currentTime = time;
         },
+        playbackStateSetLength(state, length) {
+            state.playbackState.length = length;
+        },
 
-        /**
-         * Sets the current playback state.
-         * @param {*} state The state of the store.
-         * @param {PlaybackState} playbackState The new playback state.
-         */
-        setPlaybackState(state, playbackState) {
-            state.playbackState = playbackState;
-        },
         setTranslations(state, translations) {
             state.translations = translations;