Book Image

Dart Essentials

Book Image

Dart Essentials

Overview of this book

Table of Contents (16 chapters)
Dart Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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" id="canvas"></canvas>
</body>

Now...