Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script each time the playback rate changes in HTML?
The onratechange event attribute in HTML executes a JavaScript function whenever the playback rate of an audio or video element changes. This event is particularly useful for creating custom media controls or displaying the current playback speed to users.
Syntax
Following is the syntax for the onratechange attribute −
<video onratechange="functionName()">...</video> <audio onratechange="functionName()">...</audio>
The onratechange attribute can be used with both <video> and <audio> elements. The function specified will execute each time the playbackRate property changes.
Playback Rate Property
The playbackRate property controls the speed at which media content plays −
1.0− Normal speed0.5− Half speed (slower)2.0− Double speed (faster)0.0− Paused
You can set the playback rate using JavaScript with videoElement.playbackRate = value.
Example − Video Playback Rate Control
Following example demonstrates how to use the onratechange attribute with a video element and a range slider −
<!DOCTYPE html>
<html>
<head>
<title>Video Playback Rate Control</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Playback Rate Control</h2>
<video id="myVideo" width="400" height="225" controls onratechange="displayRate()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p>Use the slider to change video speed:</p>
<input type="range" min="0.25" max="2" step="0.25" value="1" oninput="updateRate(this)">
<p id="rateDisplay">Current Speed: 1.0x</p>
<script>
function displayRate() {
var currentRate = document.getElementById("myVideo").playbackRate;
document.getElementById("rateDisplay").innerHTML = "Current Speed: " + currentRate + "x";
}
function updateRate(slider) {
document.getElementById("myVideo").playbackRate = slider.value;
}
</script>
</body>
</html>
The output displays a video with a speed control slider. Moving the slider changes the playback rate and triggers the onratechange event −
Video Playback Rate Control [Video Player with Controls] Use the slider to change video speed: [Range Slider: 0.25 ---- 1.0 ---- 2.0] Current Speed: 1.0x
Example − Audio Playback Rate with Buttons
Following example shows using onratechange with an audio element and preset speed buttons −
<!DOCTYPE html>
<html>
<head>
<title>Audio Playback Rate Control</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Speed Control</h2>
<audio id="myAudio" controls onratechange="showAudioRate()">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.wav" type="audio/wav">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div style="margin: 15px 0;">
<button onclick="setSpeed(0.5)">0.5x Slow</button>
<button onclick="setSpeed(1.0)">1.0x Normal</button>
<button onclick="setSpeed(1.5)">1.5x Fast</button>
<button onclick="setSpeed(2.0)">2.0x Faster</button>
</div>
<p id="audioRate">Audio Speed: 1.0x</p>
<script>
function showAudioRate() {
var rate = document.getElementById("myAudio").playbackRate;
document.getElementById("audioRate").innerHTML = "Audio Speed: " + rate + "x";
}
function setSpeed(speed) {
document.getElementById("myAudio").playbackRate = speed;
}
</script>
</body>
</html>
Each button sets a different playback rate, and the onratechange event updates the display accordingly −
Audio Speed Control [Audio Player with Controls] [0.5x Slow] [1.0x Normal] [1.5x Fast] [2.0x Faster] Audio Speed: 1.0x
Example − Advanced Rate Change Detection
Following example demonstrates detecting rate changes and providing user feedback −
<!DOCTYPE html>
<html>
<head>
<title>Advanced Rate Change Detection</title>
<style>
.rate-info {
background: #f0f8ff;
padding: 10px;
border-left: 4px solid #007bff;
margin: 10px 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Advanced Playback Rate Detection</h2>
<video id="advancedVideo" width="400" height="225" controls onratechange="handleRateChange()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<p>Custom speed controls:</p>
<input type="number" id="customRate" min="0.1" max="4" step="0.1" value="1" onchange="applyCustomRate()">
<button onclick="applyCustomRate()">Apply Speed</button>
<div class="rate-info" id="rateInfo">
Current playback rate: 1.0x (Normal speed)
</div>
<script>
function handleRateChange() {
var video = document.getElementById("advancedVideo");
var rate = video.playbackRate;
var description;
if (rate < 0.5) {
description = "Very Slow";
} else if (rate < 1) {
description = "Slow";
} else if (rate === 1) {
description = "Normal speed";
} else if (rate <= 2) {
description = "Fast";
} else {
description = "Very Fast";
}
document.getElementById("rateInfo").innerHTML =
"Current playback rate: " + rate + "x (" + description + ")";
}
function applyCustomRate() {
var customRate = document.getElementById("customRate").value;
document.getElementById("advancedVideo").playbackRate = customRate;
}
</script>
</body>
</html>
This example provides detailed feedback about the playback speed and allows custom rate input −
Advanced Playback Rate Detection [Video Player with Controls] Custom speed controls: [1] [Apply Speed] Current playback rate: 1.0x (Normal speed)
Browser Compatibility
The onratechange event is supported in all modern browsers that support HTML5 media elements −
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Opera | Yes |
Conclusion
The onratechange attribute provides a simple way to execute JavaScript functions whenever the playback rate of audio or video elements changes. This event is essential for creating custom media controls and providing user feedback about playback speed changes in HTML5 media applications.
179 Views
