Попробуйте такое решение, как его приделать:
<head>
<title>Графический эквалайзер</title>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height,width=device-width, user-scalable=no, initial-scale=1">
<style>
canvas{
background: blue;
}
ul{
cursor: pointer;
}
li:hover{
background: gold;
width: 100px;
}
</style>
</head>
<body>
<canvas id=canvas></canvas><br /><br />
<ul class="playlist">
<li onclick="audio.src='stekla.mp3';audio.play()">Sound1</li>
<li onclick="audio.src='naetoy1.mp3';audio.play()">Sound2</li>
<li onclick="audio.src='dlalekcii.mp3';audio.play()">Sound3</li>
</ul>
</body>
canvas.width = 1024;
canvas.height = 256;
const audio = new Audio();
audio.controls = true;
document.body.append(audio);
audio.onplay = function(){
audioCtx = new AudioContext();
let source = audioCtx.createMediaElementSource(audio);
let analyser = audioCtx.createAnalyser();
source.connect(analyser); // Подключаем анализатор к элементу audio
analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает.
let frequencyData = new Uint8Array(analyser.frequencyBinCount);
let ctx = canvas.getContext('2d');
setInterval(function(){
analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
ctx.fillStyle = "black"; // Задаём цвет фона
ctx.globalAlpha = 0.05; // Это для получения эффекта плавного погасания полос
ctx.fillRect (0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран
ctx.globalAlpha = 1;
for(i = 0; i < canvas.width; i ++){
let ii = Math.floor(i / canvas.width * 1024);
let dd = frequencyData[ii] / 256 * canvas.height;
ctx.fillStyle = "rgb(" + (128 + 128 * Math.sin((ii + 200 / canvas.width * 1024) / 43)) + ", " + (128 + 128 * Math.sin(ii / 73)) + ", " + (128 + 128 * Math.sin(ii / 35)) + ")";
ctx.fillRect(i, canvas.height - dd - 1, 1, dd); // рисуем полосу
}
}, 20);
}
Живая ссылка:
https://mysynthesizer.github.io/inde.../analiser.html