loadDecodedBuffer in version 7

[vishal-4way]

hello all

I already checked the #2806

while using >
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);

I am getting this error (Uncaught (in promise) DOMException: The element has no supported sources.) at
wavesurfer7.js:1

Is there any alternative way for using loadDecodedBuffer as because of using blob don't no why Iphone increase the total resources size, single audio file becomes two for the browser using blog

and you guys are planning for adding loadDecodedBuffer method in the version 7 ?

thanks!

[katspaugh]

You could try loadBlob:

const blob = new Blob([audioBuffer], { type: 'audio/wav' })
const peaks = [ audioBuffer.getChannelData(0), audioBuffer.getChannelData(1) ]
const duration = audioBuffer.duration
wavesurfer.loadBlob(blob, peaks, duration);

[vishal-4way]

Still I am getting this error (Uncaught (in promise) DOMException: The element has no supported sources.) at
wavesurfer7.js:1

[katspaugh]

Show your code.
If you read #2806, there's an edit saying you need to also set the header bytes as per https://stackoverflow.com/questions/62172398/convert-audiobuffer-to-arraybuffer-blob-for-wav-download/62173861#62173861

[vishal-4way]

thanks !
after applying this https://stackoverflow.com/questions/62172398/convert-audiobuffer-to-arraybuffer-blob-for-wav-download/62173861#62173861

we can play the songs thanks !

Is there any alternative way for using loadDecodedBuffer as because of using blob don't no why Iphone increase the total resources size, single audio file becomes two for the browser using blog

and you guys are planning for adding loadDecodedBuffer method in the version 7 ?

[katspaugh]

No plans to bring back loadDecodedBuffer as we're not using a Web Audio buffer for playback anymore.

[vishal-4way]

thanks!

[lin2019]

When loading, the waveform of a single channel can be displayed, but it quickly becomes a complete waveform again

[lin2019]

In other words, I have a dual channel audio, but I only want to display the left channel

[Mattk70]

@katspaugh wrote:

You could try loadBlob:

const blob = new Blob([audioBuffer], { type: 'audio/wav' })
const peaks = [ audioBuffer.getChannelData(0), audioBuffer.getChannelData(1) ]
const duration = audioBuffer.duration
wavesurfer.loadBlob(blob, peaks, duration);

Since loadBlob calls loadAudio internally and this function will create peaks and duration if not supplied, it seems for me there is a simpler solution. Based on your suggestion I had written:

async function loadBuffer(audio){ //audio is an ArrayBuffer containing s16le audio with a wave header
        // Recreate TypedArray
        const int16Array = new Int16Array(audio.buffer);

        // Convert to Float32Array (Web Audio API uses Float32 samples)
        const float32Array = new Float32Array(int16Array.length);
        for (let i = 0; i < int16Array.length; i++) {
            float32Array[i] = int16Array[i] / 32768; // Normalize from Int16 to Float32
        }

        // Create AudioBuffer using AudioContext
        const audioContext = new AudioContext();
        const audioBuffer = audioContext.createBuffer(1, float32Array.length, sampleRate); // Mono channel
        // Populate the AudioBuffer with float32Array data
        audioBuffer.copyToChannel(float32Array, 0);
        const blob = new Blob([audio], { type: 'audio/wav' });
        const peaks = [ audioBuffer.getChannelData(0) ]
        const duration = audioBuffer.duration
        await wavesurfer.loadBlob(blob, peaks, duration);
}

However, the following works just fine:

async function loadBuffer(audio){
        const blob = new Blob([audio], { type: 'audio/wav' });
        await wavesurfer.loadBlob(blob);
}

[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.

[katspaugh]

v7 is no longer Web Audio-centric, and that's the reason to not support this use case. Wavesurfer wants a URL, a blob, or a media element as its input.

The Web Audio implementation is v7 is an emulation of the HTMLMediaElement interface: https://raw.githubusercontent.com/katspaugh/wavesurfer.js/main/src/webaudio.ts. You can copy it to make your own pre-decoded buffer-based custom media element.

[Guillermogsjc]

thanks @katspaugh for the clue to implement the pre-decoded buffer

[Lonli-Lokli]

I need to load reversed audio without losing a quality, unfortunately with Blob it happens