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

 

Syntax

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

 

Event information

SynchronousNo
BubblesNo
CancelableNo

 

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

Remarks

This event is raised when the value of playbackRate changes.

To invoke this event, do one of the following:

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.


 <!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>


See also

audio
audio
document
source
video element
video element
video object
window
playbackRate

 

 

Show:
© 2014 Microsoft