Web Audio API to apply music frequency as the data to fuel the visualisation – based on Gary Smith's terrific post.
xxxxxxxxxx
<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>
<!-- <audio id="audioElement" src="shakuhachi.mp3"></audio> -->
<div>
<button onclick="MIDIjs.play(url);">play</button>
<button onclick="document.getElementById('audioElement').play()">Play ►</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>
<!-- <script src="app.js"></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