Web Audio playbackRate explained

This article needs an editorial review. How you can help.

The playbackRate property of the <audio> and <video> elements allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains playbackRate in detail.

playbackRate basics

To start with, let's look at a brief example of playbackRate usage:

var myAudio = document.createElement('audio');
myAudio.setAttribute('src','audiofile.mp3');
myAudio.playbackRate = 0.5;

Here we create an <audio> element and set its src to a file of our choice. Next we set playbackRate to 0.5, which represents half normal speed (the playbackRate is a multiplier applied to the original rate.)

A complete example

First let's create a <video> element and set up video and playback rate controls in HTML:

<video id="myVideo" controls>
  <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type='video/mp4' />
  <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type='video/webm' />
</video>

<form>
  <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" >
  <p>Playback Rate <span id="currentPbr">1</span></p>
</form>

Now we'll apply some JavaScript to it:

window.onload = function () {
 
  var v = document.getElementById("myVideo");
  var p = document.getElementById("pbr");
  var c = document.getElementById("currentPbr");

  p.addEventListener('input',function(){
    c.innerHTML = p.value;
    v.playbackRate = p.value;
  },false);

};

Here we listen for the input event firing on the <input> element, which allows us to react to the playback rate control being changed.

Note: Try out this example live, and try adjusting the playback rate control to see the effect.

defaultPlaybackRate and ratechange

In addition to playbackRate we also have a defaultPlaybackRate property available, which lets us set the default playback rate: the playback rate the media resets to if we (for example) change the source of the video, or (in some browsers) when an ended event is generated.

So defaultPlaybackRate allows us to set the playback rate before playing the media, while playbackRate allows us to change it during media playback.

There is also an event available called ratechange, which fires every time the playbackRate changes.

Browser support

  • Chrome 20+ ✔
  • Firefox 20+ ✔
  • IE 9+ ✔
  • Safari 6+ ✔
  • Opera 15+ ✔
  • Mobile Chrome (Android) ✖
  • Mobile Firefox 24+ ✔
  • IE Mobile ✖
  • Mobile Safari 6+ (iOS) ✔
  • Opera Mobile ✖

Notes

  • Most browsers stop playing audio outside playbackRate bounds of 0.5 and 4, leaving the video playing silently. It's therefore recommended for most applications that you limit the range to between 0.5 and 4.
  • The pitch of the audio track does not change when playBackRate is altered.  
  • Negative values will not cause the media to play in reverse.
  • IE9+ will switch to the default playback rate when an ended event is fired.
  • Firefox generates a ratechange event when the media source is substituted.
  • On iOS 7 you can only affect the playbackRate when the media is paused (not while it's playing).

See Also

Document Tags and Contributors

 Contributors to this page: stevebanikrocana, chrisdavidmills, teoli
 Last updated by: stevebanikrocana,