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://github.com/Lichtso/CCWT" rel="nofollow">https://github.com/Lichtso/CCWT</a>
the demo is fun to try: <a href="https://calebj0seph.github.io/spectro/" rel="nofollow">https://calebj0seph.github.io/spectro/</a>
Record from mic works for me. Listening to <a href="https://www.youtube.com/watch?v=FATTzbm78cc" rel="nofollow">https://www.youtube.com/watch?v=FATTzbm78cc</a> in one window with mic recording does the expected at the end of the song — <a href="https://www.magneticmag.com/2012/08/the-aphex-face-visualizing-the-sound-spectrum/" rel="nofollow">https://www.magneticmag.com/2012/08/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://github.com/aguaviva/GuitarTuner" rel="nofollow">https://github.com/aguaviva/GuitarTuner</a><p>Online demo: <a href="https://aguaviva.github.io/GuitarTuner/GuitarTuner.html" rel="nofollow">https://aguaviva.github.io/GuitarTuner/GuitarTuner.html</a>
Little plug of something similar I developed one year ago :
Wisteria : <a href="https://gistnoesis.github.io/" rel="nofollow">https://gistnoesis.github.io/</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://waveform.prototyping.bbc.co.uk/" rel="nofollow">https://waveform.prototyping.bbc.co.uk/</a>
Awesome, I love spectograms!<p>Why did you implement your own FFT instead of using WebAudio?<p><a href="http://arc.id.au/Spectrogram.html" rel="nofollow">http://arc.id.au/Spectrogram.html</a>