Last summer I wrote some code that would
let you control a bass synthesizer by whistling (
details). I wrote it in a
low-level
language so I could minimize latency, but the downside is that
it’s a bit of a pain to install and try out. After playing around
with the
Web
Audio APIyesterday, however, I
realized I could make a demo in JavaScript. Here it is:
bass-whistle-js.
Currently this only works in Chrome, because Firefox and Safari haven’t implemented
AudioWorklet yet. It has enough latency to be painful, even
though the AudioContext is running with minimum
latency settings. I suspect this is Chrome layering several
buffers, and comes from optimizing for something other than what I
want (cross-platform, simplicity, minimizing dropouts, power
consumption). Still, it’s neat that this works at all!
Debugging my AudioWorklet port was painful, as browser debugging goes.
Devtools doesn’t understand the worklet very well, and so several
syntax errors in the worklet were reported as syntax errors in the UI
thread code. The devtools “disable cache” setting also doesn’t seem
to apply to worklet modules, and they don’t even show up in the
Network tab, so I put in a cachebuster during development.
Bass Whistle in the Browser
Link post
Last summer I wrote some code that would let you control a bass synthesizer by whistling ( details). I wrote it in a low-level language so I could minimize latency, but the downside is that it’s a bit of a pain to install and try out. After playing around with the Web Audio API yesterday, however, I realized I could make a demo in JavaScript. Here it is: bass-whistle-js.
Currently this only works in Chrome, because Firefox and Safari haven’t implemented AudioWorklet yet. It has enough latency to be painful, even though the AudioContext is running with minimum latency settings. I suspect this is Chrome layering several buffers, and comes from optimizing for something other than what I want (cross-platform, simplicity, minimizing dropouts, power consumption). Still, it’s neat that this works at all!
Debugging my AudioWorklet port was painful, as browser debugging goes. Devtools doesn’t understand the worklet very well, and so several syntax errors in the worklet were reported as syntax errors in the UI thread code. The devtools “disable cache” setting also doesn’t seem to apply to worklet modules, and they don’t even show up in the Network tab, so I put in a cachebuster during development.
Comment via: facebook