Tryit<!DOCTYPE html><html><head><title>Wikitechy onratechange attribute</title></head><body><audio id="myaudio" controls onratechange="onRateChange()"><source src="wikitechy.wav" type="audio/wav"><source src="wikitechy.mp3" type="audio/mp3"></audio><p id="rate">Change the Audio speed</p><input type="range" min="0.5" max="5" step="0.1" value="1" oninput="changeRate(this)"><script>
function onRateChange()
{
document.getElementById("rate").innerHTML="The Audio’s speed is "
+ document.getElementById("myaudio").playbackRate;
}
function changeRate(obj)
{
document.getElementById("myaudio").playbackRate = obj.value;
}
</script></body></html>
Code Explanation for onratechange Attribute in HTML:
<audio>tag is used to embed an audio file in the HTML Document.
The onratechange attribute is used to call onRateChange() JavaScript function when the audio/video changes its speed.
<input>type=”range” is used to set the slider for audio speed controller.
oninput=”changeRate(this)” is used to call the audio range.
The JavaScript function onRatechange is used to display the change of playbackRate of “myaudio”.
The JavaScript function changeRate (obj) is used to get the value from the slider control object and change the playbackRate of the audio which has id as ”myaudio”.
Output for onratechange Attribute in HTML:
The output shows the speed of the audio is shown default as the audio file starts moving in a normal speed.
The speed of the audio is increased and therefore the audio file will also move faster than the normal speed.
Browser Support for onratechange Attribute in HTML:
