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

Question

这种交换的一个方向是可能的 - 我知道您可以使用 <audio> 元素的来源作为通过 [=12= 获取用于网络音频 API 的音频的一种方式].是否可以做相反的事情，将 AudioBufferSourceNode 用作 <audio> 元素的来源？

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

Answer 1

您可以将 AudioBufferSourceNode 连接到此节点的 MediaStreamDestination node and then feed an HTMLAudioElement srcObject with the .stream 属性：

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

<button id="start">start</button>

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

Make AudioBufferSourceNode the audio source of an <audio> tag?

javascript

html5-audio

web-audio-api