JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<canvas id="fft" height="250px"></canvas>
<audio id="voice" src="http://dogmatist.pro/upload/mp3ex.netTony_Martinez_and_D/I_feel.mp3" controls autoplay></audio>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

var canvas = document.getElementById('fft');
var ctx = canvas.getContext('2d');
canvas.width = document.body.clientWidth / 1.4;

const CANVAS_HEIGHT = canvas.height;
const CANVAS_WIDTH = canvas.width;

var audioElement = document.querySelector('#voice');

var context = new webkitAudioContext();
var analyser = context.createAnalyser();

function rafCallback(time) {
  var freqByteData = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(freqByteData);

  var SPACER_WIDTH = 17;
  var numBars = Math.round(CANVAS_WIDTH / SPACER_WIDTH);

  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

  // Draw rectangle for each frequency bin.
  for (var i = 0; i < numBars; ++i) {
    var magnitude = freqByteData[i];
    ctx.fillRect(i * SPACER_WIDTH, CANVAS_HEIGHT, 15, -magnitude);
  }

  window.webkitRequestAnimationFrame(rafCallback, canvas);
}

function onLoad(e) {
  var source = context.createMediaElementSource(audioElement);
  source.connect(analyser);
  analyser.connect(context.destination);

  rafCallback();
}

//window.addEventListener('load', onLoad, false);
onLoad();