Первые шаги с Web Audio API

Примеры коды были протестированы в Chrome, но вы, вероятно, можете следовать за ним, используя консоль инструментов разработчика вашего любимого браузера.

Перед тем как начать

Как уже упоминалось, поддержка Web Audio API не является универсальной, поэтому лучше проверить, что API доступен в браузере пользователя:

let audioContext;

try {
  audioContext =
    new (window.AudioContext || window.webkitAudioContext)();
} catch (error) {
  window.alert(
    `Извините, но ваш браузер не поддерживает Web Audio API!`
  );
}

if (audioContext !== undefined) {
  /* Наш код здесь */
}

После этой простой проверки мы можем использовать функциональность Web Audio API.

Немного про AudioContext

Возможно было бы полезно представить наш экземпляр AudioContext - как своего рода диджея: он координирует сборник аудиоисточников и гарантирует, что источники будут воспроизводиться через динамики пользователя в нужное время и с правильным «звуком». И как диджей, мы можем думать о audioContext как о посреднике между источниками звука и «звуковой системой», звуковым оборудованием хост-машины. Вот еще несколько вещей, которые следует иметь в виду при работе с AudioContext:

• AudioContext является ведущим «временным хранителем». Все сигналы должны быть запланированы относительно audioContext.currentTime.
• Экземпляры AudioContext могут создавать звуковые источники с нуля.

Простой генератор

Чтобы узнать, какие звуки он может генерировать самостоятельно, давайте использовать audioContext для создания OscillatorNode:

const oscillator = audioContext.createOscillator();

Это все, что нам нужно для создания звука в браузере - AudioContext и OscillatorNode. Но сначала нам нужно «подключить» генератор к нашему аудиоконтексту:

oscillator.connect(audioContext.destination);

API веб-аудио пытается имитировать аналоговую цепочку сигналов. Мы подключаем наш входной сигнал (генератор) к цифровому усилителю мощности (audioContext), который затем передает сигнал на динамики.

Давайте запустим наш генератор:

oscillator.start();

Вы должны услышать звук, сопоставимый с гудком. Поздравляем, вы создаете музыку с помощью Web Audio API! Конечно, никто не хочет слышать один и тот же звук. Вы можете остановить наш генератор таким образом:

oscillator.stop();

Как только AudioNode остановлен, его нельзя запустить снова! Для возобновления воспроизведения необходимо создать новый AudioNode.

Методы start и stop принимают один параметр типа number. Значение параметра используется для планирования событий запуска / остановки:

/* Воспроизвести звук через 10 секунд */
oscillator.start(audioContext.currentTime + 10);

/* Выключить звук через 10 секунд */
oscillator.stop(audioContext.currentTime + 20);

Управление звуком с помощью AudioParams

Регистрируя объект oscillator, мы получаем что-то вроде этого (конкретные значения свойств опущены, поскольку они могут быть разными в зависимости от устройства / браузера):

console.log(oscillator);
/*
  {
    channelCount: number,
    context: AudioContext,
    detune: AudioParam,
    type: 'sine' | 'sawtooth' | 'triangle' | 'square'
    frequency: AudioParam,
    numberOfInputs: number,
    numberOfOutputs: number,
    onended: function
    ...
  }
*/

Свойство, которое имеет наибольшее значение для наших целей, - это oscillator.frequency

console.log(oscillator.frequency);
/*
  {
    defaultValue: number,
    maxValue: number,
    minValue: number,
    value: number // Probably 440 (A4)
  }
*/

Значение frequency нашего генератора реализует интерфейс AudioParam. Звуком AudioNode, можно манипулировать с помощью его свойств AudioParam. Однако прямое переназначение свойства значения AudioParam устарело в пользу вспомогательных методов.

/* Не делайте этого */
oscillator.frequency.value = 500;

Если мы хотим, чтобы наш oscillator излучал «Bb» вместо «A», мы должны сделать что-то вроде этого:

/* Частота (в Hz) Bb4 равна 466,16 */
oscillator
  .frequency
  .setValueAtTime(466.16, audioContext.currentTime);

или

/* Медленный переход на Bb4 в течение 10 секунд */
oscillator
  .frequency
  .exponentialRampToValueAtTime(
      466.16,
      audioContext.currentTime + 10
  );

Бонус: настройка периодической формы сигнала

Наш oscillator использует периодический сигнал, чтобы излучать его тон. Форма волны представлена свойством типа интерфейса OscillatorNode. По умолчанию тип «sine». Большинство браузеров поддерживают как минимум три других варианта: «sawtooth», «triangle» и «square». Таким образом, изменение «тона» нашего генератора так же проста, как:

oscillator.type = 'triangle';

Вывод

Создание и управление аудио в браузере проще, чем когда-либо, благодаря Web Audio API. С его помощью веб-разработчики могут воссоздавать ретро-сигналы в 3-5 строчек кода.

Источник