d3.js | Web Audio API

Web Audio API to apply music frequency as the data to fuel the visualisation – based on Gary Smith's terrific post.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>d3 | visualise audio</title>
    <style>
      body {
        font-family: monospace;
        line-height: 1.5;
        background-color: #130C0E;
        padding: 20px;
      }
      button {
        font-size: 14px;
        background: #130C0E;
        color: #7AC143;
        border: none;
        outline:none;
        padding: 4px 8px;
        letter-spacing: 1px;
      }
      button:hover {
        background: #7AC143;
        color: #130C0E;
      }
    </style>
  </head>

<body>
    
    <div>
      <button onclick="MIDIjs.play(url);">play</button>   
      <button onclick="document.getElementById('audioElement').play()">Play &#9658;</button>
      <button onclick="document.getElementById('audioElement').pause()">Pause ||</button>
      <button onclick="document.getElementById('audioElement').volume+=0.1">Vol +</button>
      <button onclick="document.getElementById('audioElement').volume-=0.1">Vol -</button>
    </div>
    <script type='text/javascript' src='https://midijs.net/lib/midi.js'></script>
    <script type="text/javascript">
      var url = "bwv1008_02.mid";
      
    </script>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    
  </body>
</html>

Modified http://midijs.net/lib/midi.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://midijs.net/lib/midi.js

https://d3js.org/d3.v3.min.js