Did you know? DZone has great portals for Python, Cloud, NoSQL, and HTML5!
HTML5 Zone is brought to you in partnership with:

I'm a Worldwide Developer Evangelist for Adobe. My job basically entails me traveling the world and talking about the developer tools and technologies that Adobe has to offer or that we support. I'm also the author of Driving Technical Change. It's about convinving reluctant co-workers to adopt new tools and techniques. Terrence is a DZone MVB and is not an employee of DZone and has posted 30 posts at DZone. You can read more from them at their website. View Full User Profile

Web Audio API: Setting playbackRate Correctly

02.15.2012
Email
Views: 1160
  • submit to reddit
The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards.  Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter.

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.

 

Source: http://www.terrenceryan.com/blog/post.cfm/web-audio-api-setting-playbackrate

Published at DZone with permission of Terrence Ryan, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins.  Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards.  This Microzone is supported by Microsoft, and it will delve into the intricacies of using these new web technologies and teach you how to make your websites compatible with all of the modern browsers.