playbackRate property

Article
05/02/2017

Gets or sets the current rate of speed for the media resource to play. This speed is expressed as a multiple of the normal speed of the media resource.

Syntax

object.put_playbackRate(number speed);object.get_playbackRate(number* speed);

Property values

Type: number

The speed as a multiple of the normal speed of the media. Default value is 1.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.8

Remarks

The default value is 1. A negative value will cause an error, reset to 1, or be ignored, depending on browser implementation.

Examples

This example plays an audio file and lets you speed it up or slow it down. 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 playback rate 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>

Share via