Save waveform from WebAudio processing

[jgentes]

It looks from the readme as if the waveform data can be stored if using audiowaveform, either as binary or JSON.

My expectation is that the browser would not have to spend time analyzing the audio to generate the waveform if it were available via the dataUri, so it would appear nearly instantly. Is that correct?

If so, is there a similar way to save the waveform data if using an audioBuffer? I save the buffer, but Peaks still has to analyze it to generate the waveform.

[chrisn]

It looks from the readme as if the waveform data can be stored if using audiowaveform, either as binary or JSON.

My expectation is that the browser would not have to spend time analyzing the audio to generate the waveform if it were available via the dataUri, so it would appear nearly instantly. Is that correct?

That's right, yes. The idea is to precompute and store the data server-side, which saves time and memory in the browser.

If so, is there a similar way to save the waveform data if using an audioBuffer? I save the buffer, but Peaks still has to analyze it to generate the waveform.

Peaks.js uses waveform-data.js to create the waveform data, but doesn't currently provide a documented way get at the data.

Peaks.init(options, function(err, peaks) {
  console.log(peaks._waveformData); // private data!
});

[jgentes]

Awesome! I'm already using zoomView.displaying, zoomView._scale, and zoomView._pixelLength :)

// update slider controls on display change
// @ts-ignore
waveform.on('zoomview.displaying', updateScroll)

const updateScroll = (start: number) => {
  // @ts-ignore
  const scroll = (start * track.sampleRate) / zoomView?._scale
  if (slider) slider.scrollLeft = scroll
}

setSliderControl({
  // @ts-ignore
  width: zoomView?._pixelLength,
})

[chrisn]

OK, this is fine, with the usual caveats around using undocumented features

[jgentes]

I know this is undocumented and unsupported, but just in case I'm missing something obvious.. if I store the peaks._waveformData and then try to retrieve it (from IndexedDb) and use it in the dataUri I get the error: Peaks.init(): Unable to determine a compatible dataUri format for this browser

Here's what it looks like:

I tried serializing the waveformData, but it's circular so no good.

[chrisn]

The next version release of waveform-data.js should help with that - https://github.com/bbc/waveform-data.js/blob/master/doc/API.md#waveformDatatojson

[jgentes]

For future readers, here's what I did to get this working:

import WaveformData from 'waveform-data'

const arrayBuffer = await file.arrayBuffer()
const audioCtx = new window.AudioContext()
const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer)

await new Promise<void>(resolve =>
  WaveformData.createFromAudio(
    {
      audio_context: audioCtx,
      audio_buffer: audioBuffer,
      scale: 64
    },
    (err, wave: WaveformData) => {
      if (err) throw err
      peakOptions.waveformData = { json: wave.toJSON() }
      resolve()
    }
  )
)

Peaks.init(peakOptions, .....)