You take a buffer of samples and then return them unmodified, echoing
the audio back out. For example, when I built my
bass whistle, that’s where I started.
Today David and I were
trying to see if we could build my bucket-brigade singing idea in the
browser, and we couldn’t find a fully worked echo example. I now have
something that works, but it’s kind of silly and it seems like there
must be a better way.
The way I would expect this to work with the (new, experimental, not
supported everywhere yet) Web Audio API is that you write an
AudioWorklet. This is a way to set up JS to run off the main thread,
where number crunching won’t block the UI and make the page
unresponsive. I’d like to attach the worklet’s input to the
microphone, output to the speaker, and that would be it. Except, as
far as I can tell, there’s no way to pipe the microphone directly to
an AudioWorklet.
To read audio samples from the user the
recommendation is to make a ScriptProcessorNode and
give it an audioprocess callback. This runs on the main
thread, though, and so when you look at MDN this is marked
as deprecated. It says to use AudioWorklet instead,
and I wish I could!
What I ended up doing was recording the audio on the main thread,
messaging that over to the worklet, and the having the worklet play
it. Here’s a demo, which relies on experimental Web Audio features
that so far are only implemented in Blink-based browsers: echo-demo.
Web Audio Echo?
Link post
Update 2020-04-19: This actually can be done fully in AudioWorklet: echo-demo-v2. Thanks stellartux!
The hello world of audio processing is an echo:
You take a buffer of samples and then return them unmodified, echoing the audio back out. For example, when I built my bass whistle, that’s where I started.Today David and I were trying to see if we could build my bucket-brigade singing idea in the browser, and we couldn’t find a fully worked echo example. I now have something that works, but it’s kind of silly and it seems like there must be a better way.
The way I would expect this to work with the (new, experimental, not supported everywhere yet) Web Audio API is that you write an AudioWorklet. This is a way to set up JS to run off the main thread, where number crunching won’t block the UI and make the page unresponsive. I’d like to attach the worklet’s input to the microphone, output to the speaker, and that would be it. Except, as far as I can tell, there’s no way to pipe the microphone directly to an AudioWorklet.
To read audio samples from the user the recommendation is to make a
ScriptProcessorNodeand give it anaudioprocesscallback. This runs on the main thread, though, and so when you look at MDN this is marked as deprecated. It says to useAudioWorkletinstead, and I wish I could!What I ended up doing was recording the audio on the main thread, messaging that over to the worklet, and the having the worklet play it. Here’s a demo, which relies on experimental Web Audio features that so far are only implemented in Blink-based browsers: echo-demo.
Comment via: facebook