
Show HN: Web Audio DSP Playground - acarabott
https://acarabott.github.io/audio-dsp-playground/
======
btown
Audio Worklet [https://developers.google.com/web/updates/2017/12/audio-
work...](https://developers.google.com/web/updates/2017/12/audio-worklet) is
way, way cooler than these demos imply, as it actually gives you a high-
priority digital signal processing thread separate from the UI thread. And
because it can benefit from WebAssembly, it's only a matter of time before the
power of native audio applications is ported to the browser.

This thread [https://forum.juce.com/t/juce-plugins-in-
webassembly/25255](https://forum.juce.com/t/juce-plugins-in-webassembly/25255)
, particularly the demo here
[https://webaudiomodules.org/demos/wasm/dexed.html](https://webaudiomodules.org/demos/wasm/dexed.html)
(try using the ZXCV row on your keyboard) are incredibly promising, as they're
straightforward ports of real synthesizers.

Other comments have mentioned that this is coming to Firefox as well; core
contributors on the media team have been discussing how it's a priority as
recently as two days ago:
[https://bugzilla.mozilla.org/show_bug.cgi?id=1062849](https://bugzilla.mozilla.org/show_bug.cgi?id=1062849)

Really exciting times for the web audio space!

------
droidist2
This is pretty sweet. It'd be cool to have more examples though like square
wave, triangle wave, etc. and maybe some simple effects like tremolo.

~~~
nabla9

        let amp = 0;
        const maxamp = 0.5;
        const freq = 880;
    
        function loop(numFrames, outL, outR, sampleRate) {
            const steps = sampleRate / freq;
            const delta = maxamp/steps;
      
            for (let i = 0; i < numFrames; i++) {
                amp += delta;
                outL[i] = amp;
                outR[i] = amp;
    
                if (amp > maxamp) amp = 0.0; 
             }
        }

------
kevincennis
Would be a cool addition to let users upload an mp3 and then act on it with
the AudioWorklet to do stuff like bit crushing.

~~~
acarabott
Great idea! Have implemented it, refresh and check it out.

~~~
detaro
Could you also try adding a polyfill for non-Chrome browsers? e.g.
[https://github.com/jariseon/audioworklet-
polyfill](https://github.com/jariseon/audioworklet-polyfill)

~~~
acarabott
Had a crack at it but it throws NotSupportedException in both Firefox and
Safari. There are also some parts that don't conform to the spec and break.
Filing an issue...

------
jtbayly
Only available on Chrome and only versions 66 and up.

~~~
shams93
For cutting edge html5 we have no choice but the latest chrome. Audio
worklets? Webmidi? Even though I prefer Firefox they're not moving at the same
rate as chrome, no one is when it comes to things like audio worklets.

~~~
pjmlp
Apparently there is no issue when it is Google doing it.

------
emilfihlman
Getting an error of "The AudioContext was not allowed to start. It must be
resume (or created) after a user gesture on the page.
[https://goo.gl/7K7WLu"](https://goo.gl/7K7WLu").

~~~
acarabott
Strange, as this is accounted for: [https://github.com/acarabott/audio-dsp-
playground/blob/maste...](https://github.com/acarabott/audio-dsp-
playground/blob/master/livecode.js#L87)

OS / Chrome version? Were you clicking the start button or using the key
command?

------
indescions_2018
This is awesome. Sounds quite in tune at 440 Hz (A4). Could be the beginning
of a DAW for Chrome ;)

~~~
josteink
Why for Chrome? Why not for _the web_?

Let’s not walk into the old MSIE trap all over again.

~~~
nkristoffersen
Need to convince the remaining browsers to implement more audio APIs.

~~~
josteink
Firefox plans to implement it last I checked[1].

[1]
[https://bugzilla.mozilla.org/show_bug.cgi?id=1062849](https://bugzilla.mozilla.org/show_bug.cgi?id=1062849)

------
wi24rd
Only available in Chrome 66+, and why do you submit it twice in a week?

