D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ivyywang
Full window
Github gist
Music Visualizer
Music Visualizer
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- D3.js --> <script src="d3.v4.min.js" charset="utf-8"></script> </head> <body> <audio src="Viva_la_Vida.ogg" autoplay="autoplay"></audio> <script language="javascript" type="text/javascript"> (function() { var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var audioElement = document.querySelector('audio') var audioSrc = audioCtx.createMediaElementSource(audioElement); var analyser = audioCtx.createAnalyser(); // bind our analyser to the media element source. audioSrc.connect(analyser); audioSrc.connect(audioCtx.destination); // var frequencyData = new Uint8Array(analyser.frequencyBinCount); var frequencyData = new Uint8Array(200); var svgWidth = 1050, svgHeight = 1500; var svg = d3.select('body').append('svg') .attr('height', svgHeight) .attr('width', svgWidth) //SVG filter for the gooey effect //Code taken from https://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ var defs = svg.append("defs"); var filter = defs.append("filter").attr("id","gooeyCodeFilter"); filter.append("feGaussianBlur") .attr("in","SourceGraphic") .attr("stdDeviation","10") //to fix safari: https://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image .attr("color-interpolation-filters","sRGB") .attr("result","blur"); filter.append("feColorMatrix") .attr("in","blur") .attr("mode","matrix") .attr("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7") .attr("result","gooey"); var circleWrapper = svg.append("g") .attr("class", "circleWrapper") .style("filter", "url(#gooeyCodeFilter)"); // continuously loop and update chart with frequency data. function renderChart() { requestAnimationFrame(renderChart); // copy frequency data to frequencyData array. analyser.getByteFrequencyData(frequencyData); // console.log(frequencyData); // scale things to fit var radiusScale = d3.scaleLinear() .domain([0, d3.max(frequencyData)]) .range([0, svgHeight/2 -10]); var hueScale = d3.scaleLinear() .domain([0, d3.max(frequencyData)]) .range([0, 360]); // var colors = ["#F95B34", "#EE3E64", "#F36283", "#FF9C34", "#EBDE52", "#B7D84B", "#44ACCF"]; var xScale = d3.scaleLinear() .domain([0, frequencyData.length]) .range([0, svgWidth]) var yScale = d3.scaleLinear() .domain([0, d3.max(frequencyData)]) .range([0, svgHeight]) // update d3 chart with new data var circles = circleWrapper.selectAll('circle') .data(frequencyData); circles.exit().remove(); circles.enter().append('circle') .merge(circles) .attr('r', function(d) { return radiusScale(d) }) .attr('cx', function(d,i){ return xScale(i)} ) .attr('cy', function(d) { return yScale(d) }) .style('fill', 'none') .style('stroke-width', 4) .style('stroke-opacity', 0.4) .style('stroke', function(d) { return d3.hsl(hueScale(d), 1, 0.5)}) } // run the loop renderChart(); // // just for blocks viewer size // d3.select(self.frameElement) // .style('height', svgHeight+'px') // .style('width', svgWidth+'px') }() ); </script> </body> </html>