Choosing a Spectrogram visualization Library in Javascript

Today I decided to invest time on choosing the right Spectrogram library in order to create a visualization of the spectral scans.

The requirements that I thought relevant are:

  • size: as this library needs to be installed inside the routers, the Spectrogram should be as small as possible.
  • customizable: most of them are prepared to show information in the audio spectrum… they should be prepared to show spectrum in different frequencies.
  • realtime: the library must render information streamed in realtime. The ones that uses a microphone can be adapted to do that.
  • well mantained: this can be measured based on stars, commits, commiters and forks.
  • responsive: if you resize the container, the graph resizes.

This is the result of the Survey:

rank repository works realtime weight (kb) responsive stars forks last update notes
1 yes yes 3 no 0 0 2017/03/22
2 yes yes 4 no 7 3 2013/09/09
3 yes yes 5 no 0 0 2015/09/09
4 yes yes 8 no 51 9 2017/05/22
5 yes yes 166 no 2 0 2016/07/29
6 yes yes 2000 yes 78 12 2014/06/13 have to refactor, cause it uses the microphone yes no 500 no 65 5 2014/01/23 it doesn’t work in realtime no? ? ? ? 4 0 2014 not instalable after some time no yes 83 18 2016/11/22 throws errors in javascript console no ? 110 8 0 2013/08/11 seems to work only in the safari browser, couldn’t test

Most of the Spectrum Analyzers are very simple ones… till now I havent found that allows advanced things like multiple levels of zoom, pause and resume, etc.
In the future we may need to do some work to implement this functionality.
Lets discuss the main ones.



It is a very Spectrogram traditional visualiation with an additional realtime curves graph on the upper part. It draws from top to bottom.
In relation with the visualization, the other relevant characteristic is that it draws the graph in a continuous fashion… so the old information get’s lost, and the rest scrolls each time new information arrives. We could call this one a `scrolling drawer`.
It is the most lightweight (pretty close to the next one) weighting 3kb.
The code is not elegant or customizable at all, but is small enougth to understand it easily and include new updates.


This one is a standard Spectrogram, could be characterized as a `rolling drawer` in the sense that once it gets to the end of the canvas, it continues drawing at the beginning of the canvas, `rolls` to the other side, instead of `scrolling` the content.
This one is very lightweight also, 4kb, and the code is very easily updateble to support external sources of data.

Pachacamac’s spectrum_analyzer

This is also a `scrolling drawer`.
It looks better for my taste (probably related with the color scale choosen) but at the functionality level is quite similar to the previous one.
The code is also very small, so it would be easy to understand it. Many configurations are hardcoded.

Mighel Mota’s Spectrum_analyzer

This is still very lightweight, but is still very basic.
The one good thing about this is that is coded in a very professional fashion… The developer uses TDD, the code is very well organized, the documentation is simple but comprenhensive, has pause and resume functionality.


This one doesn’t bring any new stuff to the table.
It uses new technologies (like JSX) but doesn’t improve in the way it is done, or the functionality it brings.
It weights many orders of magnitude more (2000kb), so it is out of the discussion.

Next steps

I haven’t decided between Speccy and Spectrogram.js … but I know that with any of these I will need to do a lot of work, cause many of the desired features are not there yet (customization, mantainability, responsiveness) and others desirable are not there either (like drawing rulers, pause/resume).

I’ll build a prototype with one of those to move forward with the Spectrum analyzer for LibreMesh.

Leave a Reply

Your email address will not be published. Required fields are marked *