JSFiddle - React, Tailwind, and code Playground

by Nikolay Vasilchuk

HTML

<div id="audio"></div>
<div id="canvas"></div>

CSS

#canvas {
    -webkit-box-reflect: below 0px -webkit-linear-gradient(top, transparent, transparent 30%, rgba(255,255,255,0.2));
}
canvas {
    display: block;
}

JavaScript

const BAR_WIDTH = 5; // Ширина полоски
const SPACER_WIDTH = 2; // Ширина отступа
const CANVAS_WIDTH = 400;
const CANVAS_HEIGHT = 160; // Может быть любым

var getAudio = function() {
    // Audio
    var audio = new Audio();
    audio.src = 'https://test.css3.su/das_model.mp3';
    audio.autoplay = true;
    audio.controls = true;
    audio.loop = true;
    audio.crossOrigin = 'anonymous';
    document.querySelector('#audio').appendChild(audio);
    return audio;
};

var getAudioAnalyser = function(audio) {
    var context = new AudioContext();
    var analyser = context.createAnalyser();
    analyser.smoothingTimeConstant = 0.8;
    analyser.fftSize = 128;
    var source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
    return analyser;
};

var af = tf = null;
var numBars = Math.round(CANVAS_WIDTH / (SPACER_WIDTH + BAR_WIDTH));

var drawFrame = function(canvas, canvasContext, analyser) {
    af = requestAnimationFrame(drawFrame.bind(this, canvas, canvasContext, analyser), canvas);
    
    var canvasWidth = canvas.width,
        canvasHeight = canvas.height;

    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqByteData);

    canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);

    for (var i = 0; i < numBars; ++i) {
        var magnitude = Math.ceil(freqByteData[i] * canvasHeight / 255);
        if (magnitude < 2) magnitude = 2;
        canvasContext.fillRect(i * (SPACER_WIDTH + BAR_WIDTH), canvasHeight, BAR_WIDTH, -magnitude);
    }
};
        
// Canvas
var canvas = document.createElement('canvas');
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
document.querySelector('#canvas').appendChild(canvas);

// Canvas Context
var canvasContext = canvas.getContext('2d');
var gradient = canvasContext.createLinearGradient(0, 0, 0,...