rveciana - d3js-and-web-audio-api

D3js and Web Audio API

Open raw page in new tab

More experiments with audio and D3js. The idea was reproducing the famous cover by Joy Division, animating it with the music.

Since the regular frequencyData data is too flat to get a nice result, I calculate the difference with the previous values, so it gives nice peaks. The graph means more or less nothing!

The music is taken from this site, because it’s free (and I liked this one). It’s a pitty not using the original album:

http://freemusicarchive.org/music/The_Orientalist/1000_Sounds_Lotus/Islamatronic_cantilliation_1461

I took information from these pages aboud web audio:

To create the app.js file, just run

browserify index.js > app.js
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Graphing audio</title>
  </head>

  <body>
    <audio id="audioElement" src="./music.mp3"></audio>
 <script src="app.js"></script>
  </body>
</html>