gl-spectrogram

Render spectrogram in webgl or 2d.

Usage

var createSpectrogram = require('gl-spectrogram');

//lightweight 2d-canvas version
//var createSpectrogram = require('gl-spectrogram/2d');

var spectrogram = createSpectrogram({
	//placement settings
	container: document.body,
	canvas: canvas,
	context: 'webgl',

	//audio settings
	maxDecibels: -30,
	minDecibels: -100,
	maxFrequency: 20000,
	minFrequency: 20,
	sampleRate: 44100,
	weighting: 'itu',

	//grid settings
	grid: true,
	axes: false,
	logarithmic: true,

	//rendering settings
	smoothing: 0.5,
	fill: 'inferno',
	background: null,

	//useful only for webgl renderer, defines the size of data texture
	size: [1024, 1024]
});

//push frequencies data, view is shifted for 1 slice
spectrogram.push(data);

//for even timeflow push data in setTimeout, stream data event, scriptProcessorCallback etc.
setTimeout(() => {
	spectrogram.push(getData(data));
}, 100);

//set data colormap or background
spectrogram.setFill(colormap|color|pixels);
spectrogram.setBackground(color|array);

//update colors, grid view
spectrogram.update(opts);

//called when freqs being pushed
spectrogram.on('push', magnitudes => {});
spectrogram.on('update', magnitudes => {});

//latest frequencies data in db
spectrogram.magnitudes;
spectrogram.peak;

Related

• gl-spectrum
• plot-grid
• start-app

Inspiration

• colormap
• nice-color-palettes