Using <audio> element for playback of raw audio

Question

I'm working on a little project that decrypts (using openpgp.js) and decodes a server-side audio file using the Web Audio API. The decrypted file arrives to the client as raw audio. Currently I can play back audio files using source.start(0) but there doesn't seems to be an easy way to dump the audio to a GUI that would allow users to do things like adjust volume and seek through the audio.

I have a AudioContext object that's decoded and buffered with createBufferSource

function playSound(decodedAudio) {
  var source = context.createBufferSource();
  source.buffer = decodedAudio;
  source.connect(context.destination);
  source.start(0);
}

Because it's raw audio being received I can't simple use something like audio.src = ... with an audio element. Or maybe I'm overlooking something obvious?
Is there a way to have this decoded audio within the Web Audio API play nicely with a destination <audio> element?

The ideal flow would look something like...
1) User clicks to engage the playback of an audio clip
2) The audio is decrypted server side and sent to the client as a raw audio
3) The audio is decoded and playable, seekable...etc.

Possible solutions that I'd love thoughts on
- Because the audio files can range anywhere from 1 minute to 60 minutes, write the audio to a file using the FileSystem API and then use an <audio> element for actual playback
- Write my own control system for pausing, scrubbing, and volume on top of the Web Audio API

Answer 1

Nice question! The simplest solution would be storing the decoded content in a Blob.

That would allow you to set the src attribute.

var blob = new Blob(decodedData, {type: "correct-mimetype/here"});
var url = URL.createObjectURL(blob);
audio.src = url;