Body.arrayBuffer()

Метод arrayBuffer() из примеси(mixin) Body берет поток(stream) Response и читает его до завершения. Он возвращает промисс, который будет успешно завершен с помощью ArrayBuffer.

Синтаксис

response.arrayBuffer().then(function(buffer) {
  // можно сделать что либо с буфером
});

Параметры

Нат параметров.

Возвращаемое значение

Промисс, который содержит ArrayBuffer.

Пример

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

new Audio(music.ogg).play()

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

Когда функция getData() заканчивает свое выполнение, мы стартуем проигрывание аудио ресурса функцией start(0), потом блокируем кнопку проигрывания для предотвращения повторного проигрывания (это может привести к ошибкам)

function getData() {
  source = audioCtx.createBufferSource();

  var myRequest = new Request('viper.ogg');

  fetch(myRequest).then(function(response) {
    return response.arrayBuffer();
  }).then(function(buffer) {
    audioCtx.decodeAudioData(buffer, function(decodedData) {
      source.buffer = decodedData;
      source.connect(audioCtx.destination);
    });
  });
};

// навешиваем обработчики старт и стоп на кнопку
play.onclick = function() {
  getData();
  source.start(0);
  play.setAttribute('disabled', 'disabled');
}

Спецификация

Спецификация Статус Комментарии
Fetch
Определение 'arrayBuffer()' в этой спецификации.
Живой стандарт  

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
arrayBuffer
Экспериментальная
Chrome Полная поддержка 42
Полная поддержка 42
Полная поддержка 41
Отключено
Отключено From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка ≤18Firefox Полная поддержка 39
Полная поддержка 39
Полная поддержка 34
Отключено
Отключено From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 29
Полная поддержка 29
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari Полная поддержка 10.1WebView Android Нет поддержки НетChrome Android Полная поддержка 42Firefox Android Нет поддержки НетOpera Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 4.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

Смотрите также