- Timestamp:
- 2021-10-18T15:57:18+13:00 (2 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioTimeBar.vue
r35525 r35631 1 1 <template> 2 2 <div class="root"> 3 <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled" />4 5 3 <button type="button" class="btn-fab theme-flat" :disabled="isDisabled" 6 4 @click="stepBack" @mousedown="onStepBackMouseDown" @mouseup="onStepperMouseUp"> … … 14 12 <span class="material-icons mdi-s">arrow_forward_ios</span> 15 13 </button> 14 15 <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled" /> 16 16 </div> 17 17 </template> -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue
r35548 r35631 41 41 </div> 42 42 43 <hr />44 45 <TranscriptionItemEditor ref="editor" :transcription="transcription" style="margin-bottom: 1em" :enableEditing="enableEditing" />46 47 43 <div class="editor-controls"> 48 44 <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="audioLength" :isDisabled="playbackState.id != transcription.id" /> 49 45 </div> 46 47 <hr /> 48 49 <div class="editor-controls"> 50 <TranscriptionItemEditor ref="editor" :transcription="transcription" style="margin-bottom: 1em" :enableEditing="enableEditing" /> 50 51 <toggle-button v-model="enableEditing" :title="translations.get('TranscriptionItemEditor_ToggleEditTooltip')"> 51 52 <span class="material-icons">edit</span> … … 88 89 .editor-controls { 89 90 display: grid; 90 align-items: center;91 align-items: flex-start; 91 92 grid-template-columns: 1fr auto; 92 93 margin: 0.5em 0 0.3em 0; -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue
r35608 r35631 12 12 <ul class="list-view" v-else> 13 13 <li v-for="(word, index) in words" :key="word.id" class="word-container"> 14 <input :size="word.word.length === 0 ? 1 : word.word.length" :ref="word.id" 14 <input :size="word.word.length === 0 ? 1 : word.word.length" :ref="word.id" @click="loadAudio(word.startTime)" 15 15 class="editor-word" v-model="word.word" type="text" :class="{ 'word-highlight-applied': word.shouldHighlight }" 16 16 @beforeinput="onEditorBeforeInput($event, index)" @focusout="onEditorFocusOut(index)" @focus="onEditorFocus(index)" /> … … 186 186 async playAudio(startTime) { 187 187 await AudioPlayback.play(this.transcription.id, startTime); 188 }, 189 190 async loadAudio(startTime) { 191 await AudioPlayback.load(this.transcription.id, startTime); 188 192 }, 189 193 -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/js/AudioPlaybackModule.js
r35502 r35631 34 34 } 35 35 36 // setTimeout(poll, 33); // Slightly more than 30hz37 36 requestAnimationFrame(poll); 38 37 })(); … … 41 40 /** 42 41 * Loads an audio file. 43 * @param { Audio} player The audio player.42 * @param {HTMLAudioElement} player The audio player. 44 43 * @param {TranscriptionViewModel} transcription The name of the requested audio file. 45 44 * @param {LoadedAudio} current The currently loaded audio. … … 70 69 this.player = new Audio(); 71 70 this.loadedAudio = new LoadedAudio(null, null); 71 this.requestedPlaybackTime = 0; 72 72 73 73 pollAudioTime(this.player, store); … … 78 78 } 79 79 80 static onCanPlayThrough() { 81 AudioPlayback.player.removeEventListener("canplaythrough", AudioPlayback.onCanPlayThrough); 82 83 AudioPlayback.player.currentTime = AudioPlayback.requestedPlaybackTime; 84 AudioPlayback.store.commit("playbackStateSetLength", { id: AudioPlayback.loadedAudio.id, time: AudioPlayback.player.duration }); 85 } 86 80 87 /** 81 * Plays a transcription's audio file.82 * @param {String} id The ID of the transcription to play audio for.83 * @param {Number} startTime The time into the audio at which to start playing. Leave negative to resume playback if paused.88 * Loads a transcription's audio file. 89 * @param {String} id The ID of the transcription to load the audio of. 90 * @param {Number} startTime The time into the audio to set the current playback time to. Leave negative to select the last value, or zero. 84 91 */ 85 static async play(id, startTime = -1) { 92 static async load(id, startTime = -1) { 93 this.player.addEventListener("canplaythrough", this.onCanPlayThrough); 94 86 95 const playbackTimes = this.store.state.playbackState.playbackTimes; 87 96 88 let playbackTime = startTime;97 this.requestedPlaybackTime = startTime; 89 98 if (playbackTimes.has(id) && startTime < 0) { 90 playbackTime = playbackTimes.get(id);99 this.requestedPlaybackTime = playbackTimes.get(id); 91 100 } 92 101 … … 97 106 } 98 107 99 this.player.currentTime = playbackTime; 108 this.player.currentTime = AudioPlayback.requestedPlaybackTime; 109 this.store.commit("playbackStateSetLength", { id: id, time: this.player.duration }); 110 } 111 112 /** 113 * Plays a transcription's audio file. 114 * @param {String} id The ID of the transcription to play audio for. 115 * @param {Number} startTime The time into the audio at which to start playing. Leave negative to resume playback if paused. 116 */ 117 static async play(id, startTime = -1) { 118 await this.load(id, startTime); 100 119 await this.player.play(); 101 102 this.store.commit("playbackStateSetLength", { id: id, time: this.player.duration });103 120 this.store.commit("playbackStateSetIsPlaying", true); 104 121 }
Note:
See TracChangeset
for help on using the changeset viewer.