[IN NEED OF MAINTAINERS] Audio spectrogram in canvas.
Branch: master
Clone or download
Pull request Compare This branch is 6 commits ahead of miguelmota:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.editorconfig
.gitattributes
.gitignore
.jscsrc
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
package.json
spectrogram.js

README.md


logo


spectrogram

Audio spectrogram in canvas.

License Build Status dependencies Status NPM version

NPM

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

License

MIT