将AudioBufferSourceNode设置为<audio>标签的音频源?

时间:2019-08-01 06:25:01

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

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

我敢肯定这是不可能的,但是我一直在通过npm寻找标准的浏览器,让其与AudioBuffers一起使用的默认浏览器音频元素播放控件更加简洁,但我没有找到任何东西。

1 个答案:

答案 0 :(得分:1)

您可以将AudioBufferSourceNode连接到MediaStreamDestination node,然后使用该节点的HTMLAudioElement srcObject属性来填充.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>