Generating the waveform for an audio from an S3 bucket

[ManimMadhav]

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.

[katspaugh]

Looks like the files are served without a content type. Google for how to set a MIME type on S3.

[ManimMadhav]

turns out the code worked only when I'm using .mp3 files, but .wav does not seem to work for some reason. i'm using the same code to test both file formats.

[ManimMadhav]

@katspaugh is it possible for you to provide some insights (if any), as to why a .mp3 file works from a S3 bucket but not a .wav? We have the same bucket and same permissions set for each file on AWS yet a .mp3 renders but a .wav doesn't.
if you want i can DM you the links for the sample audio files of both formats we're testing out.

[ManimMadhav]

hey @katspaugh. were you able to run the code snippets?

[katspaugh]

Yeah, I'm also seeing Unable to decode audio data. It might have to do with the file encoding. I see that it's 1000 Hz mono, that's a pretty non-standard sample rate. Try encoding it with at least 8k Hz.

[ManimMadhav]

hi, thanks for you help! it actually turned out to be a sampling rate issue. i tried a 16k file and it worked perfectly.
what is the range of sampling rates that Wavesurfer can handle?

[katspaugh]

Web Audio supports sample rates as low as 8k as per the spec, however Chrome supports 3k.

[katspaugh]

I don't have capacity to work on this, but will happily accept a PR should you find a solution.