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	https://github.com/drandrewthomas/Speccy	yes	yes	3	no	0	0	2017/03/22
2	https://github.com/sebleier/spectrogram.js	yes	yes	4	no	7	3	2013/09/09
3	https://github.com/pachacamac/spectrum_analyzer	yes	yes	5	no	0	0	2015/09/09
4	https://github.com/miguelmota/spectrogram	yes	yes	8	no	51	9	2017/05/22
5	https://github.com/pietgeursen/inu-spectrogram	yes	yes	166	no	2	0	2016/07/29
6	https://github.com/borismus/spectrogram	yes	yes	2000	yes	78	12	2014/06/13	have to refactor, cause it uses the microphone
–	https://github.com/vlandham/spectrogramJS	yes	no	500	no	65	5	2014/01/23	it doesn’t work in realtime
–	https://github.com/abarbu/audio-annotation	no?	?	?	?	4	0	2014	not instalable after some time
–	https://github.com/arirusso/d3-audio-spectrum	no	yes			83	18	2016/11/22	throws errors in javascript console
–	https://github.com/octatone/spectrogram	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.

Reviews

Speccy

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.

Spectrogram.js

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.

inu-spectrogram

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.