Визуализация звука
 

Привет. Накопал код, типа эквалайзера:

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Подключение аудио-источника (например, `<audio>` элемент)

const audio = document.getElementById('audio');
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function draw() {
    requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    const barWidth = (canvas.width / bufferLength) * 2.5;
    let barHeight;
    let x = 0;
    for (let i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i];
        ctx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
        ctx.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);
         x += barWidth + 1;
    }
} 
draw();

Системный плеер - не работает. Есть два момента:

1-й: The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
(Запуск AudioContext невозможен. Его необходимо возобновить (или создать) после жеста пользователя на странице)

2-й: [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
([Нарушение] Добавлен не пассивный прослушиватель событий, для события «колесо», блокирующий прокрутку. Рекомендуется отметить обработчик событий, как «пассивный», что-бы сделать страницу более адаптивной)

Ещё были CORS-ограничения - их обошёл.
Не понятно - вокруг чего суета?