The “Audio” characteristic on an online web page makes a website extra interactive and user-engaged. This characteristic helps in understanding the offered info to the viewer in a extra participating method as in comparison with the written content material. It additionally improves the consumer expertise in lots of different conditions. Preserving these components in view, JavaScript affords the audio “play()” technique to play the embedded audio through the HTML “<audio>” ingredient.
This information explains the HTML DOM audio “play()” technique in JavaScript.
How you can Use the HTML DOM Audio “play()” Technique in JavaScript?
The DOM (Doc Object Mannequin) audio “play()” technique is utilized to play the related audio and stays to play till it finishes or the consumer doesn’t cease or pause it. The specified audio is specified with the assistance of the HTML “<audio>” tag. This technique is often applied with the “pause()” technique to cease the present audio.
Syntax
Within the above fundamental syntax, the “audioObject” refers back to the recorded audio specified through the “<audio>” tag. Furthermore, it doesn’t require any further parameters to carry out this process.
Let’s use the above-defined syntax virtually.
Instance: Making use of the HTML DOM Audio “play()” Technique to Play the Given Audio
This instance exhibits the sensible implementation of the “play()” technique to begin the actual audio and pause it utilizing the “pause()” technique.
HTML Code
First, undergo the next code:
<h2>HTML DOM Audio play() Technique in JavaScript</h2>
<p>The DOM play() technique helps to play the present audio.</p>
<audio controls id=“myAudio”>
<supply src=“Audio.mp3” sort=“audio/mp3”>
</audio><br><br>
<button onclick=“jsFunc1()” >Play the Audio</button>
<button onclick=“jsFunc2()”>Pause the Audio</button>
Within the above code strains:
-
- The “<h2>” tag specifies the subheading of degree 2.
- The “<p>” tag provides the given paragraph assertion.
- The “<audio>” tag makes use of the “controls” attribute to deal with audio controls (pause, play, quantity, and so forth.) in addition to an id “myAudio” to entry it.
- Contained in the “<audio>” ingredient, the “<supply>” tag specifies the present audio utilizing the “src” attribute and the audio sort i.e., “audio/mp3”.
- The “<button>” tag provides a brand new button with a mouse “onclick” occasion to permit the execution of the perform “jsFunc1()” when this occasion happens.
- The final “<button>” tag additionally attaches an “onclick” occasion that executes the perform “jsFunc2()” at a button click on.
JavaScript Code
Now take a look on the below-stated code:
<script>
var t = doc.getElementById(“myAudio”);
perform jsFunc1() {
t.play();
}
perform jsFunc2() {
t.pause();
}
</script>
Within the above code block:
-
- Firstly, the “var” key phrase declares a variable “t” that makes use of the “getElementById()” technique to entry the recorded audio utilizing its id “myAudio”.
- Subsequent, the outlined “jsFunc1()” perform applies the “play()” technique to play the accessed audio.
- Lastly, the perform named “jsFunc2()” makes use of the “pause()” technique to pause the performed audio.
Output
The above end result first performs the given audio after which pauses it through their related buttons. Nevertheless, the consumer can even “play” and “pause” the audio utilizing the icon displayed through the “controls” attribute.
Conclusion
In JavaScript, the HTML DOM audio “play()” technique assists the customers to play the goal audio with the assistance of the HTML “<audio>” tag. As soon as the audio is performed, it may be paused/stopped as properly with the assistance of the “pause()” technique. This information briefly defined the HTML DOM Audio “play()” technique in JavaScript.
