Using setSource with audio context and buffer

[Christilut]

Currently I'm loading audio into Peaks through init as such:

    const audioContext: AudioContext = new AudioContext()
    const arrayBuffer = new Uint8Array(await readFile(location)).buffer
    const dataUri = 'data:' + getHowlerMimetype(location) + ';base64,' + base64ArrayBuffer(arrayBuffer)

    const audioBuffer: AudioBuffer = await audioContext.decodeAudioData(arrayBuffer)

 this.peaks = await Peaks.init({
      containers: {
        overview: this.overviewContainer,
        zoomview: this.container
      },
      mediaElement: undefined as any,
      webAudio: {
        audioContext,
        audioBuffer
      }
})

Full config in #349 (using Howler as player).

This works but I'd like to re-use Peaks without doing a re-init when I change audio file.

According to the documentation I can use setSource so I tried this:

      this.peaks.setSource({
        webAudio: {
          audioContext,
          audioBuffer
        }
      }, () => {
        console.log('loaded')
      })

The callback fires but no waveform is loaded in Peaks.

[chrisn]

Does your player emit a player.canplay event?

[Christilut]

I added these 2 events to the player and neither fires:

    this.peaks.on('player.canplay', function () {
      console.log('canplay')
    })

    this.peaks.on('player.error', function () {
      console.log('error')
    })

This is my player config:

      player: {
        init: (eventEmitter) => {
          this.eventEmitter = eventEmitter

          this.eventEmitter.emit('player.canplay')

          setInterval(() => {
            const time = this.getCurrentTime()

            eventEmitter.emit('player.timeupdate', time)

            if (time >= this.getDuration()) {
              this.howl.stop()
            }
          }, 0.25)
        },

        destroy: () => {
          this.howl?.unload()
        },

        play: () => {
          this.howl.play()
          this.playing = true

          this.eventEmitter.emit('player.play', this.getCurrentTime())
        },

        pause: () => {
          this.howl.pause()
          this.playing = false

          this.eventEmitter.emit('player.pause', this.getCurrentTime())
        },

        seek: (seconds) => {
          this.howl.seek(seconds)

          this.eventEmitter.emit('player.seeked', this.getCurrentTime())
          this.eventEmitter.emit('player.timeupdate', this.getCurrentTime())
        },

        isPlaying: () => {
          return this.howl.playing()
        },

        isSeeking: () => {
          return false
        },

        getCurrentTime: () => {
          return this.getCurrentTime()
        },

        getDuration: () => {
          return this.getDuration()
        }
      }

[Christilut]

Same problem when using an arraybuffer:

      const createFromAudio = promisify(WaveformData.createFromAudio)

      const arrayBuffer = new Uint8Array(await readFile(track.location)).buffer

      const audioContext: AudioContext = new AudioContext()

      const waveform = await createFromAudio({
        audio_context: audioContext,
        array_buffer: arrayBuffer
      })

      const waveformPath: string = join(DATA_PATH, WAVEFORM_FOLDER_NAME, track._id, WAVEFORM_PEAKS_FILENAME)

      await outputFile(waveformPath, Buffer.from(waveform._adapter._data.buffer))

      this.peaks.setSource({
        waveformData: {
          arraybuffer: await readFile(path to file)
        }
    })

[Christilut]

Managed to get it working, there were several problems:

• I used a Uint8Array instead of ArrayBuffer and the isArrayBuffer function did not account for that. I changed my code to readFile(path).buffer.buffer which exposes the underlying array buffer.

• I used Peaks.init() as a promise but it's not a promise, but a regular callback. Thus I did not see the error messages Peaks was giving me.

• It's not possible to use setSource without calling init with data first. So I rewrote my code to call the init() with my array buffer on first load and any subsequent load uses setSource instead. Personally I think it shouldn't work like that and I had to dig in the source to figure this out.

• Peaks requires a mediaUrl in the setSource method even though I don't use it. If I do supply that parameter, it will error because the URL does not exist. I had to make this optional in the Peaks source, see PR.