Audio Radial Line - dark

This listens to your computer's microphone and draws the contents of the audio buffer as a radial line. Also made a bright version: Audio Radial Line - bright

This is part of a series exploring the visualization of audio that was presented at a d3.oakland meetup. A big list of the demos from this series can be found here.

<!DOCTYPE html>
<title>Radial Line - Dark</title>
<script src="//d3js.org/d3.v4.min.js"></script>
<body style="margin: 0px">
  <canvas></canvas>
</body>
<script>
const width = innerWidth;
const height = innerHeight;

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
const dataArray = new Uint8Array(analyser.fftSize);
const drawLength = dataArray.length/2;
let drawArray = [];

const canvas = document.querySelector('canvas');
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);

const canvasCtx = canvas.getContext("2d");
canvasCtx.fillStyle = 'rgba(0, 0, 0, 1)';
canvasCtx.strokeStyle = 'rgb(255, 0, 0)';
canvasCtx.lineWidth = 1;
canvasCtx.translate(width/2, height/2);

navigator.getUserMedia (
  {audio: true},
  function(stream) {
    audioCtx.createMediaStreamSource(stream).connect(analyser);
    draw();
  },
  function(err) {
    console.log('The following gUM error occured: ' + err);
  }
);

https://d3js.org/d3.v4.min.js