Control Playback of Web Audio API Buffer

1
votes

I want to be able to record an audio input into a buffer, and play it back with controls like a normal <audio> tag. Is it possible to control playback (pause, play, skip, scrub, etc.)?

For instance, in Chris Wilson's project: http://webaudiodemos.appspot.com/AudioRecorder/index.html, he records microphone input, and allows it to be downloaded as a WAV. Rather than download, after the recording, I'd like to be able to use standard audio controls to play it back. I'm not sure if the buffer is meant to be used in such a manner.

If this is not possible, do I need to convert that buffer to an audio file (ogg/mp3/wav) first? To give more context, imagine the application being created is like a GarageBand type program with audio input that can be played back and edited after you record it.

My question seems like it is related to this one, except I am not sending anything to a server, and I am getting my audio input via audioRecorder.getBuffers() which is defined in the RecorderJS Project.

1
html5-audioweb-audio-api

1 Answers

2
votes

So, you have two options -

1) you can just take the (merged!) AudioBuffer that you can obtain from RecordJS and play it back directly. This is the most efficient; you're not "encoding" it as a WAV and then having to decode it again. The downside is that playing back an audio buffer directly means you'll have to implement the player controls yourself - it's easy enough to implement pause, play, skip, scrub, etc, but you'll have to do it. ("scrub" is moderately difficult, but the rest are pretty straightforward. Note that you don't really have "pause" in AudioBufferSourceNode - you need to stop() the BufferSource node, remember where you are, and then create a new BufferSource node and start() when the transport un-pauses.) Hmm, this is starting to sound like a good side project as an example - unfortunately, my pile is rather high at the moment.

2) you can, instead of "downloading", just take the blob URL and use it as the SRC of an element - that will do the playback for you. This will be much easier, but you don't have the finegrained control - and you are effectively copying the buffer at least once here.

For a DAW-like project like GarageBand, I'd heavily recommend #1, since you're going to want to do custom transport controls anyway (since you want to play multiple tracks synchronized, etc.) It'll take a little longer to implement, but it's more efficient, and closer to what you want to do.