let canvasContext, context, analyserNode;
function initiate() {
  const video = document.getElementById("media");
  const canvas = document.getElementById("canvas");
  canvasContext = canvas.getContext("2d");
  context = new AudioContext();

  video.addEventListener("play", function() {
    if (context.state === "suspended") {
      context.resume();
    }
  });
  const sourceNode = context.createMediaElementSource(video);
  analyserNode = context.createAnalyser();
  analyserNode.fftSize = 512;
  analyserNode.smoothingTimeConstant = 0.9;

  sourceNode.connect(analyserNode);
  analyserNode.connect(context.destination);

  showgraphic();
}
function showgraphic() {
  const data = new Uint8Array(analyserNode.frequencyBinCount);
  analyserNode.getByteFrequencyData(data);

  canvasContext.clearRect(0, 0, 500, 272);
  for (let f = 0; f < analyserNode.frequencyBinCount; f++) {
    canvasContext.fillRect(f * 5, 272 - data[f], 3, data[f]);
  }
  requestAnimationFrame(showgraphic);
}
window.addEventListener("DOMContentLoaded", initiate);