Initial commit

components/Player/Player.js

@@ -0,0 +1,221 @@
+import { Howl } from 'howler'
+
+function Player (playlist, location) {
+  this.playlist = playlist.value
+  this.location = location
+  this.index = 0
+}
+Player.prototype = {
+  setVolume (newVolume) {
+    if (newVolume.isNaN()) {
+      useNuxtApp().$logger.info('Passed volume to Player is NaN')
+      return
+    }
+    const song = this.playlist[this.index]
+    if (song.howl._html5) {
+      song.howl.volume(this.volume)
+    } else {
+      useNuxtApp().$logger.info('WebAudio is used, control value over a GainNode')
+    }
+  },
+  showMediaInformation (scenery) {
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: scenery,
+        artist: 'mindboost',
+        album: 'mindboost Originale',
+        artwork: [
+          { src: '/images/scenery/' + scenery + '.jpg', sizes: '96x96', type: 'image/jpeg' }
+        ]
+      })
+    }
+  },
+  createNewHowl (data) {
+    // useNuxtApp().$logger.log(`/${location}/${data.file}.m4a`)
+    //  const sound = new Howl({ src: [src], html5: true, onend: () => { sound.unload(); }, });
+    const myHowl = new Howl({
+      src: [`/${this.location}/${data.file}.m4a`, `/${this.location}}/${data.file}.ogg`],
+      html5: true,
+      loop: true,
+      autoplay: false,
+      mute: false,
+      onplay: () => {
+        useNuxtApp().$logger.info('PLAYING SOUND')
+        Howler.ctx.playbackRate = 1
+        this.showMediaInformation(data.file.charAt(0).toUpperCase())
+        // data.node = audioContext.createMediaElementSource(htmlElement)
+      },
+      onload: () => {
+        useNuxtApp().$logger.log('Loading state: ' + data)
+      },
+      onend: () => {
+        // Changed to arrow function
+        Howler.ctx.playbackRate = 0
+        data.sound = null
+        data.node = null
+        this.skipTo(this.index)
+      },
+      onpause: () => {
+        // Stop the wave animation.
+        Howler.ctx.playbackRate = 0
+        data.sound = null
+        data.node = null
+        data.howl = null
+      },
+      onstop: () => {
+        data.sound = null
+        data.node = null
+      }
+    })
+    return myHowl
+  },
+  initializeAudioNode (howl, index = 0) {
+    if (howl._html5) {
+      useNuxtApp().$logger.info('create audionode from HTML5 tag...')
+      const mediaAudioNode = Howler.ctx.createMediaElementSource(howl._sounds[0]._node)
+      this.playlist[index].node = mediaAudioNode
+      return mediaAudioNode
+    } else {
+      useNuxtApp().$logger.info('create audionode from Web Audio API...')
+      const audioContext = Howler.ctx
+      this.playlist[index].node = howl._sounds[0]._node
+      return howl._sounds[0]._node
+    }
+  },
+  play () {
+    useNuxtApp().$logger.info('play audionode on index ' + this.index)
+    useNuxtApp().$logger.info('Anzahl der Howls = ' + this.playlist.filter(item => item.howl !== null).length)
+    let sound = this.playlist[this.index].howl
+    if (!sound) {
+      this.skipTo(this.index)
+      sound = this.playlist[this.index].howl
+      sound.play()
+    }
+    const node = this.playlist[this.index].node
+    if (sound._html5) {
+      useNuxtApp().$logger.log('Audionode on html5 tag...', { sound })
+      sound.play()
+      // node.connect(Howler.ctx.destination)
+    } else {
+      useNuxtApp().$logger.log('Audionode on WebAudio node...', { sound })
+    }
+    // Get the Howl we want to manipulate.
+    const title = this.playlist[this.index].title
+    useNuxtApp().$logger.log('Audio Node', { sound })
+    sound.play()
+    useNuxtApp().$logger.log('Audio Node after play', { sound })
+    this.addMediaNavigationHandling(title)
+  },
+  initializeHowl (index = 0) {
+    const data = this.playlist[index]
+    this.index = index
+    let sound
+    // If we already loaded this track, use the current one.
+    if (data.howl) {
+      sound = data.howl
+    } else {
+      sound = data.howl = this.createNewHowl(data)
+      useNuxtApp().$logger.log({ sound })
+      // data.node = this.initializeAudioNode(data.howl, index)
+      useNuxtApp().$logger.log({ data })
+    }
+    return sound
+  },
+  pause () {
+    // Get the Howl we want to manipulate.
+    const testval = this.playlist[this.index]
+    const testvalthis = this.playlist[this.index]
+    useNuxtApp().$logger.log({ testval }, { testvalthis })
+    if (this.playlist[this.index].howl) {
+      const sound = this.playlist[this.index].howl
+      // Pause the sound.
+      sound.pause()
+    }
+    this.removeMediaNavigationHandling()
+  },
+  // Similarly, refactor other methods to use arrow functions where needed
+
+  /**
+     * Skip to the next or previous track.
+     * @param  {String} direction 'next' or 'prev'.
+     */
+  skip (direction) {
+    let index = 0
+    if (direction === 'prev') {
+      index = this.index - 1
+      if (index < 0) {
+        index = this.playlist.length - 1
+      }
+    } else {
+      index = this.index + 1
+      if (index >= this.playlist.length) {
+        index = 0
+      }
+    }
+    this.skipTo(index)
+  },
+  skipTo (index) {
+    // Stop the current track.
+    if (this.playlist[this.index].howl) {
+      this.playlist[this.index].howl.stop()
+      if (this.playlist[this.index].howl._webAudio) { this.playlist[this.index].node.disconnect() }
+      this.playlist[this.index].node = null
+      this.playlist[this.index].howl = null
+    }
+    // Play the new track.
+    this.initializeHowl(index)
+    // sound.play()
+  },
+  setBarWidth (val) {
+    // Update the display on the slider.
+    const barWidth = (val * 90) / 100
+    barFull.style.width = `${barWidth * 100}%`
+    sliderBtn.style.left = `${window.innerWidth * barWidth + window.innerWidth * 0.05 - 25}px`
+  },
+  seek (per) {
+    // Get the Howl we want to manipulate.
+    const sound = this.playlist[this.index].howl
+
+    // Convert the percent into a seek position.
+    if (sound.playing()) {
+      sound.seek(sound.duration() * per)
+    }
+  },
+  step () {
+    // Use arrow function to preserve `this` context for `requestAnimationFrame`
+    const stepUpdate = () => {
+      // Get the Howl we want to manipulate.
+      const sound = this.playlist[this.index].howl
+
+      // Determine our current seek position.
+      const seek = sound.seek() || 0
+      timer.innerHTML = this.formatTime(Math.round(seek))
+      progress.style.width = `${(seek / sound.duration()) * 100 || 0}%`
+
+      // If the sound is still playing, continue stepping.
+      if (sound.playing()) {
+        requestAnimationFrame(stepUpdate)
+      }
+    }
+
+    requestAnimationFrame(stepUpdate)
+  },
+  togglePlaylist () {
+    const display = (playlist.style.display === 'block') ? 'none' : 'block'
+
+    setTimeout(() => {
+      playlist.style.display = display
+    }, (display === 'block') ? 0 : 500)
+    playlist.className = (display === 'block') ? 'fadein' : 'fadeout'
+  },
+  toggleVolume () {
+    const display = (volumeDivRef.style.display === 'block') ? 'none' : 'block'
+
+    setTimeout(() => {
+      volumeDivRef.style.display = display
+    }, (display === 'block') ? 0 : 500)
+    volumeDivRef.className = (display === 'block') ? 'fadein' : 'fadeout'
+  }
+}
+
+export default Player