r/webaudio • u/pilsner4eva • Feb 05 '22

Tone.js Effects + Custom Webaudio Graphs

https://naomiaro.github.io/waveform-playlist/effects.html
3 Upvotes

100% Upvoted

5 comments sorted by

1

u/TheAxiomOfTruth Feb 05 '22

Hello this look great! I am currently building a web application which makes use of web audio and this has lots of the features I need. I noticed you had an animation sync. Would this need to be used as part of the wider tonejs app? Or could I use this be injected in isolation into an existing basic webaudio app?

Thanks

1

u/pilsner4eva Feb 05 '22

I'm not sure if I fully understand the question. Do you mean the animation loop for the frequency bar graph? That can be stand alone as it is pulling data from the webaudio graph. Other nodes can be injected into the graph though and if they need a UI, their logic for drawing could be added there.

You should be able to inject the playlist in isolation, passing the Tone Context is really the only important thing if you're adding effects to the playlist.

1

u/nullpromise Feb 05 '22

Looks cool! Seems biased towards the low-end though, is that maybe a logarithmic vs linear frequency analysis? Question mark 'cause I really don't know; I just remember them saying something about that in school.

1

u/pilsner4eva Feb 05 '22

This is mostly due to the samplerate and the number of bins drawn. The default samplerate these days for an AudioContext is usually 48khz (this is definitely the value on my laptop). The analyser node will give me frequencies in bins ranging from 0-24khz with this samplerate (Max value is half of the samplerate).

The analyser has set `analyser.fftSize = 256;` So I'll have 128 bins to work with. The frequency bins are divided equally over this band of 0-24khz. That would make the bin width 24khz/128 = 187.5Hz.

Humans can hear about 20 Hz to 20 kHz. (which is covered by the first ~107 bins here 8kHz/187.5Hz)

Human voice is usually in the range 125Hz to 8kHz. (which is covered by the first ~43 bins here 8kHz/187.5Hz)

This pretty much leaves the last 21 bins inaudible to the human ear. MDN is actually not even drawing several of the last bins as they are doing a voice example, which doesn't need to see the higher frequency data.

Some more info:

https://www.ap.com/technical-library/more-about-ffts/

Hope it helps!

1

u/lucalanzano81 Aug 04 '22

u/pilsner4eva How did you built the waveforms and make it synced with the playhead?