Web Audio API: setting playbackRate
I was working on a little demo showing the manipulation of playback rates of audio clips. The Audio tag failed miserably. On Safari and Chrome (both for Mac) the audio tag couldn't playback the audio any slower than half speed.
For what I was working on, this meant trying out the Web Audio API. I stole some code that allowed for playback, got it working, then tried to manipulate the playbackRate for the clip. But no joy, no Chipmunks singing for me.
I looked up a couple of things, and many of them pointed at this statement from the HTML5Rocks Web Audio API FAQ:
Q: HOW CAN I CHANGE THE PITCH OF A SOUND USING THE WEB AUDIO API?
A: Change the playbackRate on the source node.
I tried and I tried for an hour to get this to work using this syntax:
source.playbackRate = 2.0;
Turns out you have to set it as:
source.playbackRate.value = 2.0;
Hopefully, this spares you some time.
3 responses so far ↓
1 Cameron
Awesome! I was so confused as to why setting playbackRate wasn't working. The API docs are pretty bad...Any idea how to play a sound in reverse?
2 tpryan
Negative values should reverse it. Haven't tested it, but the docs say so.3 tml
Thanks! It seems that WebKit does not support reverse playback with negative values at the moment, see: https://bugs.webkit.org/show_bug.cgi?id=69725Leave a Comment