使 AudioBufferSourceNode 成为 <audio> 标签的音频源？答案

【问题标题】：Make AudioBufferSourceNode the audio source of an <audio> tag?使 AudioBufferSourceNode 成为 <audio> 标签的音频源？
【发布时间】：2019-08-01 06:25:01
【问题描述】：

这种交换的一个方向是可能的 - 我知道您可以使用 <audio> 元素的源作为通过 createElementSourceNode() 获取与 Web Audio API 一起使用的音频的一种方式。是否可以做相反的事情，将AudioBufferSourceNode 用作<audio> 元素的来源？

我很确定这是不可能的，但我一直在通过 npm 寻找标准外观、简洁的默认浏览器音频元素播放控件，用于 AudioBuffers，但我没有找到任何东西.

【问题讨论】：

你的意思是在 node.js 中？ web-audio-api 适用于浏览器，HTMLAudioElements 也是如此。
对不起 - 我正在使用 node.js 和 babel 来捆绑所有东西，可能应该去掉那个标签。这一切都发生在浏览器上。
为什么需要这个？毕竟，如果你有一个AudioBufferSourceNode，你就有一个AudioContext，你可以将节点插入AudioContext的输出并输出声音。
大部分时间我只是在播放大型音频分割文件的片段，但如果用户想查看对象的更多信息，我想让他们能够播放该对象的音频, 带有标准音频控制。我会在后台静音其他所有内容。我不需要它在<audio>标签中，我只是很难找到一个库来模拟<audio>标签之外的那些控件。

标签： javascript html5-audio web-audio-api

【解决方案1】：

您可以将 AudioBufferSourceNode 连接到 MediaStreamDestination node，然后使用该节点的 .stream 属性提供 HTMLAudioElement srcObject：

start.onclick = e => {

  const audioCtx = new AudioContext();
  fetch("https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3")
  .then(resp => resp.arrayBuffer())
  .then(buf => audioCtx.decodeAudioData(buf))
  .then(audioBuffer => {
    const source = audioCtx.createBufferSource();
    source.buffer = audioBuffer;
    source.playbackRate.value = 0.1;
    source.loop = true;
    source.start(0);
    const streamNode = audioCtx.createMediaStreamDestination();
    source.connect(streamNode);
    const audioElem = new Audio();
    audioElem.controls = true;
    document.body.appendChild(audioElem);
    audioElem.srcObject = streamNode.stream;
  })
  .catch(console.error);
}

&lt;button id="start"&gt;start&lt;/button&gt;

【讨论】：

有趣的是，这似乎会在播放栏循环播放时不断增加时间，而不是在重新启动时将播放头跳回到开头？
那是因为它是一个正在播放的 MediaStream。这个 MediaStream 本身是由循环的 AudioBufferSource 提供的