[web] Fix unstoppable stream player

web-src/src/components/NavbarBottom.vue

@@ -84,7 +84,7 @@
                     :disabled="!playing"
                     :max="100"
                     :cursor="cursor"
-                    @change="change_stream_volume"
+                    @change="changeStreamVolume"
                   />
                 </div>
               </div>
@@ -243,7 +243,7 @@
                   :disabled="!playing"
                   :max="100"
                   :cursor="cursor"
-                  @change="change_stream_volume"
+                  @change="changeStreamVolume"
                 />
               </div>
             </div>
@@ -346,18 +346,12 @@ export default {
     }
   },
 
-  // On app mounted
-  mounted() {
-    this.setupAudio()
-  },
-
-  // On app destroyed
   unmounted() {
     this.closeAudio()
   },
 
   methods: {
-    change_stream_volume() {
+    changeStreamVolume() {
       audio.setVolume(this.stream_volume / 100)
     },
     change_volume() {
@@ -366,41 +360,33 @@ export default {
     closeAudio() {
       audio.stop()
       this.playing = false
+      this.loading = false
     },
     on_click_outside_outputs() {
       this.show_outputs_menu = false
     },
     playChannel() {
-      if (this.playing) {
-        return
-      }
       this.loading = true
       audio.play('/stream.mp3')
-      audio.setVolume(this.stream_volume / 100)
+      this.changeStreamVolume()
-    },
+      const a = audio.audio
-    setupAudio() {
+      if (a) {
-      const a = audio.setup()
+        a.addEventListener('waiting', () => {
-      a.addEventListener('waiting', () => {
+          this.playing = false
-        this.playing = false
+          this.loading = true
-        this.loading = true
-      })
-      a.addEventListener('playing', () => {
-        this.playing = true
-        this.loading = false
-      })
-      a.addEventListener('ended', () => {
-        this.playing = false
-        this.loading = false
-      })
-      a.addEventListener('error', () => {
-        this.closeAudio()
-        this.notificationsStore.add({
-          text: this.$t('navigation.stream-error'),
-          type: 'danger'
         })
-        this.playing = false
+        a.addEventListener('playing', () => {
-        this.loading = false
+          this.playing = true
-      })
+          this.loading = false
+        })
+        a.addEventListener('ended', () => {
+          this.playing = false
+          this.loading = false
+        })
+        a.addEventListener('error', () => {
+          this.closeAudio()
+        })
+      }
     },
     togglePlay() {
       if (this.loading) {
@@ -408,8 +394,9 @@ export default {
       }
       if (this.playing) {
         this.closeAudio()
+      } else {
+        this.playChannel()
       }
-      this.playChannel()
     },
     toggle_mute_volume() {
       this.player.volume = this.player.volume > 0 ? 0 : this.old_volume

web-src/src/lib/Audio.js

@@ -1,59 +1,28 @@
-/**
- * Audio handler object
- * Inspired by https://github.com/rainner/soma-fm-player
- * (released under MIT licence)
- */
 export default {
-  audio: new Audio(),
+  audio: null,
-  context: null,
+  play(url) {
-
+    this.audio = new Audio(`${String(url || '')}?x=${Date.now()}`)
-  // Play audio source url
+    this.audio.crossOrigin = 'anonymous'
-  play(source) {
+    const context = new (window.AudioContext || window.webkitAudioContext)()
-    this.stop()
+    const source = context.createMediaElementSource(this.audio)
-    this.context.resume().then(() => {
+    source.connect(context.destination)
-      this.audio.src = `${String(source || '')}?x=${Date.now()}`
+    this.audio.addEventListener('canplay', () => {
-      this.audio.crossOrigin = 'anonymous'
+      context.resume().then(() => {
-      this.audio.load()
+        this.audio.play()
+      })
     })
+    this.audio.load()
   },
-
-  // Set audio volume
   setVolume(volume) {
     if (this.audio) {
-      this.audio.volume = Math.min(1, Math.max(0, parseFloat(volume) || 0.0))
+      this.audio.volume = Math.max(0, Math.min(1, Number(volume) || 0))
     }
   },
-
-  // Setup audio routing
-  setup() {
-    this.context = new (window.AudioContext || window.webkitAudioContext)()
-    const source = this.context.createMediaElementSource(this.audio)
-    source.connect(this.context.destination)
-    this.audio.addEventListener('canplaythrough', () => {
-      this.audio.play()
-    })
-    this.audio.addEventListener('canplay', () => {
-      this.audio.play()
-    })
-    return this.audio
-  },
-
-  // Stop playing audio
   stop() {
     try {
-      this.audio.pause()
+      this.audio?.pause()
     } catch (error) {
-      // Continue regardless of error
+      //Do nothing
-    }
-    try {
-      this.audio.stop()
-    } catch (error) {
-      // Continue regardless of error
-    }
-    try {
-      this.audio.close()
-    } catch (error) {
-      // Continue regardless of error
     }
   }
 }