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="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 src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="app.js"></script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js