Native Audio - HTML5

HTML and CSS Reference

In-Depth Information

and set the wave amplitude:

var waveAmp = canvas.height / 2;

Next, reset canvas so the strokes don't build on top of each other:

canvas.width = canvas.width;

Finally, build the stroke and set stroke properties:

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";

Add the stroke to canvas :

context.stroke();

}

and play the audio:

audio.play();

}

</script>

Discussion

Just as generating real-time audio with JavaScript (see Recipe 4.3 ) is limited to Firefox

4+, so is this method of audio visualization with canvas . This is because only the Mozilla

Audio Data API allows you to access the key audio data (in this example, frame

Buffer ) necessary to create the canvas drawing.

Further, this method of audio visualization must run on a web server, and it requires

that the audio file reside on that same server due to Firefox security measures ( https://

While this recipe makes use of the Mozilla Audio Data API, browsers

(including Firefox) may support the Web Audio API from the W3C. For

more information, see the specification at https://dvcs.w3.org/hg/audio/