Response: arrayBuffer() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨März 2017⁩.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die arrayBuffer()-Methode des Response-Interfaces nimmt einen Response-Stream und liest ihn bis zum Abschluss. Sie gibt ein Promise zurück, das mit einem ArrayBuffer aufgelöst wird.

Syntax

arrayBuffer()

Rückgabewert

Ein Promise, das mit einem ArrayBuffer aufgelöst wird.

Ausnahmen

AbortError DOMException

Die Anfrage wurde abgebrochen.

TypeError

Wird bei einem der folgenden Gründe ausgelöst:

Der Antwortkörper ist gestört oder gesperrt.
Es gab einen Fehler beim Dekodieren des Körperinhalts (zum Beispiel, weil der Content-Encoding-Header falsch ist).

RangeError

Es gab ein Problem bei der Erstellung des zugehörigen ArrayBuffer. Zum Beispiel, wenn die Datengröße größer ist als Number.MAX_SAFE_INTEGER.

In unserem fetch array buffer live haben wir eine Wiedergabe-Taste. Wenn diese gedrückt wird, wird die getData() Funktion ausgeführt. Beachten Sie, dass vor der Wiedergabe die gesamte Audiodatei heruntergeladen wird. Wenn Sie OGG während des Herunterladens abspielen müssen (streamen), sollten Sie HTMLAudioElement in Betracht ziehen:

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

In getData() erstellen wir eine neue Anfrage unter Verwendung des Request()-Konstruktors und verwenden sie dann, um eine OGG Musikspur abzurufen. Wir verwenden auch AudioContext.createBufferSource, um eine Audiopufferquelle zu erstellen. Wenn der Abruf erfolgreich ist, lesen wir ein ArrayBuffer aus der Antwort mit arrayBuffer(), dekodieren die Audiodaten mit AudioContext.decodeAudioData(), setzen die dekodierten Daten als den Audiodatenpuffer Quelle (source.buffer), und verbinden dann die Quelle mit dem AudioContext.destination.

Sobald getData() fertig ausgeführt ist, starten wir die Audiquelle mit start(0), und deaktivieren dann die Wiedergabe-Schaltfläche, damit sie nicht erneut geklickt werden kann, während sie bereits abgespielt wird (dies würde einen Fehler verursachen).

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");
  });
};

Dateien lesen

Der Response()-Konstruktor akzeptiert Files und Blobs, sodass er verwendet werden kann, um eine File in andere Formate zu lesen.

html

<input type="file" />

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

document
  .querySelector("input[type=file]")
  .addEventListener("change", (event) => {
    const file = event.target.files[0];
    const buffer = readFile(file);
  });