One direction of this exchange is possible - I know you can use the source of an <audio> element as a means of getting audio for use with the Web Audio API via createElementSourceNode(). Is it possible to do the opposite, where an AudioBufferSourceNode is used as the source for an <audio> element?

I'm pretty sure this is impossible, but I've been looking through npm for standard-looking, no-frills recreations of default browser audio element playback controls intended for use with AudioBuffers and I'm not finding anything.

One direction of this exchange is possible - I know you can use the source of an <audio> element as a means of getting audio for use with the Web Audio API via createElementSourceNode(). Is it possible to do the opposite, where an AudioBufferSourceNode is used as the source for an <audio> element?

I'm pretty sure this is impossible, but I've been looking through npm for standard-looking, no-frills recreations of default browser audio element playback controls intended for use with AudioBuffers and I'm not finding anything.

• javascript
• html5-audio
• web-audio-api

Share Improve this question Follow edited Aug 1, 2019 at 6:41 Tinstar asked Aug 1, 2019 at 6:25 TinstarTinstar 31533 silver badges1414 bronze badges 4

• You mean in node.js? web-audio-api is intended for browsers so are HTMLAudioElements. – Kaiido Commented Aug 1, 2019 at 6:37
• Sorry - I'm using node.js with babel to bundle everything, probably should get rid of that tag. This is all happening on the browser. – Tinstar Commented Aug 1, 2019 at 6:41
• Why do you need this? After all, if you have an AudioBufferSourceNode, you have an AudioContext, and you can plug the node into the AudioContext's output and get sound out. – AKX Commented Aug 1, 2019 at 6:42
• Most of the time I'm just playing segments of a large audiosprited file, but if the user wants to view more info for an object, I want to give them the ability to play just that object's audio, with standard audio controls. I'd mute everything else in the background. I don't need it to be in an <audio> tag, I'm just having a hard time finding a library that emulates those controls outside of the <audio> tag. – Tinstar Commented Aug 1, 2019 at 6:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can connect your AudioBufferSourceNode to a MediaStreamDestination node and then feed an HTMLAudioElement srcObject with the .stream property of this node:

start.onclick = e => {

  const audioCtx = new AudioContext();
  fetch("https://dl.dropboxusercontent./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>