Merge pull request #13571 from nextcloud/backport/13563/stable30

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
 			}
 		},
 	},

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