Fetch arrayBuffer example

    const pre = document.querySelector("pre");
    const myScript = document.querySelector("script");
    const play = document.querySelector(".play");
    const stop = document.querySelector(".stop");
    const errorDisplay = document.querySelector(".error");

    // use fetch to load an audio track, and
    // decodeAudioData to decode it and stick it in a buffer.
    // Then we put the buffer into the source
    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) => {
          errorDisplay.innerHTML = "";
          source.start(0);
          play.disabled = true;
        })
        .catch((error) => {
          errorDisplay.appendChild(document.createTextNode(`Error: ${error.message}`));
        });
    };

    stop.onclick = () => {
      source.stop(0);
      play.disabled = false;
    };

    // dump script to pre element
    pre.innerHTML = myScript.innerHTML;