https://github.com/dy/gl-spectrogram

:milky_way: Render spectrogram of any audio source in webgl or canvas2d
https://github.com/dy/gl-spectrogram

Last synced: 9 months ago
JSON representation

:milky_way: Render spectrogram of any audio source in webgl or canvas2d

• Host: GitHub
• URL: https://github.com/dy/gl-spectrogram
• Owner: dy
• Created: 2016-06-13T05:37:14.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2017-10-03T05:13:04.000Z (over 8 years ago)
• Last Synced: 2024-12-15T12:22:26.535Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://audio-lab.github.io/gl-spectrogram
• Size: 1.15 MB
• Stars: 64
• Watchers: 5
• Forks: 7
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# gl-spectrogram [![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

Render spectrogram in webgl or 2d.

[![Spectrogram](https://raw.githubusercontent.com/audio-lab/gl-spectrogram/gh-pages/preview.png "Spectrogram")](http://audio-lab.github.io/gl-spectrogram/)

## Usage

[![npm install gl-spectrogram](https://nodei.co/npm/gl-spectrogram.png?mini=true)](https://npmjs.org/package/gl-spectrogram/)

```js

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](https://github.com/audio-lab/gl-spectrum)

* [plot-grid](https://github.com/audio-lab/plot-grid)

* [start-app](https://github.com/audio-lab/start-app)

## Inspiration

* [colormap](https://github.com/bpostlethwaite/colormap)

* [nice-color-palettes](https://github.com/Jam3/nice-color-palettes)