diff --git a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue b/src/components/MediaSettings/MediaDevicesSpeakerTest.vue index ab22794dd2b..fe7c4aefd2b 100644 --- a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue +++ b/src/components/MediaSettings/MediaDevicesSpeakerTest.vue @@ -42,13 +42,11 @@ export default { } }, - data() { - return { - isPlayingTestSound: false, - } - }, - computed: { + isPlayingTestSound() { + return this.soundsStore.audioObjectsPromises.wait !== null + }, + buttonLabel() { return this.isPlayingTestSound // TRANSLATORS Playing the test sound to check speakers @@ -67,23 +65,18 @@ export default { } }, + beforeDestroy() { + this.soundsStore.pauseAudio('wait') + }, + methods: { t, playTestSound() { if (this.isPlayingTestSound) { this.soundsStore.pauseAudio('wait') - return - } - this.isPlayingTestSound = true - try { + } else { this.soundsStore.playAudio('wait') - this.soundsStore.audioObjects.wait.addEventListener('ended', () => { - this.isPlayingTestSound = false - }, { once: true }) - } catch (error) { - console.error(error) - this.isPlayingTestSound = false } }, }, diff --git a/src/stores/sounds.js b/src/stores/sounds.js index 0f25089672f..e7599499754 100644 --- a/src/stores/sounds.js +++ b/src/stores/sounds.js @@ -35,6 +35,11 @@ export const useSoundsStore = defineStore('sounds', { leave: null, wait: null, }, + audioObjectsPromises: { + join: null, + leave: null, + wait: null, + }, }), actions: { @@ -51,11 +56,16 @@ export const useSoundsStore = defineStore('sounds', { if (!this.audioObjectsCreated) { this.initAudioObjects() } - this.audioObjects[key].play() + this.audioObjectsPromises[key] = this.audioObjects[key].play() + this.audioObjectsPromises[key].catch(error => { + console.error(error) + }) }, pauseAudio(key) { - this.audioObjects[key]?.pause() + if (this.audioObjectsPromises[key]) { + this.audioObjects[key].pause() + } }, /** @@ -70,6 +80,16 @@ export const useSoundsStore = defineStore('sounds', { const audio = new Audio(filePath) audio.load() audio.volume = volume + + audio.addEventListener('pause', () => { + this.audioObjectsPromises[key] = null + audio.currentTime = 0 + }) + + audio.addEventListener('ended', () => { + this.audioObjectsPromises[key] = null + }) + Vue.set(this.audioObjects, key, audio) },