spectrogram

Audio spectrogram in canvas.

Demo

https://lab.miguelmota.com/spectrogram

Install

npm install spectrogram

Getting started

Take a look at the full example.

Spectrogram of an audio file buffer.

var spectrogram = require('spectrogram');
var spectro = Spectrogram(document.getElementById('canvas'), {   audio: {     enable: false   } });
var audioContext = new AudioContext(); var request = new XMLHttpRequest(); request.open('GET', 'audio.mp3', true); request.responseType = 'arraybuffer';
request.onload = function() {   audioContext.decodeAudioData(request.response, function(buffer) {     spectro.connectSource(buffer, audioContext);     spectro.start();   }); };
request.send();

Live input stream with getUserMedia.

navigator.getUserMedia({
  video: false,
  audio: true
},
function(stream) {
  var input = audioContext.createMediaStreamSource(stream);
  var analyser = audioContext.createAnalyser();
analyser.smoothingTimeConstant = 0;   analyser.fftSize = 2048;
input.connect(analyser);
spectro.connectSource(analyser, audioContext);   spectro.start(); }, function(error) {
});

Custom color spectrum

By default the colors are grayscale. You can generate a custom color spectrum using a color scale library such as chroma.js.

var spectro = Spectrogram(..., {
  canvas: ...
  audio: ...
  colors: function(steps) {
    var baseColors = [[0,0,255,1], [0,255,255,1], [0,255,0,1], [255,255,0,1], [ 255,0,0,1]];
    var positions = [0, 0.15, 0.30, 0.50, 0.75];
var scale = new chroma.scale(baseColors, positions)     .domain([0, steps]);
var colors = [];
for (var i = 0; i < steps; ++i) {       var color = scale(i);       colors.push(color.hex());     }
return colors;   } });

Credits

• Exploring the HTML5 Web Audio: visualizing sound

License

MIT