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 beim Dekodieren des Körperinhalts (zum Beispiel, weil der Content-Encoding Header falsch ist).

RangeError

Es trat ein Problem beim Erstellen des zugehörigen ArrayBuffer auf. Zum Beispiel, wenn die Datenmenge mehr als Number.MAX_SAFE_INTEGER beträgt.

In unserem fetch array buffer live gibt es einen Abspielen-Knopf. Wenn dieser gedrückt wird, wird die getData() Funktion ausgeführt. Beachten Sie, dass vor dem Abspielen die vollständige Audiodatei heruntergeladen wird. Falls Sie während des Downloads ogg abspielen müssen (streamen), ziehen Sie HTMLAudioElement in Betracht:

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

In getData() erstellen wir eine neue Anfrage mit dem Request()-Konstruktor und verwenden diese dann, um einen OGG-Musiktrack abzurufen. Wir verwenden auch AudioContext.createBufferSource, um eine Audio-Buffer-Quelle zu erstellen. Wenn das Fetch erfolgreich ist, lesen wir ein ArrayBuffer aus der Antwort mit arrayBuffer(), dekodieren die Audiodaten mit AudioContext.decodeAudioData(), setzen die dekodierten Daten als Puffer der Audio-Buffer-Quelle (source.buffer), und verbinden dann die Quelle mit der AudioContext.destination.

Sobald getData() fertig ist, starten wir die Audioquelle mit start(0), und deaktivieren den Abspielen-Knopf, damit er nicht erneut angeklickt werden kann, wenn er bereits läuft (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 und kann daher verwendet werden, 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