Web Audio API: setting playbackRate

Posted by: Terry Ryan on February 14, 2012

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.

Terry Ryan

About Terry Ryan

Terry Ryan is a Worldwide Developer Evangelist for Adobe. The job basically entails helping developers using Adobe technologies to be successful. His focus is on web and mobile technologies including expertise in both Flash and HTML. Previous to that, he spent a decade working in various technical roles at the Wharton School at the University of Pennsylvania.

Terry is also the author of Driving Technical Change, a Pragmatic Bookshelf title. It's about convincing reluctant co-workers to adopt new tools and ideas.

He blogs at http://terrenceryan.com/blog and is tpryan on Twitter.