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