Does it actually generate the sound server-side and send it over the network, or...

lost-theory · on Oct 8, 2013

It loads 20 or so ogg audio files like this: http://mynoise.net/Data/OSMOSIS/7a.ogg

Then I'm guessing the EQ controls the volume. So no it doesn't generate / stream anything to you server-side.

theatraine · on Oct 8, 2013

Right, the EQ controls the volume of each of the 10 (each one corresponds to a slider) sounds. (Every sound has been previously decomposed into its frequency components.) The Web Audio API is used for browsers that have it present, else HTML5 audio elements are used. The slider just adjusts the volume of the sound (exponentially of course!), leading to an equalizer effect with no filtering required. (Garnered from looking at the code.)

Interestingly, this could be done using one file (rather than ten) using a Web Audio API filter node. This would limit the site to only Web Audio API compatible browsers. Unfortunately, at this time, that's only newer versions of Chrome, Safari, and I believe FF nightly (slight API variations). However there is some mobile support through recent Chrome and Safari implementations.

audiosampling · on Oct 8, 2013

Almost exact... but one audio file + EQ won't be able to achieve the same result ... Have a listen to the Wind noise and you'll understand why.

kaoD · on Oct 8, 2013

You could filter it yourself with a bit of DSP knowledge. I've seen this approach working effectively in Firefox without Web Audio API.

Impulse filters are easy to implement, e.g. an averaging low pass filter (or at least I think so, I'm no DSP expert):

  out(t) = 1/sum(a) * (a_1 * in(t) + a_2 * in(t-1) + ... + a_n * in(t-n+1))

Where "a" is a vector of constant coefficents.

You could even use FFT to modulate the bands separately, e.g.:

  Sample -> FFT -> Filtering -> FFTi -> Output

theatraine · on Oct 8, 2013

Sure, you could pre-calculate your filter coefficients and use a bandpass for each frequency band then do the math in Javascript however it's slower, and more involved. Also, unless you're going to be using WAVs, there's going to be some overhead for the decoding of the sound. Also, the filter won't be very high order since you're going to be doing at least n*44100 operations per second (at the standard sampling rate). (Web Audio API filter nodes are only 2nd order but you can cascade them.) Do you have examples of the above working in Firefox? I'd be curious to see the implementation.

kaoD · on Oct 9, 2013

> it's slower

It's slower, but... does it matter if it's not just "slow"? Slower than "so fast" is still "fast".

> and more involved

That's right.

> Also, unless you're going to be using WAVs, there's going to be some overhead for the decoding of the sound.

If I recall correctly, Firefox's Audio Data API does the decoding for you and provides the final PCM samples even when loading non-WAV formats.

> Also, the filter won't be very high order since you're going to be doing at least n 44100 operations per second

If the effect computation is a problem, you can pre-render it in a buffer.

Anyways, n*44100 operations per second is not that much. You actually operate on buffers, which makes caching useful for the slow part (memory access). Summing, multiplying, etc. is a piece of cake for your CPU in JIT-compiled code.

Check this JSFiddle I threw in a couple minutes: http://jsfiddle.net/9LpKd/2/ (please mind the awful effect and the fact that it's not audio... I'm not very experienced with Audio Data API and that would take me a bit more to fiddle with!)

44000 pixel updates, up to 60 times a second, with pretty expensive operations (sines, cosines and even square roots!), updating DOM values... JavaScript is fast enough for this.

I can see the problem in mobile devices though, but I'm not even sure Firefox provides Audio Data API in mobile devices.

>Do you have examples of the above working in Firefox? I'd be curious to see the implementation.

The only web implementing it that I can remember is http://websdr.ewi.utwente.nl:8901/ (you have to check the HTML5 audio radio button).

Unfortunately the code is minified and it takes a bit to make sense of it after Beautifying.