Antwort: `arrayBuffer()` Methode

Keine.

Ein Versprechen, 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.
• Beim Dekodieren des Körperinhalts trat ein Fehler auf (zum Beispiel, weil der Content-Encoding-Header nicht korrekt ist).

RangeError

Es gab ein Problem beim Erstellen des zugehörigen ArrayBuffer. Zum Beispiel, wenn die Datengröße mehr als Number.MAX_SAFE_INTEGER beträgt.

In unserem fetch array buffer live haben wir einen Abspiel-Button. Wenn dieser gedrückt wird, wird die getData() Funktion ausgeführt. Beachten Sie, dass, bevor die vollständige Audiodatei abgespielt wird, sie heruntergeladen wird. Wenn Sie ogg während des Herunterladens abspielen müssen (es streamen) - erwägen Sie die Verwendung von HTMLAudioElement:

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

In getData() erstellen wir eine neue Anfrage mithilfe des Request() Konstruktors und nutzen diese, um eine OGG-Musikspur abzurufen. Wir verwenden auch AudioContext.createBufferSource, um eine Audio-Buffer-Quelle zu erstellen. Wenn das Abrufen erfolgreich ist, lesen wir einen ArrayBuffer aus der Antwort mithilfe von arrayBuffer(), dekodieren die Audiodaten mit AudioContext.decodeAudioData(), setzen die dekodierten Daten als Puffer der Audioquelle (source.buffer), und verbinden die Quelle mit der AudioContext.destination.

Sobald getData() fertig ist, beginnen wir, die Audioquelle mit start(0) abzuspielen, und deaktivieren den Abspiel-Button, damit er nicht erneut geklickt werden kann, während bereits abgespielt wird (das 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, daher kann er verwendet werden, um eine File in andere Formate zu lesen.

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

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