JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<video id="v" controls crossOrigin="anonymous" autoplay loop src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4"></video>
<canvas width="512" height="256" id="c"></canvas>

JavaScript

window.context = new AudioContext();
video = context.createMediaElementSource(document.getElementById('v'));
analyser = context.createAnalyser(); //we create an analyser
analyser.fftSize = 128; //the total samples are half the fft size.
video.connect(analyser);
analyser.connect(context.destination);
window.ctx = document.getElementById('c').getContext("2d");

function draw() {
  var array = new Uint8Array(analyser.fftSize);
  analyser.getByteTimeDomainData(array);
  ctx.clearRect(0, 0, 256, 256);

  var average = 0;
  var max = 0;
  for (i = 0; i < array.length; i++) {
    a = Math.abs(array[i] - 128);
    average += a;
    max = Math.max(max, a);
  }

  average /= array.length;
  ctx.fillStyle = 'blue';
  ctx.fillRect(0, 256-average, 256, 256);
  ctx.beginPath();
  ctx.arc(64, 128, average, 0, Math.PI * 2, true);
  ctx.arc(128 + 128, 128, max, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();

  requestAnimationFrame(draw);
}
draw();