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 der Response Schnittstelle 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 aus einem der folgenden Gründe ausgelöst:

Der Antwortkörper ist gestört oder gesperrt.
Es gab einen Fehler beim Decodieren des Körperinhalts (z.B. weil der Content-Encoding Header falsch ist).

RangeError

Wird ausgelöst, wenn es ein Problem bei der Erstellung des zugehörigen ArrayBuffer gibt (z.B. wenn die Datengröße zu groß ist).

In unserem fetch array buffer live haben wir einen Play-Knopf. Wenn dieser gedrückt wird, wird die getData() Funktion ausgeführt. Beachten Sie, dass vor dem Abspielen die vollständige 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 mit dem Request() Konstruktor und nutzen sie, um eine OGG-Musikspur abzurufen. Wir verwenden auch AudioContext.createBufferSource, um eine Audio-Buffer-Quelle zu erstellen. Bei erfolgreichem Abruf lesen wir einen ArrayBuffer aus der Antwort mit arrayBuffer(), decodieren die Audiodaten mit AudioContext.decodeAudioData(), setzen die decodierten Daten als den Buffer der Audio-Buffer-Quelle (source.buffer), und verbinden die Quelle mit dem AudioContext.destination.

Sobald getData() fertig ist, starten wir die Audiowiedergabe mit start(0) und deaktivieren den Play-Knopf, sodass er nicht erneut geklickt werden kann, wenn er bereits abspielt (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);
  });