Response: arrayBuffer() Methode

Keine.

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

DOMException AbortError

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 bei der Decodierung 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 Datenmenge mehr als Number.MAX_SAFE_INTEGER ist.

In unserem Fetch-ArrayBuffer-Live Beispiel haben wir eine Play-Schaltfläche. Wenn diese 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), ziehen Sie in Betracht, den HTMLAudioElement zu verwenden:

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

In getData() erstellen wir eine neue Anfrage mit dem Request() Konstruktor und verwenden diese, um eine OGG Musikdatei zu holen. Wir verwenden auch AudioContext.createBufferSource, um eine Audio-Pufferquelle zu erstellen. Wenn der Abruf erfolgreich ist, lesen wir ein ArrayBuffer aus der Antwort mit arrayBuffer(), decodieren die Audiodaten mit AudioContext.decodeAudioData(), setzen die decodierten Daten als Puffer der Audioquelle (source.buffer), dann verbinden wir die Quelle mit dem AudioContext.destination.

Sobald getData() abgeschlossen ist, starten wir die Audioquelle mit start(0), und deaktivieren die Play-Schaltfläche, damit sie nicht nochmals geklickt werden kann, während sie bereits spielt (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");
  });
};

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

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

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

• ServiceWorker API
• HTTP-Zugriffskontrolle (CORS)
• HTTP