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