var audio = new Audio("example.mp3");
var svg = d3.select("body").append("svg")
.attr("width", 800)
.attr("height", 300);
var path = svg.append("path")
.attr("fill", "none")
.attr("stroke", "black");
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var source = audioContext.createMediaElementSource(audio);
var analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
function draw() {
requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
var y = d3.scaleLinear()
.domain([0, 255])
.range([300, 0]);
var line = d3.line()
.x(function(d, i) { return i * (800 / bufferLength); })
.y(function(d) { return y(d); });
path.datum(dataArray)
.attr("d", line);
}
draw();