在 getData() 中，我們使用 Request() 建構函式建立一個新的請求，然後使用它來獲取 OGG 音軌。我們還使用 AudioContext.createBufferSource 來建立一個音訊緩衝區源。當 fetch 成功時，我們使用 arrayBuffer() 從響應中讀取一個 ArrayBuffer，使用 AudioContext.decodeAudioData() 解碼音訊資料，將解碼後的資料設定為音訊緩衝區源的緩衝區（source.buffer），然後將源連線到 AudioContext.destination。

當 getData() 執行完畢後，我們使用 start(0) 開始播放音訊源，然後停用播放按鈕，這樣在音訊正在播放時就不會再次被點選（這會導致錯誤）。

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

讀取檔案

Response() 建構函式接受 File 和 Blob，因此它可以用於將 File 讀取為其他格式。

html

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