AudioContext: примеры (JAVASCRIPT)

Простые примеры использования

Создание базового аудиоконтекста:

// Создание контекста с настройками
const context = new AudioContext({
  latencyHint: 'interactive',
  sampleRate: 44100
});
console.log(context.state); // 'running' или 'suspended'

AudioContext {state: 'running', sampleRate: 44100, ...}

Воспроизведение простого тона:

const ctx = new AudioContext();
const oscillator = ctx.createOscillator();
oscillator.connect(ctx.destination);
oscillator.start();
setTimeout(() => oscillator.stop(), 1000);

// Слышим тон частотой 440 Гц в течение 1 секунды

Похожие возможности JavaScript

HTMLAudioElement обеспечивает простой способ встраивания звука через тег <audio>. Подходит для воспроизведения медиафайлов без сложной обработки.

WebRTC позволяет захватывать и обрабатывать аудиопотоки с устройства пользователя, что полезно для видеоконференций.

MediaRecorder API записывает аудиопотоки, но не предоставляет инструментов для тонкой обработки звука.

AudioContext предпочтителен для задач синтеза, анализа или применения эффектов к аудио.

Аналоги в других языках

В Python библиотека pyaudio обеспечивает работу со звуком:

import pyaudio
import numpy as np

p = pyaudio.PyAudio()
stream = p.open(format=pyaudio.paFloat32,
                channels=1,
                rate=44100,
                output=True)
# Генерация и воспроизведение тона
tone = np.sin(2 * np.pi * 440 * np.arange(44100) / 44100)
stream.write(tone.astype(np.float32).tobytes())

В C используют PortAudio или OpenAL для кросс-платформенной работы со звуком. Эти библиотеки требуют больше кода для инициализации по сравнению с браузерным API.

В PHP прямой аналог отсутствует, так как язык работает на сервере. Для обработки аудиофайлов применяют расширения вроде FFmpeg.

Распространенные ошибки

Попытка автоматического воспроизведения без жеста пользователя:

// Не сработает во многих браузерах
const ctx = new AudioContext();
const osc = ctx.createOscillator();
osc.connect(ctx.destination);
osc.start(); // Вызовет ошибку

// Ошибка: NotAllowedError

Решение - запускать контекст по действию пользователя:

document.addEventListener('click', () => {
  if (ctx.state === 'suspended') {
    ctx.resume();
  }
});

Использование узлов после их остановки:

const source = ctx.createBufferSource();
source.start();
source.stop();
// Пытаемся использовать снова - ошибка
source.start();

InvalidStateError: Cannot call start more than once

Изменения в современных версиях

Спецификация Web Audio API обновилась, добавив AudioWorklet как замену устаревшему ScriptProcessorNode для выполнения пользовательской обработки аудио.

Добавлена поддержка channelCountMode и channelInterpretation для лучшего контроля над аудиоканалами.

Метод resume() теперь возвращает Promise, что упрощает работу с асинхронным кодом.

Появилась возможность создать AudioContext с пользовательской частотой дискретизации, если устройство поддерживает.

Расширенные примеры применения

Применение фильтра к аудиопотоку:

async function playFilteredSound() {
  const ctx = new AudioContext();
  const response = await fetch('audio.mp3');
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
  
  const source = ctx.createBufferSource();
  source.buffer = audioBuffer;
  
  const filter = ctx.createBiquadFilter();
  filter.type = 'lowpass';
  filter.frequency.value = 1000;
  
  source.connect(filter);
  filter.connect(ctx.destination);
  source.start();
}

Визуализация аудиоспектра:

const ctx = new AudioContext();
const analyser = ctx.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// Подключение анализатора к источнику звука
source.connect(analyser);
analyser.connect(ctx.destination);

function draw() {
  analyser.getByteFrequencyData(dataArray);
  // Использование dataArray для отрисовки
  requestAnimationFrame(draw);
}

Создание пространственного звука с PannerNode:

const panner = ctx.createPanner();
panner.panningModel = 'HRTF';
panner.setPosition(1, 0, 0); // Источник справа
source.connect(panner);
panner.connect(ctx.destination);