Response : méthode arrayBuffer()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.

Note : Cette fonctionnalité est disponible via les Web Workers.

La méthode arrayBuffer() de l'interface Response prend le flux de la réponse et le lit jusqu'à la fin. Elle retourne une promesse qui est résolue avec un objet ArrayBuffer.

Syntaxe

arrayBuffer()

Valeur de retour

Une promesse qui est résolue avec un objet ArrayBuffer.

Exceptions

AbortError DOMException

La requête a été annulée.

TypeError

Levée pour l'une des raisons suivantes :

Le corps de la réponse est perturbé ou verrouillé.
Une erreur s'est produite lors du décodage du contenu du corps (par exemple, si l'en-tête HTTP Content-Encoding est incorrect).

RangeError

Levée s'il y a un problème lors de la création de l'objet ArrayBuffer associé (par exemple, si la taille des données est trop grande).

Dans notre exemple de récupération d'un tableau tampon ^(angl.), il y a un bouton « Exécuter ». Lorsqu'il est pressé, la fonction getData() est exécutée. Notez que le fichier audio complet sera téléchargé avant d'être joué. Si vous souhaitez lire un fichier ogg pendant le téléchargement (en streaming), utilisez HTMLAudioElement :

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

Dans getData(), nous créons une nouvelle requête avec le constructeur Request(), puis nous l'utilisons pour récupérer une piste musicale OGG. Nous utilisons également AudioContext.createBufferSource pour créer une source de tampon audio. Lorsque la récupération est réussie, nous lisons un ArrayBuffer à partir de la réponse avec arrayBuffer(), nous décodons les données audio avec AudioContext.decodeAudioData(), nous définissons les données décodées comme tampon de la source audio (source.buffer), puis nous connectons la source à la AudioContext.destination.

Une fois que getData() a terminé, nous lançons la lecture de la source audio avec start(0), puis nous désactivons le bouton de lecture pour éviter qu'il soit cliqué à nouveau pendant la lecture (cela provoquerait une erreur).

function obtenirDonnees() {
  const contexteAudio = new AudioContext();

  return fetch("viper.ogg")
    .then((reponse) => {
      if (!reponse.ok) {
        throw new Error(`Erreur HTTP, statut = ${reponse.status}`);
      }
      return reponse.arrayBuffer();
    })
    .then((tampon) => contexteAudio.decodeAudioData(tampon))
    .then((donneesDecodees) => {
      const source = new AudioBufferSourceNode(contexteAudio);
      source.buffer = donneesDecodees;
      source.connect(contexteAudio.destination);
      return source;
    });
}

// connecter les boutons pour arrêter et jouer l'audio

play.onclick = () => {
  obtenirDonnees().then((source) => {
    source.start(0);
    play.setAttribute("disabled", "disabled");
  });
};

Lire des fichiers

Le constructeur Response() accepte des File et des Blob, il peut donc être utilisé pour lire un File dans d'autres formats.

html

<input type="file" />

function lireFichier(fichier) {
  return new Response(fichier).arrayBuffer();
}

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