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.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 :
and play the audio:;
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
raw-file/tip/webaudio/specification.html .
See Also
For a far more sophisticated and interactive use of audio and canvas , see the project
from 9elements at .
Search WWH ::

Custom Search