Практические рекомендации по API Web Audio

Нет строгих правил написания креативного кода. До тех пор, пока вы учитываете безопасность, производительность и доступность, вы можете адаптироваться к своему стилю. В этой статье мы поделимся рядом лучших практик — рекомендаций, советов и хитростей для работы с API Web Audio.

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

При работе с файлами вы можете получить файл из элемента HTMLMediaElement (например, из элемента <audio> или <video>), или вы можете получить файл и декодировать его в буфер. Оба способа допустимы, однако первый чаще используется при работе с полными треками, а второй — с более короткими, похожими на сэмплы треками.

У элементов медиа есть встроенная поддержка потоковой передачи. Звук начнет воспроизводиться, когда браузер определит, что может загрузить остальную часть файла до завершения воспроизведения. Вы можете увидеть пример использования этого с API Web Audio в учебном пособии Использование API Web Audio.

Однако, если вы используете узел буфера, у вас будет больше контроля. Вам нужно запросить файл и подождать его загрузки (данный раздел нашей расширенной статьи показывает хороший способ сделать это), но затем вы получаете доступ к данным напрямую, что означает большую точность и более точную обработку.

Если вы хотите работать со звуком с камеры или микрофона пользователя, вы можете получить доступ к нему через API Захвата медиа и потоков и интерфейс MediaStreamAudioSourceNode. Это подходит для WebRTC и ситуаций, когда вам может потребоваться запись или анализ звука.

Последний способ — сгенерировать свой собственный звук, что можно сделать с помощью OscillatorNode, или создав буфер и заполнив его собственными данными. В учебном пособии создания собственного инструмента вы найдете информацию о создании звуков с помощью генераторов и буферов.

Спецификация API Web Audio постоянно развивается, и, как и многие вещи в веб-разработке, у нее есть проблемы с согласованной работой в разных браузерах. Здесь мы рассмотрим варианты решения проблем с кроссбраузерной совместимостью.

Существует пакет npm standardized-audio-context, который обеспечивает согласованную функциональность API в разных браузерах, заполняя пробелы по мере их обнаружения. Он постоянно развивается и стремится соответствовать текущей спецификации.

Также есть возможность использовать библиотеки, которых несколько в зависимости от вашего случая. Для универсального решения howler.js — хороший выбор. Он поддерживает разные браузеры и предоставляет полезный подмножество функциональности. Хотя он не использует весь спектр фильтров и других эффектов, которые предоставляет API Web Audio, вы можете сделать большинство необходимых вам операций.

Если вы ищете создание звука или инструмент-ориентированный вариант, tone.js — отличная библиотека. Она предоставляет расширенные возможности планирования, синтезаторы и эффекты, а также интуитивные музыкальные абстракции, построенные на базе API Web Audio.

R-audio из отдела исследований и разработок BBC (здесь) — библиотека компонентов React, призванная предоставить «более интуитивный, декларативный интерфейс для Web Audio». Если вы привыкли писать JSX, это может быть полезно.

Браузеры начали внедрять политику автоматического воспроизведения, которую в общем можно сформулировать следующим образом:

«Создавайте или возобновляйте контекст внутри пользовательского жеста».

Но что это значит на практике? Пользовательский жест интерпретируется как событие, инициированное пользователем, обычно click событие. Производители браузеров решили, что контексты Web Audio не должны автоматически воспроизводить звук; их следует запускать с помощью пользователя. Это связано с тем, что автоматическое воспроизведение звука может быть очень раздражающим и навязчивым. Но как с этим справиться?

Когда вы создаете контекст аудио (офлайн или онлайн), он создается со статусом state, который может быть suspended, running, или closed.

При работе с AudioContext, если вы создаете контекст аудио внутри события click , статус автоматически устанавливается на running. Вот пример создания контекста внутри события click:

const button = document.querySelector("button");
button.addEventListener(
  "click",
  () => {
    const audioCtx = new AudioContext();
    // Do something with the audio context
  },
  false,
);

Однако, если вы создаете контекст вне пользовательского жеста, его статус будет suspended , и его необходимо запустить после взаимодействия пользователя. Мы можем использовать тот же пример со щелчком мыши, проверить состояние контекста и запустить его, если он приостановлен, используя метод resume().

const audioCtx = new AudioContext();
const button = document.querySelector("button");

button.addEventListener(
  "click",
  () => {
    // check if context is in suspended state (autoplay policy)
    if (audioCtx.state === "suspended") {
      audioCtx.resume();
    }
  },
  false,
);

Возможно, вы работаете с OfflineAudioContext, в этом случае вы можете возобновить приостановленный контекст аудио с помощью метода startRendering().

Если ваш веб-сайт или приложение содержит звук, вы должны позволить пользователю управлять им, иначе это станет раздражающим. Это можно сделать с помощью кнопок воспроизведения/остановки и управления громкостью/глушением. В учебном пособии Использование API Web Audio рассказывается об этом.

Если у вас есть кнопки, которые включают и выключают звук, использование атрибута ARIA role="switch" на них — хороший способ сообщить средствам輔助技术的 о точном назначении кнопки и, следовательно, сделать приложение более доступным. Здесь показана демонстрация, как его использовать здесь.

Поскольку вы работаете со многими изменяемыми значениями в API Web Audio и хотите предоставить пользователям возможность управлять ими, <input type="range"> — часто хороший выбор. Это хороший вариант, поскольку вы можете установить минимальные и максимальные значения, а также приращения с помощью атрибута step.

Существует два способа изменения значений AudioNode, которые сами являются объектами интерфейса AudioParam. Первый — установить значение напрямую через свойство. Например, если мы хотим изменить значение gain узла GainNode, мы сделаем это так:

gainNode.gain.value = 0.5;

Это установит громкость наполовину. Однако, если вы используете какие-либо из методов AudioParam для установки этих значений, они будут иметь приоритет над предыдущим способом установки. Например, если вы хотите, чтобы значение gain увеличилось до 1 через 2 секунды, вы можете сделать это:

gainNode.gain.setValueAtTime(1, audioCtx.currentTime + 2);

Это переопределит предыдущий пример (как и должно быть), даже если он будет в коде позже.

Учитывая это, если ваш веб-сайт или приложение требует временных и планируемых операций, лучше использовать методы AudioParam для установки значений. Если вы уверены, что этого не требуется, установить значение через свойство value будет достаточно.