Фон, реагирующий на звук через Web Audio API!

С помощью Web Audio API можно в реальном времени анализировать входящий аудиопоток с микрофона и использовать полученные данные для динамического изменения фона.

Добавим кнопку:
<button id="start">Включить микрофон</button>

Подключаем микрофон и создаём источник:
const btn = document.getElementById("start");

btn.onclick = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const ctx = new AudioContext();
await ctx.resume(); // требуется в некоторых браузерах
const src = ctx.createMediaStreamSource(stream);

Создаём анализатор:
const analyser = ctx.createAnalyser();
const data = new Uint8Array(analyser.frequencyBinCount);
src.connect(analyser);

Меняем фон в зависимости от уровня сигнала:
function animate() {
analyser.getByteFrequencyData(data);
const volume = data.reduce((a, b) => a + b, 0) / data.length;
const hue = Math.min(360, volume * 3);
document.body.style.background = `hsl(${hue}, 80%, 50%)`;
requestAnimationFrame(animate);
}

Запускаем:
animate();
btn.remove();
};

Говорите — и фон реагирует в реальном времени. Такой эффект можно использовать в музыкальных визуализациях, интро-анимациях или как интерактивную деталь интерфейса.

Code Ready | #практика