I made a notebook showing the basics of working with an audio sample in JavaScript. Typically when analyzing a sample, you will want to select a region and hear how it sounds before doing further work with it, and this notebook shows how to do that.
It works, but there are few things I’m not satisfied with:
Selecting the audio region with two range inputs is awkward. Typically for audio data, you want to set the start and end points precisely. Is there some way to find out when a data point is clicked using Observable Plot?
There is a moire effect when changing the selection size.
Although it seems fast enough, there’s no need to regenerate the WAV file every time while moving the sliders. This generates lots of garbage. Is there a nice way to stop automatic updates to some cells until the user is done changing the selection?
There’s currently no way to get mouse clicks from Plot, but interaction is on the roadmap.
I think the Moire is because the data binning function creates spikes that move ever so slightly between different selections. Perhaps in addition to the binning, you could use a window function or a line simplification algorithm to reduce the number of points along the x axis.
To rate-limit the WAV generation function, you can create an intermediary function that depends on the start and stop values and creates a function with a promise or timeout that then assigns those values to the ones the wave generator depends on. When it gets triggered, it looks for an existing timeout and cancels it (so fast calls keep canceling and recreating that function), and once the timeout expires, the values get assigned and the WAV generator runs.
That was a lot of words, let me know if this helps or if you want me to turn this into code
