Building Spectro: a Real-Time WebGL audio spectrogram visualizer

Also try using the Wavelet-Transform instead of short time FFT (with overlapping windows).<p>It is easier to configure (less parameters, there is no need for a window function), offers more flexibility (exponential frequency band; e.g. for music scales) and can reach the Gabor-Heisenberg uncertainty limit without artifacts.<p>The only downside is that you need to know the entire signal in advance, so it can only be used for recordings.<p>Shameless self-promo of my implementation: <a href="https:&#x2F;&#x2F;github.com&#x2F;Lichtso&#x2F;CCWT" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Lichtso&#x2F;CCWT</a>

the demo is fun to try: <a href="https:&#x2F;&#x2F;calebj0seph.github.io&#x2F;spectro&#x2F;" rel="nofollow">https:&#x2F;&#x2F;calebj0seph.github.io&#x2F;spectro&#x2F;</a>

Record from mic works for me. Listening to <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=FATTzbm78cc" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=FATTzbm78cc</a> in one window with mic recording does the expected at the end of the song — <a href="https:&#x2F;&#x2F;www.magneticmag.com&#x2F;2012&#x2F;08&#x2F;the-aphex-face-visualizing-the-sound-spectrum&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.magneticmag.com&#x2F;2012&#x2F;08&#x2F;the-aphex-face-visualizi...</a>

Here is another spectrogram visualizer but with a twist, the frequency bins are the notes of a piano and hence you can use it to tune instruments or your voice.<p>The project: <a href="https:&#x2F;&#x2F;github.com&#x2F;aguaviva&#x2F;GuitarTuner" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;aguaviva&#x2F;GuitarTuner</a><p>Online demo: <a href="https:&#x2F;&#x2F;aguaviva.github.io&#x2F;GuitarTuner&#x2F;GuitarTuner.html" rel="nofollow">https:&#x2F;&#x2F;aguaviva.github.io&#x2F;GuitarTuner&#x2F;GuitarTuner.html</a>

Little plug of something similar I developed one year ago : Wisteria : <a href="https:&#x2F;&#x2F;gistnoesis.github.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;gistnoesis.github.io&#x2F;</a> It does the real-time spectrogram using tensorflow.js with gpu. And it also run some transformer neural networks real-time to transcript the notes into a piano-roll.

Looks really cool. Sounds like a similar approach could be used to render audio waveforms. I wonder why a project like this one [1] decided to use server side waveform generation instead.<p>1: <a href="https:&#x2F;&#x2F;waveform.prototyping.bbc.co.uk&#x2F;" rel="nofollow">https:&#x2F;&#x2F;waveform.prototyping.bbc.co.uk&#x2F;</a>

Awesome, I love spectograms!<p>Why did you implement your own FFT instead of using WebAudio?<p><a href="http:&#x2F;&#x2F;arc.id.au&#x2F;Spectrogram.html" rel="nofollow">http:&#x2F;&#x2F;arc.id.au&#x2F;Spectrogram.html</a>

Very cool! Are you the author?