Where is loadDecodedBuffer in v7?

[tmtakashi]

Hi, I would like to load the buffer in AudioContext in memory, instead of reading from a URL.
It seems like there was a method called loadDecodedBuffer in the previous version, but I couldn't find it in v7. Is it unavailable?

[katspaugh]

Edit: this answer is not fully correct, you cannot directly convert an audio buffer to a blob, see https://stackoverflow.com/a/62173861

You can load a decoded buffer like this in v7:

const url = URL.createObjectURL(new Blob([audioBuffer], { type: 'audio/wav' }))
const peaks = [ audioBuffer.getChannelData(0), audioBuffer.getChannelData(1) ]
const duration = audioBuffer.duration

wavesurfer.load(url, peaks, duration)

Hope this helps.

[tmtakashi]

thank you! it works!

[Guillermogsjc]

hello @katspaugh,

and what happens if you want to provide an ArrayBuffer representing the wav as it was done in v6 like this
for a componente of type WebAudio

const audioContext = new (window.AudioContext)();
const audioBuffer = await audioContext.decodeAudioData(elementArrayBuffer);
this.singleWave.loadDecodedBuffer(audioBuffer);

in this example there is no blob or explicit uri generated. Maybe you want to avoid the browser showing the audio blob or any uri with the audio

In the example use case i have an audio encrypted, and I decrypt it into an ArrayBuffer and then provide it to wavesurfer component as stated, being opaque for the console and network the decrypted audio

By dropping this loadDecodedBuffer and force the blob way, you lose this use case, not clear why.

On the use case exposed to access the decrypted audio you need to go against the memory directly, it is several points harder than exposing it thorugh a blob or a URL.

[hanna-becker]

I get this compilation error: TS2322: Type  AudioBuffer  is not assignable to type  BlobPart

Use case: I'm trying to clone a wavesurfer instance with the following code:

export const cloneWavesurferInstance = (originalWavesurferInstance: WaveSurfer) => {
  const newWaveSurferInstance = WaveSurfer.create({
    container: originalWavesurferInstance.options.container,
    waveColor: originalWavesurferInstance.options.waveColor,
    progressColor: originalWavesurferInstance.options.progressColor,
    height: originalWavesurferInstance.options.height,
    barWidth: originalWavesurferInstance.options.barWidth,
  });
  const audioBuffer = originalWavesurferInstance.getDecodedData();
  const url = URL.createObjectURL(new Blob([audioBuffer], { type: 'audio/mpeg' }));
  const peaks = [audioBuffer.getChannelData(0), audioBuffer.getChannelData(1)];
  const duration = audioBuffer.duration;
  newWaveSurferInstance.load(url, peaks, duration);
  return newWaveSurferInstance;
};

In v6, this worked:

export const cloneWavesurferInstance = (originalWavesurferInstance) => {
  const newWaveSurferInstance = WaveSurfer.create({
    container: originalWavesurferInstance.container,
    waveColor: originalWavesurferInstance.params.waveColor,
    progressColor: originalWavesurferInstance.params.progressColor,
    height: originalWavesurferInstance.params.height,
    barWidth: originalWavesurferInstance.params.barWidth,
  });
  newWaveSurferInstance.loadDecodedBuffer(originalWavesurferInstance.backend.buffer);
  return newWaveSurferInstance;
};

What am I doing wrong?

[katspaugh]

You can’t simply convert an audio buffer to a wav blob, see https://stackoverflow.com/a/62173861

V6 used a web audio buffer node for playback but v7 doesn’t.

You could just pass the original audio URL. It should be cached by the browser anyway.