| license: mit |
This listens to your computer's microphone and draws the contents of the audio buffer as a series of (mostly) horizontal ellipses.
This was made as part of a series exploring the visualization of audio that was presented at a d3.oakland. A big list of the demos from this series can be found here.
| <!DOCTYPE html> | |
| <title>Horizontal Ellipses</title> | |
| <body style="margin: 0px"> | |
| <canvas></canvas> | |
| </body> | |
| <script> | |
| const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); | |
| const analyser = audioCtx.createAnalyser(); | |
| const canvas = document.querySelector('canvas'); | |
| canvas.setAttribute('width',innerWidth); | |
| canvas.setAttribute('height',innerHeight); | |
| const canvasCtx = canvas.getContext("2d"); | |
| canvasCtx.fillStyle = 'rgb(0, 0, 0)'; | |
| canvasCtx.strokeStyle = 'rgb(255, 0, 0)'; | |
| canvasCtx.lineWidth = .1; | |
| const dataArray = new Uint8Array(analyser.frequencyBinCount); | |
| navigator.getUserMedia ( | |
| {audio: true}, | |
| function(stream) { | |
| audioCtx.createMediaStreamSource(stream).connect(analyser); | |
| draw(); | |
| }, | |
| function(err) { | |
| console.log('The following gUM error occured: ' + err); | |
| } | |
| ); | |
| function draw() { | |
| canvasCtx.fillRect(0, 0, canvas.width, canvas.height); | |
| analyser.getByteTimeDomainData(dataArray); | |
| const [min, max] = [Math.min(...dataArray), Math.max(...dataArray)]; | |
| if (max - min > 2) { | |
| for(let i = 0; i < dataArray.length; i++) { | |
| const thisVol = ((dataArray[i] - min)/(max-min)) * Math.min(innerWidth, innerHeight)/2; | |
| const thisRotation = i/dataArray.length * Math.PI | |
| const x = thisVol * Math.cos(thisRotation); | |
| const y = thisVol * Math.sin(thisRotation); | |
| canvasCtx.beginPath(); | |
| canvasCtx.ellipse( | |
| canvas.width/2, | |
| canvas.height/2, | |
| Math.abs(x), | |
| Math.abs(y), | |
| thisRotation, | |
| 0, | |
| 2 * Math.PI | |
| ); | |
| canvasCtx.stroke(); | |
| } | |
| } | |
| requestAnimationFrame(draw); | |
| }; | |
| </script> |
