Music visualizer
Our second app will be a simple music visualizer using the Audio API, File Drag and Drop API, and Canvas. We'll split it into two parts: first, the drop area for a music file, which will load its content using readAsDataUrl()
, and place its content into the src
attribute of the audio element. Then, we connect various filters to the audio stream and read its raw output from the audio analyzer.
Note
Dartium doesn't support some common audio/video formats, such as *.mp3 (http://www.chromium.org/audio-video). Although you can enable it manually, try using *.mp4, *.webm, or *.m4a instead.
We can start with a short HTML snippet:
<!-- web/index.html --> <body> <h1>Chapter 03 music visualizer</h1> <audio autoplay loop controls="true"> Your browser does not support the audio element. </audio> <div id="fileDrop">drop music file here</div> <canvas width="300" height="50...