SVG Audio Visualizer 3: Polygon Rorschach Swag

index.html

<input id=audiofile type=file>
<svg id=svg></svg>

script.js

// AudioContext and analyser integration from Ali Görkem's 
// Pen "Audio Visualizer #3"
// http://codepen.io/agorkem/pen/PwyNOg/
// thanks dewd!

window.onload = function() {
  
  var audio,
      analyser,
      audioContext,
      sourceNode,
      stream;

  var svg = document.getElementById('svg'),
      svgNS = svg.namespaceURI,
      polygon = document.createElementNS(svgNS, "polygon"),
      points = [];
  
  var width = window.innerWidth,
      height = window.innerHeight,
      maxHeight = height * 0.5,
      fftSize = 512, // 512
      c = 0;
  
  var audioInput = document.getElementById('audiofile');
  
  // choose file
  audioInput.addEventListener('change', function(event) {
    stream = URL.createObjectURL(event.target.files[0]);
    audio = new Audio();
    audio.src = stream;
    setup();
  });

  function setup() {
    audio.addEventListener('canplay', function () {
      document.body.className+='loaded';
      var AudioContext = window.AudioContext || window.webkitAudioContext;
      audioContext = new AudioContext();
      analyser = (analyser || audioContext.createAnalyser());
      analyser.minDecibels = -90;
      analyser.maxDecibels = -10;
      analyser.smoothingTimeConstant = 1;//0.75;
      analyser.fftSize = fftSize;

      sourceNode = audioContext.createMediaElementSource(audio);
      sourceNode.connect(analyser);
      sourceNode.connect(audioContext.destination);

      audio.play();
      update();
    });
  }
  

  function getPoints(freqValue, freqSequence, freqCount, colorSequence) {
    var freqRatio = freqSequence/freqCount,
        x1 = ((width / 2) + Math.cos(freqSequence * Math.PI / (freqCount)) * freqValue / 0.95),
        y1 = ((height / 2) + Math.sin(freqSequence * Math.PI / (freqCount)) * freqValue / 0.95),
        x2 = ((width / 2) + Math.cos(freqSequence * Math.PI / (-freqCount)) * freqValue / 0.95),
        y2 = ((height / 2) + Math.sin(freqSequence * Math.PI / (-freqCount)) * freqValue / 0.95);

    return [x1 + "," + y1, x2 + "," + y2];
  }

  svg.setAttribute("width", width+"px");
  svg.setAttribute("height", height+"px");
  svg.setAttribute("viewBox", "0 0 " + width + " " + height);
  polygon.setAttribute("transform", "rotate(90 "+width/2+" "+height/2+")");
  svg.appendChild(polygon);

  function update() {
    var freqArray = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteTimeDomainData(freqArray);

    // clear points array
    var points1 = [],
        points2 = [];
    
    var average = 0;
    // for each frequency
    for (var i = 0; i < freqArray.length; i++) {
      var p = getPoints(freqArray[i], i + 1, freqArray.length, c);
      points1.push( p[0] );
      points2.push( p[1] );
      average += freqArray[i];
    }
    average /= freqArray.length;
    
    var avgRatio = (average - 100) / (255 - 100);
    polygon.setAttribute("points", [points1, points2.reverse()].join(" "));
    polygon.setAttribute("fill", "hsl(" + c + ",100%," + (avgRatio * 60 + 10) + "%)");
    

    c += 0.5;
    requestAnimationFrame(update);
  }
};

style.scss

body {
  margin: 0;
  background-color: #000000;
  font-family: 'Helvetica', sans-serif;
  color: #FFFFFF;
}

input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

body.loaded input {
  display: none;
}

#svg {
  display: block; 
  position: absolute;
  top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 0);
  polygon {
    stroke: none;
  }
}

SVG Audio Visualizer 3: Polygon Rorschach Swag.markdown

SVG Audio Visualizer 3: Polygon Rorschach Swag

AudioContext and a single SVG polygon. Epilepsy warning!

More in my Audio Visualization Collection

If you have any of Amon Tobin’s music, it’s pretty much perfect for this. Especially the song Bedtime Stories.

AudioContext integration from Ali Görkem's Pen Audio Visualizer #3.

A Pen by Jake Albaugh on CodePen.

License.