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