How to load an audio file with a custom sample rate - 1024 Hz? #2768

dizcza · 2023-04-30T18:00:40Z

dizcza
Apr 30, 2023

I'm reading a WAV file from an SD card of my ESP32 board serving a web file server.

The official wavesurfer examples work fine but the problem is that my audio file sample rate is 1024 Hz. This is not an audio file, in fact, it's the output of an I2C differential pressure sensor that outputs at a 1024 Hz sample rate.

I've been searching for a solution to (1) load a custom raw audio file and (2) plot its spectrogram. WaveSurfer AudioContext does not support such a sample rate:

Uncaught DOMException: AudioContext constructor: Sample rate 1024 is not in the range [8000, 192000]

The full script:

<!DOCTYPE html>
<head><meta charset='UTF-8'/>
<script src="https://unpkg.com/wavesurfer.js"></script>
</head>

<body>
<div id="waveform"></div>
<div id="wave-spectrogram"></div>

<button class="btn btn-primary" onclick="wavesurfer.playPause()">
  <i class="glyphicon glyphicon-play"></i>
  Play/Pause
</button>
</body>

<script>
const audioCtx = new AudioContext( { sampleRate: 1024 } );

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: '#D2EDD4',
    progressColor: '#46B54D',
    audioContext: audioCtx
});

wavesurfer.on('ready', function () {
  var spectrogram = Object.create(WaveSurfer.Spectrogram);
  spectrogram.init({
    wavesurfer: wavesurfer,
    container: "#wave-spectrogram",
    fftSamples: 128,
    labels: true
  });
});

wavesurfer.load('/fs/SDP_amplified.wav');
</script>
</html>

Is it a strong NO for my case and should I look for something else?

Thanks.

dizcza · 2023-04-30T18:11:16Z

dizcza
Apr 30, 2023
Author

This audio file can be easily imported into Audacity, for example, where I can specify the input sample rate. And I can play it successfully.

0 replies

katspaugh · 2023-04-30T18:51:41Z

katspaugh
Apr 30, 2023
Maintainer

The lowest sample rate in Web Audio is indeed 8kHz, although I found Chrome able to go down to 3kHz.
It should however resample a lower/higher sample rate audio file to its own sample rate. What happens if you don’t specify an AudioContext?

0 replies

dizcza · 2023-04-30T18:56:05Z

dizcza
Apr 30, 2023
Author

What happens if you don’t specify an AudioContext?

Nothing happens. The file is not loaded and I cannot play it.

17 replies

dizcza May 2, 2023
Author

When I set the backend to "MediaElement" and click Play, I get

wavesurfer.js:2017 Uncaught (in promise) DOMException: The element has no supported sources.
play	@	wavesurfer.js:2017
play	@	wavesurfer.js:4146
playPause	@	wavesurfer.js:4184
onclick	@	waveform:11

and it does not play

katspaugh May 6, 2023
Maintainer

The Spectrogram plugin is now available also in the alpha version, and there it will use pre-decoded peaks if provided.
Still your main problem is probably playback, which apparently browsers don't support.

katspaugh May 6, 2023
Maintainer

Someone has asked a similar question recently: #2774 (reply in thread)
Maybe that solution would also work for you. Basically, load a "fake" audio URL, but pass the correct pre-decoded peaks and duration.

dizcza May 6, 2023
Author

Yeah, I come back to the upsampling idea again: upsampling 3X will solve all three issues (Chrome is able to open an audio file with the 3k rate). Copying the element 3 times introduces spurious frequency in the upsampled audio signal. So I was thinking to

open a stream buffer in JS (read a file in chunks or read it completely)
apply the 3x upsample FIR filter (or do it in the FFT - overkill)
feed the stream to WaveSurfer playback, waveform, and spectrogram calculation.

I'm not sure if WaveSurfer is able to do such things, i.e. providing a File object instead of the URL. In any case, I haven't seen any JS code to do upsampling without introducing spurious frequencies.

katspaugh May 6, 2023
Maintainer

You can always make a URL out of a file/blob.
I can't advise anything regarding upsampling though. Curious to know if you get it working!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to load an audio file with a custom sample rate - 1024 Hz? #2768

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 17 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to load an audio file with a custom sample rate - 1024 Hz? #2768

Uh oh!

dizcza Apr 30, 2023

Replies: 3 comments · 17 replies

Uh oh!

dizcza Apr 30, 2023 Author

Uh oh!

katspaugh Apr 30, 2023 Maintainer

Uh oh!

dizcza Apr 30, 2023 Author

Uh oh!

dizcza May 2, 2023 Author

Uh oh!

katspaugh May 6, 2023 Maintainer

Uh oh!

katspaugh May 6, 2023 Maintainer

Uh oh!

dizcza May 6, 2023 Author

Uh oh!

katspaugh May 6, 2023 Maintainer

dizcza
Apr 30, 2023

Replies: 3 comments 17 replies

dizcza
Apr 30, 2023
Author

katspaugh
Apr 30, 2023
Maintainer

dizcza
Apr 30, 2023
Author

dizcza May 2, 2023
Author

katspaugh May 6, 2023
Maintainer

katspaugh May 6, 2023
Maintainer

dizcza May 6, 2023
Author

katspaugh May 6, 2023
Maintainer