[web] Lint source code and rename some audio methods

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,
+      show_desktop_outputs_menu: false,
-      stream_volume: 10,
       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)
     }
   }
 }

web-src/src/lib/Audio.js

@@ -4,54 +4,54 @@
  * (released under MIT licence)
  */
 export default {
-  _audio: new Audio(),
+  audio: new Audio(),
-  _context: null,
+  context: null,
 
-  // Setup audio routing
+  // Play audio source url
-  setupAudio() {
+  play(source) {
-    this._context = new (window.AudioContext || window.webkitAudioContext)()
+    this.stop()
-    const source = this._context.createMediaElementSource(this._audio)
+    this.context.resume().then(() => {
-    source.connect(this._context.destination)
+      this.audio.src = `${String(source || '')}?x=${Date.now()}`
-    this._audio.addEventListener('canplaythrough', (e) => {
+      this.audio.crossOrigin = 'anonymous'
-      this._audio.play()
+      this.audio.load()
     })
-    this._audio.addEventListener('canplay', (e) => {
-      this._audio.play()
-    })
-    return this._audio
   },
 
   // Set audio volume
   setVolume(volume) {
-    if (this._audio) {
+    if (this.audio) {
-      this._audio.volume = Math.min(1, Math.max(0, parseFloat(volume) || 0.0))
+      this.audio.volume = Math.min(1, Math.max(0, parseFloat(volume) || 0.0))
     }
   },
 
-  // Play audio source url
+  // Setup audio routing
-  playSource(source) {
+  setup() {
-    this.stopAudio()
+    this.context = new (window.AudioContext || window.webkitAudioContext)()
-    this._context.resume().then(() => {
+    const source = this.context.createMediaElementSource(this.audio)
-      this._audio.src = `${String(source || '')}?x=${Date.now()}`
+    source.connect(this.context.destination)
-      this._audio.crossOrigin = 'anonymous'
+    this.audio.addEventListener('canplaythrough', (e) => {
-      this._audio.load()
+      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
     }