TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-23 04:34:15 -04:00
Code Issues Packages Projects Releases Wiki Activity

<PronunciationSpeaker> reuse the sound object

Browse Source
This commit is contained in:
Andrea Vos 2024-01-18 19:29:45 +01:00
parent 731feaf711
commit 0d15a38e1b
1 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/PronunciationSpeaker.vue
View File

@ -4,7 +4,7 @@
dir="ltr"
:href="pronunciationLink"
target="_blank"
@click.prevent="pronounce()"
@click.prevent="pronounce"
>
<Icon :v="icon" /><sub v-if="name">{{ name }}</sub>
</a>
@ -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();
},
},
};