Привет. Накопал код, типа эквалайзера:
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-ограничения - их обошёл.
Не понятно - вокруг чего суета?
