diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue index 8eea3a69..8138540f 100644 --- a/web-src/src/components/NavbarBottom.vue +++ b/web-src/src/components/NavbarBottom.vue @@ -84,7 +84,7 @@ :disabled="!playing" :max="100" :cursor="cursor" - @change="change_stream_volume" + @change="changeStreamVolume" /> @@ -243,7 +243,7 @@ :disabled="!playing" :max="100" :cursor="cursor" - @change="change_stream_volume" + @change="changeStreamVolume" /> @@ -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) - }, - setupAudio() { - const a = audio.setup() - a.addEventListener('waiting', () => { - this.playing = false - 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.changeStreamVolume() + const a = audio.audio + if (a) { + a.addEventListener('waiting', () => { + this.playing = false + this.loading = true }) - this.playing = false - this.loading = false - }) + a.addEventListener('playing', () => { + 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 diff --git a/web-src/src/lib/Audio.js b/web-src/src/lib/Audio.js index 6dc858ba..db95f407 100644 --- a/web-src/src/lib/Audio.js +++ b/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(), - context: null, - - // Play audio source url - play(source) { - this.stop() - this.context.resume().then(() => { - this.audio.src = `${String(source || '')}?x=${Date.now()}` - this.audio.crossOrigin = 'anonymous' - this.audio.load() + audio: null, + play(url) { + this.audio = new Audio(`${String(url || '')}?x=${Date.now()}`) + this.audio.crossOrigin = 'anonymous' + const context = new (window.AudioContext || window.webkitAudioContext)() + const source = context.createMediaElementSource(this.audio) + source.connect(context.destination) + this.audio.addEventListener('canplay', () => { + context.resume().then(() => { + 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 - } - try { - this.audio.stop() - } catch (error) { - // Continue regardless of error - } - try { - this.audio.close() - } catch (error) { - // Continue regardless of error + //Do nothing } } }