Web Audio API to apply music frequency as the data to fuel the visualisation – based on Gary Smith's terrific post.
Created
January 8, 2016 18:11
-
-
Save eesur/6ad4ee84c81b664353a7 to your computer and use it in GitHub Desktop.
d3.js | Web Audio API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| 'use strict'; | |
| var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); | |
| var audioElement = document.getElementById('audioElement'); | |
| 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 svgHeight = 600, | |
| svgWidth = 960; | |
| var svg = d3.select('body').append('svg') | |
| .attr({ | |
| height: svgHeight, | |
| width: svgWidth | |
| }); | |
| // 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.scale.linear() | |
| .domain([0, d3.max(frequencyData)]) | |
| .range([0, svgHeight/2 -10]); | |
| var hueScale = d3.scale.linear() | |
| .domain([0, d3.max(frequencyData)]) | |
| .range([0, 360]); | |
| // update d3 chart with new data | |
| var circles = svg.selectAll('circle') | |
| .data(frequencyData); | |
| circles.enter().append('circle'); | |
| circles | |
| .attr({ | |
| r: function(d) { return radiusScale(d); }, | |
| cx: svgWidth / 2, | |
| cy: svgHeight / 2, | |
| fill: 'none', | |
| 'stroke-width': 4, | |
| 'stroke-opacity': 0.4, | |
| stroke: function(d) { return d3.hsl(hueScale(d), 1, 0.5); } | |
| }); | |
| circles.exit().remove(); | |
| } | |
| // run the loop | |
| renderChart(); | |
| // just for blocks viewer size | |
| d3.select(self.frameElement).style('height', '700px'); | |
| }()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| <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="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment