diff --git a/components/PronunciationSpeaker.vue b/components/PronunciationSpeaker.vue index 4e1efe681..c12a88907 100644 --- a/components/PronunciationSpeaker.vue +++ b/components/PronunciationSpeaker.vue @@ -4,7 +4,7 @@ dir="ltr" :href="pronunciationLink" target="_blank" - @click.prevent="pronounce()" + @click.prevent="pronounce" > {{ name }} @@ -26,6 +26,7 @@ export default { data() { return { state: STATE_IDLE, + sound: null, } }, computed: { @@ -49,34 +50,35 @@ export default { }, icon() { switch (this.state) { - case STATE_IDLE: - return 'volume'; case STATE_LOADING: return 'spinner fa-spin'; case STATE_PLAYING: return 'volume-up'; + case STATE_IDLE: + default: + return 'volume'; } } }, methods: { pronounce() { - const sound = new Audio(this.pronunciationLink); + if (this.sound) { + this.sound.pause(); + this.sound.currentTime = 0; + this.sound.play(); + + return; + } + + this.sound = new Audio(this.pronunciationLink); + + this.sound.addEventListener('loadeddata', () => this.sound.play()); + this.sound.addEventListener('play', () => this.state = STATE_PLAYING); + this.sound.addEventListener('ended', () => this.state = STATE_IDLE); + this.sound.addEventListener('error', () => this.state = STATE_IDLE); + this.state = STATE_LOADING; - - sound.addEventListener('loadeddata', () => { - this.state = STATE_PLAYING; - sound.play(); - }); - - sound.addEventListener('ended', () => { - this.state = STATE_IDLE; - }); - - sound.addEventListener('error', () => { - this.state = STATE_IDLE; - }); - - sound.load(); + this.sound.load(); }, }, };