WebAPI Spectrogram example.

Spectrogram using WebAPI.

HTML

<div>
    <p>Real time audio spectrogram based on <a href="https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode">Mozilla documentation</a></p>
    <canvas id='canvas' width="500" height="256"></canvas>
</div>
<p>Samples:</p>
<p id='arrayIndex'>Sample values should be shown here.</p>

JavaScript

var canvasCtx = document.getElementById('canvas').getContext('2d');
var bufferSize = 256;



function greyHey(col) {
  var v = (col|0).toString(16);
  return "#" + v + v + v;
}

// draw an oscilloscope of the current audio source
var time = 0;
function draw(frame) {
    drawVisual = requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);
    var WIDTH = 500;
    var HEIGHT = 256;
    //canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    for (var i = 0; i < dataArray.length; i++) {
      canvasCtx.fillStyle = greyHey(255-dataArray[i]);
      canvasCtx.fillRect(time, HEIGHT-i, 1, 1);
    }
    time = (time + 1) % WIDTH;
};

draw();