Ответ: метод arrayBuffer()

Метод arrayBuffer() интерфейса Response принимает поток Response и считывает его до конца. Он возвращает промис, который разрешается с ArrayBuffer.

Нет.

Промис, который разрешается с ArrayBuffer.

DOMException AbortError

Запрос был отменён.

TypeError

Выбрасывается по одной из следующих причин:

• Тело ответа повреждено или заблокировано.
• Произошла ошибка при декодировании содержимого тела (например, из-за неверного заголовка Content-Encoding).

RangeError

Возникла проблема при создании связанного ArrayBuffer. Например, если размер данных превышает Number.MAX_SAFE_INTEGER.

В нашем примере загрузки данных в формате arrayBuffer, у нас есть кнопка Play. При нажатии на неё вызывается функция getData(). Обратите внимание, что перед воспроизведением весь аудиофайл будет загружен. Если необходимо воспроизводить ogg во время загрузки (транслировать его) - рассмотрите HTMLAudioElement:

new Audio("music.ogg").play();

В getData() мы создаём новый запрос с помощью конструктора Request(), затем используем его для загрузки музыкального трека в формате OGG. Мы также используем AudioContext.createBufferSource для создания источника аудио буфера. Когда загрузка завершена успешно, мы считываем ArrayBuffer из ответа с помощью arrayBuffer(), декодируем аудиоданные с помощью AudioContext.decodeAudioData(), устанавливаем декодированные данные в качестве буфера источника аудио (source.buffer), затем подключаем источник к AudioContext.destination.

После того, как getData() завершится, мы запускаем воспроизведение источника звука с помощью start(0), затем отключаем кнопку воспроизведения, чтобы её нельзя было нажать ещё раз, когда она уже воспроизводится (это вызовет ошибку).

function getData() {
  const audioCtx = new AudioContext();

  return fetch("viper.ogg")
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error, status = ${response.status}`);
      }
      return response.arrayBuffer();
    })
    .then((buffer) => audioCtx.decodeAudioData(buffer))
    .then((decodedData) => {
      const source = new AudioBufferSourceNode(audioCtx);
      source.buffer = decodedData;
      source.connect(audioCtx.destination);
      return source;
    });
}

// wire up buttons to stop and play audio

play.onclick = () => {
  getData().then((source) => {
    source.start(0);
    play.setAttribute("disabled", "disabled");
  });
};

Конструктор Response() принимает File и Blob, поэтому он может использоваться для чтения File в другие форматы.

function readFile(file) {
  return new Response(file).arrayBuffer();
}

<input type="file" onchange="readFile(this.files[0])" />

• API сервисных рабочих процессов
• Контроль доступа по HTTP (CORS)
• HTTP