HTML and CSS Reference
In-Depth Information
var fbData = event.frameBuffer;
var stepInc = (frameBufferLength / channels) / canvas.width;
var waveAmp = canvas.height / 2;
canvas.width = canvas.width;
context.beginPath();
context.moveTo(0, waveAmp - fbData[0] * waveAmp);
for(var i=1; i < canvas.width; i++){
context.lineTo(i, waveAmp - fbData[i*stepInc] * waveAmp);
}
context.strokeStyle = "#fff";
context.stroke();
}
audio.play();
}
</script>
Figure 4-3. Wave visualization of audio via canvas in Firefox 5
In this solution, we combine what is discussed about
canvas
in
Chapter 9
with some
methods from the Mozilla Audio Data API. Let's break it down piece by piece, starting
with the core
audio
element,
canvas
, and a
button
to trigger the visualization:
<audio src="audio.ogg"></audio>
<canvas width="512" height="100"></canvas>
<button title="Generate Waveform" onclick="genWave();">Generate Waveform</button>
For brevity's sake, I'm using the
src
attribute for
audio
in this example,
but this would also work with multiple
source
elements.