I am trying to plot the waveform of an audio file which is getting retrived from an S3 bucket.
However, when I try to load the URL into wavesurfer.load(), I get the following error:

Uncaught (in promise) DOMException: Failed to execute 'decodeAudioData' on 'BaseAudioContext': Unable to decode audio data.

So, to try and convert the audio to a format that can be decoded by Wavesurfer.js, I tried to convert the audio from the URL into a Blob:

let url = "my-s3-url";
function loadAudioFromUrl(url) {
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.arrayBuffer(); // Convert response to ArrayBuffer
        })
        .then(arrayBuffer => {
            // Load audio data into wavesurfer.js from the ArrayBuffer
            let x = new Blob([arrayBuffer]);
            wavesurfer.loadBlob(x);
        })
        .catch(error => {
            console.error('Error fetching or loading audio:', error);
        });
}
loadAudioFromUrl(url)

When I tried to execute the above code, this is the error I am getting:

GET http://127.0.0.1:5500/blob 404 (Not Found)

To fix this error I have tried to view the Blob that was created in the above code block in console:

let x= new Blob([arrayBuffer]);
console.log(x)

This is the response I am getting in console.
What can I possibly do to load the S3 audio? Because from this screenshot it’s evident that the Blob of the audio is getting created successfully but somehow Wavesurfer.js is unable to render it. Any suggestions possible? Thank you.