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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×