OfflineAudioContext

Интерфейс OfflineAudioContext является интерфейсом AudioContext, представляющим аудио-обрабатывающую граф, построенный из связанных между собой AudioNode. В отличие от стандартного AudioContext, OfflineAudioContext не отображает аудио на аппаратном обеспечении устройства; вместо этого он генерирует его с максимальной скоростью и выводит результат в AudioBuffer.

OfflineAudioContext()

Создаёт новый экземпляр OfflineAudioContext.

Также наследует свойства от родительского интерфейса, BaseAudioContext.

OfflineAudioContext.length Только для чтения

Целое число, представляющее размер буфера в образцах-кадрах.

Также наследует методы от родительского интерфейса, BaseAudioContext.

OfflineAudioContext.suspend()

Планирует приостановку хода времени в контексте аудио в указанное время и возвращает промис.

OfflineAudioContext.startRendering()

Начинает рендеринг аудио, учитывая текущие подключения и текущие запланированные изменения. Эта страница охватывает как событийную, так и основанную на промисах версию.

OfflineAudioContext.resume()

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

Прослушивайте эти события с помощью addEventListener() или назначив обработчик событий свойству oneventname этого интерфейса:

complete

Срабатывает, когда рендеринг контекста офлайн-аудио завершается.

В этом примере мы объявляем как объект AudioContext, так и объект OfflineAudioContext. Мы используем AudioContext для загрузки аудиодорожки с помощью fetch(), а затем OfflineAudioContext для рендеринга аудио в AudioBufferSourceNode и воспроизведения дорожки. После настройки графа офлайн-аудио мы рендерим его в AudioBuffer с помощью OfflineAudioContext.startRendering().

Когда промис startRendering() выполняется, рендеринг завершён, и выходной AudioBuffer возвращается из промиса.

На этом этапе мы создаём другой контекст аудио, создаём AudioBufferSourceNode внутри него и устанавливаем его буфер равным промису AudioBuffer. Затем это воспроизводится в рамках простого стандартного аудио графа.

// Define both online and offline audio contexts
let audioCtx; // Must be initialized after a user interaction
const offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);

// Define constants for dom nodes
const play = document.querySelector("#play");

function getData() {
  // Fetch an audio track, decode it and stick it in a buffer.
  // Then we put the buffer into the source and can play it.
  fetch("viper.ogg")
    .then((response) => response.arrayBuffer())
    .then((downloadedBuffer) => audioCtx.decodeAudioData(downloadedBuffer))
    .then((decodedBuffer) => {
      console.log("File downloaded successfully.");
      const source = new AudioBufferSourceNode(offlineCtx, {
        buffer: decodedBuffer,
      });
      source.connect(offlineCtx.destination);
      return source.start();
    })
    .then(() => offlineCtx.startRendering())
    .then((renderedBuffer) => {
      console.log("Rendering completed successfully.");
      play.disabled = false;
      const song = new AudioBufferSourceNode(audioCtx, {
        buffer: renderedBuffer,
      });
      song.connect(audioCtx.destination);

      // Start the song
      song.start();
    })
    .catch((err) => {
      console.error(`Error encountered: ${err}`);
    });
}

// Activate the play button
play.onclick = () => {
  play.disabled = true;
  // We can initialize the context as the user clicked.
  audioCtx = new AudioContext();

  // Fetch the data and start the song
  getData();
};

• Использование Web Audio API