diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue index 8378d8fe..caf89b45 100644 --- a/web-src/src/components/NavbarBottom.vue +++ b/web-src/src/components/NavbarBottom.vue @@ -266,7 +266,7 @@ import PlayerButtonRepeat from '@/components/PlayerButtonRepeat.vue' import PlayerButtonSeekBack from '@/components/PlayerButtonSeekBack.vue' import PlayerButtonSeekForward from '@/components/PlayerButtonSeekForward.vue' import PlayerButtonShuffle from '@/components/PlayerButtonShuffle.vue' -import _audio from '@/lib/Audio' +import audio from '@/lib/Audio' import { mdiCancel } from '@mdi/js' import webapi from '@/webapi' @@ -290,16 +290,31 @@ export default { data() { return { cursor: mdiCancel, + loading: false, old_volume: 0, playing: false, - loading: false, - stream_volume: 10, + show_desktop_outputs_menu: false, show_outputs_menu: false, - show_desktop_outputs_menu: false + stream_volume: 10 } }, computed: { + config() { + return this.$store.state.config + }, + is_now_playing_page() { + return this.$route.name === 'now-playing' + }, + now_playing() { + return this.$store.getters.now_playing + }, + outputs() { + return this.$store.state.outputs + }, + player() { + return this.$store.state.player + }, show_player_menu: { get() { return this.$store.state.show_player_menu @@ -307,24 +322,6 @@ export default { set(value) { this.$store.commit(types.SHOW_PLAYER_MENU, value) } - }, - - now_playing() { - return this.$store.getters.now_playing - }, - is_now_playing_page() { - return this.$route.name === 'now-playing' - }, - outputs() { - return this.$store.state.outputs - }, - - player() { - return this.$store.state.player - }, - - config() { - return this.$store.state.config } }, @@ -347,21 +344,36 @@ export default { }, methods: { - on_click_outside_outputs() { - this.show_outputs_menu = false - }, - change_volume() { webapi.player_volume(this.player.volume) }, - + change_stream_volume() { + audio.setVolume(this.stream_volume / 100) + }, toggle_mute_volume() { this.player.volume = this.player.volume > 0 ? 0 : this.old_volume this.change_volume() }, + closeAudio() { + audio.stop() + this.playing = false + }, + on_click_outside_outputs() { + this.show_outputs_menu = false + }, + playChannel() { + if (this.playing) { + return + } + + const channel = '/stream.mp3' + this.loading = true + audio.play(channel) + audio.setVolume(this.stream_volume / 100) + }, setupAudio() { - const a = _audio.setupAudio() + const a = audio.setup() a.addEventListener('waiting', (e) => { this.playing = false @@ -385,24 +397,6 @@ export default { this.loading = false }) }, - - // Close active audio - closeAudio() { - _audio.stopAudio() - this.playing = false - }, - - playChannel() { - if (this.playing) { - return - } - - const channel = '/stream.mp3' - this.loading = true - _audio.playSource(channel) - _audio.setVolume(this.stream_volume / 100) - }, - togglePlay() { if (this.loading) { return @@ -411,10 +405,6 @@ export default { return this.closeAudio() } return this.playChannel() - }, - - change_stream_volume() { - _audio.setVolume(this.stream_volume / 100) } } } diff --git a/web-src/src/lib/Audio.js b/web-src/src/lib/Audio.js index 98fd9200..14bf68df 100644 --- a/web-src/src/lib/Audio.js +++ b/web-src/src/lib/Audio.js @@ -4,54 +4,54 @@ * (released under MIT licence) */ export default { - _audio: new Audio(), - _context: null, + audio: new Audio(), + context: null, - // Setup audio routing - setupAudio() { - this._context = new (window.AudioContext || window.webkitAudioContext)() - const source = this._context.createMediaElementSource(this._audio) - source.connect(this._context.destination) - this._audio.addEventListener('canplaythrough', (e) => { - this._audio.play() + // 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() }) - this._audio.addEventListener('canplay', (e) => { - this._audio.play() - }) - return this._audio }, // Set audio volume setVolume(volume) { - if (this._audio) { - this._audio.volume = Math.min(1, Math.max(0, parseFloat(volume) || 0.0)) + if (this.audio) { + this.audio.volume = Math.min(1, Math.max(0, parseFloat(volume) || 0.0)) } }, - // Play audio source url - playSource(source) { - this.stopAudio() - this._context.resume().then(() => { - this._audio.src = `${String(source || '')}?x=${Date.now()}` - this._audio.crossOrigin = 'anonymous' - this._audio.load() + // 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', (e) => { + this.audio.play() }) + this.audio.addEventListener('canplay', (e) => { + this.audio.play() + }) + return this.audio }, // Stop playing audio - stopAudio() { + stop() { try { - this._audio.pause() + this.audio.pause() } catch (e) { // Continue regardless of error } try { - this._audio.stop() + this.audio.stop() } catch (e) { // Continue regardless of error } try { - this._audio.close() + this.audio.close() } catch (e) { // Continue regardless of error }