mindboost-rnbo-test-project/components/Player/Player.js

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