ratechange | onratechange event

Occurs when the playback rate is increased or decreased.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.Internet Explorer 9



HTML Attribute <element onratechange = "handler(event)">
Event Property object.onratechange = handler;
addEventListener Method object.addEventListener("ratechange", handler, useCapture)


Event information



Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information


This event is raised when the value of playbackRate changes.

To invoke this event, do one of the following:


This example plays an audio file and lets you speed it up or slow it down. The ratechange event fires on rate changes and the current playbackRate value is displayed below the buttons. The increase speed button adds a 1 to the playback rate, so it starts at normal and increases the multiplier with each button click. The decrease speed button divides the playbackRate by 2 with each button click. These jumps are intentionally large to show the effect, however you may choose to use smaller increments.

 <!DOCTYPE html>
    <title>Audio playbackRate Example</title>  
  <audio id="audio1" style="width:25%" controls>Canvas not supported</audio>
<input type="text" id="audioFile" value="audio.mp3" size="60" />

  <button id="playbutton" onclick="togglePlay();">Play</button>  
  <button onclick="increaseSpeed();">Increase speed</button>
  <button onclick="decreaseSpeed();">Decrease speed</button><br />
  <div id="rate"></div>

     <script type="text/javascript">
       // Create a couple of global variables to use. 
       var audioElm = document.getElementById("audio1"); // Audio element
       var ratedisplay = document.getElementById("rate"); // Rate display area

       // Hook the ratechange event and display the current playbackRate after each change
       audioElm.addEventListener("ratechange", function () {
         ratedisplay.innerHTML = "Rate: " + audioElm.playbackRate;
       }, false);

       //  Alternates between play and pause based on the value of the paused property
       function togglePlay() {
         if (document.getElementById("audio1")) {

           if (audioElm.paused == true) {
             playAudio(audioElm);    //  if player is paused, then play the file
           } else {
             pauseAudio(audioElm);   //  if player is playing, then pause

       function playAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "Pause"; // Set button text == Pause
         // Get file from text box and assign it to the source of the audio element 
         audioElm.src = document.getElementById('audioFile').value;

       function pauseAudio(audioElm) {
         document.getElementById("playbutton").innerHTML = "play"; // Set button text == Play

       // Increment playbackRate by 1 
       function increaseSpeed() {
         audioElm.playbackRate += 1;

       // Cut playback rate in half
       function decreaseSpeed() {
         if (audioElm.playbackRate <= 1) {
           var temp = audioElm.playbackRate;
           audioElm.playbackRate = (temp / 2); 
         } else {
           audioElm.playbackRate -= 1;



See also

video element
video element
video object