ratechange | onratechange event

Occurs when the playback rate is increased or decreased.

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

Syntax

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

Event information

Synchronous	No
Bubbles	No
Cancelable	No

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

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

Remarks

This event is raised when the value of playbackRate changes.

To invoke this event, do one of the following:

Increase or decrease the value of playbackRate.

Examples

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.

HTML


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

</div>
  <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;
         audioElm.play();
       }

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

       // 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;
         }
       }

     </script>


</body>
</html>