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'), {});

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.draw(buffer);
  });
};

request.send();

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: ...
  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