https://github.com/dy/gl-spectrum
:chart_with_downwards_trend: Spectrum visualizer
https://github.com/dy/gl-spectrum
audio spectrum
Last synced: 10 months ago
JSON representation
:chart_with_downwards_trend: Spectrum visualizer
- Host: GitHub
- URL: https://github.com/dy/gl-spectrum
- Owner: dy
- Created: 2016-05-11T23:30:12.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T15:15:51.000Z (over 3 years ago)
- Last Synced: 2025-07-25T09:16:44.311Z (11 months ago)
- Topics: audio, spectrum
- Language: JavaScript
- Homepage: https://dy.github.io/gl-spectrum
- Size: 36.4 MB
- Stars: 99
- Watchers: 6
- Forks: 8
- Open Issues: 12
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# gl-spectrum [](http://github.com/badges/stability-badges)
Spectrum rendering component with webgl or context2d.
[](http://dy.github.io/gl-spectrum/)
## Usage
[](https://npmjs.org/package/gl-spectrum/)
```js
var Spectrum = require('gl-spectrum');
var spectrum = new Spectrum({
container: document.body,
//if undefined, new canvas will be created
canvas: null,
//existing webgl-context and some context options
context: null,
alpha: false,
//enable render on every frame, disable for manual rendering
autostart: true,
//visible range
maxDb: 0,
minDb: -100,
maxFrequency: 20000,
minFrequency: 20,
sampleRate: 44100,
//perceptual loudness weighting, 'a', 'b', 'c', 'd', 'itu' or 'z' (see a-weighting)
weighting: 'itu',
//display grid, can be an object with plot-grid settings
grid: true,
//place frequencies logarithmically
log: true,
//smooth series of data
smoothing: 0.75,
//0 - bottom, .5 - symmetrically, 1. - top
align: 0,
//peak highlight balance
balance: .5,
//display max value trail
trail: true,
//style of rendering: line, bar or fill
type: 'line',
//width of the bar, applicable only in bar mode
barWidth: 2,
//colormap for the levels of magnitude. Can be a single color for flat fill.
palette: ['black', 'white'],
//by default transparent, to draw waveform
background: null,
//pan and zoom to show detailed view
interactions: false
});
//pass values in decibels (-100...0 range)
spectrum.set(magnitudes);
//update style/options
spectrum.update(options);
//hook up every data set
spectrum.on('data', (magnitudes, trail) => {});
//for manual mode of rendering you may want to call this whenever you feel right
spectrum.render();
spectrum.draw();
```
## Related
* [gl-waveform](https://github.com/dy/gl-waveform)
* [gl-spectrogram](https://github.com/dy/gl-spectrogram)
* [a-weighting](https://github.com/audio-lab/a-weighting) — perception loudness weighting for audio.
* [colormap](https://github.com/bpostlethwaite/colormap) — list of js color maps.
* [cli-visualizer](https://github.com/dpayne/cli-visualizer) — C++ spectrum visualizer.
* [spectrum](https://github.com/mattdesl/spectrum) by mattdesl
* [audioMotion](https://github.com/hvianna/audioMotion.js/)