Аудиограф

Web Audio API обрабатывает звук как граф из узлов. Источник создаёт сигнал, узлы-эффекты его меняют, а последний узел отправляет звук на динамики.

Осциллятор подключён к фильтру, gain, анализатору и динамикам
Осциллятор подключён к фильтру, gain, анализатору и динамикам
  • AudioContext — контейнер и часы всей аудиоработы. ctx.currentTime — время в секундах.
  • Источники: OscillatorNode (синтезированная волна) и AudioBufferSourceNode (сэмпл).
  • Эффекты: GainNode (громкость), BiquadFilterNode (фильтр), StereoPannerNode (баланс).
  • AnalyserNode только измеряет сигнал; ctx.destination — выход.
  • Значения AudioParam, например gain.gain и osc.frequency, можно менять по расписанию.

Узлы соединяют через connect(): он возвращает переданный узел, поэтому цепочки читаются слева направо.

AudioContext и политика autoplay

javascript
const ctx = new AudioContext();

startButton.addEventListener('click', async () => {
  if (ctx.state === 'suspended') {
    await ctx.resume();
  }
  beep();
});

Браузеры блокируют звук, пока пользователь не взаимодействовал со страницей. Контекст, созданный раньше, стартует в состоянии suspended. Вызывайте ctx.resume() в обработчике клика, касания или клавиши и запускайте звук оттуда.

⚠️ Если вызвать resume() вне действия пользователя, его promise может так и не завершиться. Вместо попытки играть при загрузке покажите кнопку «Старт».

Осциллятор, gain и огибающая

OscillatorNode генерирует волну: sine, square, sawtooth или triangle. Частота задаётся в герцах; 440 Гц — это нота ля.