Skip to content

Instantly share code, notes, and snippets.

Last active June 29, 2017 22:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexmacy/a39e1e54f68c45b5e1bb5b27c78908db to your computer and use it in GitHub Desktop.
Save alexmacy/a39e1e54f68c45b5e1bb5b27c78908db to your computer and use it in GitHub Desktop.
Audio Radial Line - bright
license: mit

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

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 - Bright</title>
<script src="//"></script>
<body style="margin: 0px">
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');
const canvasCtx = canvas.getContext("2d");
canvasCtx.fillStyle = 'rgba(255, 255, 255, 1)';
canvasCtx.strokeStyle = 'rgb(255, 0, 0)';
canvasCtx.lineWidth = 1;
canvasCtx.translate(width/2, height/2);
navigator.getUserMedia (
{audio: true},
function(stream) {
function(err) {
console.log('The following gUM error occured: ' + err);
const radialLine = d3.radialLine()
.angle(function(d, i) {
return i / (drawLength / 2) * Math.PI * 2
.radius(function(d, i) {
return Math.abs(drawArray[i] - 128) / 128 * Math.min(height, width/2)
function draw() {
canvasCtx.fillRect(-width/2, -height/2, width, height);
drawArray = [...Array.from(dataArray), ...drawArray].slice(0, drawLength);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment