html tutorial - onratechange Attribute in HTML - html5 - html code - html form




Onratechange attribute in html

Learn html - html tutorial - Onratechange attribute in html - html examples - html programs

  • The onratechange attribute defines a script to be run when the playing speed of the audio/video is changed.
  • The onratechange attribute is part of the event attributes and can be used <audio> and<video> elements.

Syntax for onratechange attribute in HTML:

<element onratechange="myscript">

Applies To:

Element Attribute
<audio> onratechange
<video> onratechange

Attribute Values:

Value Description
script The script can run on onratechange

Sample Coding for onratechange Attribute in HTML:

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:

onratechange Attribute Code Explanation

  1. <audio>tag is used to embed an audio file in the HTML Document.
  2. The onratechange attribute is used to call onRateChange() JavaScript function when the audio/video changes its speed.
  3. <input> type=”range” is used to set the slider for audio speed controller.
  4. oninput=”changeRate(this)” is used to call the audio range.
  5. The JavaScript function onRatechange is used to display the change of playbackRate of “myaudio”.
  6. 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:

onratechange Attribute Tag Output

  1. The output shows the speed of the audio is shown default as the audio file starts moving in a normal speed.
onratechange Attribute Tag Output

  1. 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:

Yes 9.0 Yes Yes Yes

Related Searches to onratechange Attribute in html