Offtopical Audio Visualization

var color = '#1f1833' // color

var canvasCtx = document.getElementById( 'audioCanvas' ).getContext( '2d' ); // Canvas Context

var audioCtx = new AudioContext(); // Audio Context
var analyser = audioCtx.createAnalyser(); // Analyser to analyse the audio

var source = audioCtx.createMediaElementSource( document.getElementById( 'podcastAudio' ) ); // The audio source, the audio element
source.connect( analyser ); // Connect the source to the analyser
analyser.connect( audioCtx.destination ); // Connect the Analyser to the the context destination.

var bufferLength, dataArray; // Define variables.
var setup = function() {
  document.getElementById( 'audioCanvas' ).width = window.innerWidth;
  document.getElementById( 'audioCanvas' ).height = window.innerHeight; // Set canvas size
  analyser.fftSize = Math.pow( 2, Math.ceil( Math.log( window.innerWidth ) / Math.log( 2 ) ) ) * 2; // Set the the fft size to the window width rounded up to the nearest power of 2
  bufferLength = analyser.frequencyBinCount; // How many values are in the array
  dataArray = new Uint8Array( bufferLength ); // Make the Array for the fft data
}
window.onresize = setup; // Change fft size when window resizes
setup();

function draw() {
  drawVisual = requestAnimationFrame( draw );

  analyser.getByteFrequencyData( dataArray ); // Put fft data into array

  canvasCtx.clearRect(0, 0, window.innerWidth, window.innerHeight ); // Clear the canvas

  var barWidth = 1;
  var barHeight;
  var x = 0;

  for(var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = color; // Change fill to color;
    canvasCtx.fillRect( Math.floor( x ), window.innerHeight - barHeight, barWidth, barHeight ); // Draw the bar

    x += window.innerWidth / bufferLength; // Change the position of bar.
  }
};

draw(); // Start Drawing