HTML onratechange Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The onratechange HTML event attribute specifies a script to be run when the playing speed of an audio or video element is changed. This event is typically triggered when a user switches to a slow motion or fast forward mode, but it can also be triggered by other means, such as by programmatically changing the playbackRate property of the audio or video element.

The onratechange event attribute can be used to implement a variety of features, such as:

Updating a progress bar to reflect the new playback speed
Displaying a message to the user when the playback speed is changed
Automatically adjusting the volume of the audio or video when the playback speed is changed
Disabling certain controls when the playback speed is too high or too low

To use the onratechange event attribute, simply add it to the audio or video element and specify the name of the JavaScript function that you want to be called when the playback speed is changed. For example, the following code will cause the myFunction() function to be called when the playback speed of the video element with the id of myVideo is changed:

<video id="myVideo" onratechange="myFunction()">
  <source src="myVideo.mp4" type="video/mp4">
</video>

The onratechange event attribute is supported by all major browsers.

Here is an example of a JavaScript function that can be used to update a progress bar to reflect the new playback speed when the onratechange event is fired:

function updateProgressBar(event) {
  // Get the current playback speed
  var playbackRate = event.target.playbackRate;

  // Update the progress bar to reflect the new playback speed
  var progressBar = document.getElementById("progressBar");
  progressBar.style.width = (playbackRate * 100) + "%";
}

To use this function, simply add it to the <head> section of your HTML document and then specify the id of the progress bar element in the updateProgressBar() function call in the onratechange event attribute of the audio or video element.

Syntax

<element onratechange="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE HTML>

<html>

<body>



<audio id="myAudio" controls onratechange="myFunction()">  

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>

<p id="demo">Change the playback speed of the audio file:</p>

<input type="range" min="0.5" max="3" step="0.1" value="1" oninput="changeRate(this)">



<script>

function myFunction() {

    document.getElementById("demo").innerHTML = "Audio speed: " + document.getElementById("myAudio").playbackRate;

}

function changeRate(obj) {

    document.getElementById("myAudio").playbackRate = obj.value;

}

</script> 



<p>This example shows how to use the onratechange attribute for an AUDIO element.</p>



</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML onratechange event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.