Register Login
Python Photoshop SAP Java PHP Android C++ Hadoop Oracle Interview Questions Articles Other

How to Play, Stop & Pause an Audio in HTML using JavaScript?

Updated Jan 18, 2023

Often programmers do not want to show the default controls of HTML audio in a document. They can use specific controls using some HTML tags and attributes that the browser will not display when the users play the audio.

There are different methods of adding and playing an audio file in HTML using JavaScript. This article will discuss all of these methods with the following code snippets.

What are the ways to play audio in HTML using JavaScript?

There are several methods to play audio in HTML using JavaScript. It includes calling a JavaScript function in the HTML document. Let us learn the methods using the following example of HTML and JavaScript codes:

Method 1: Using the onClick Attribute and JavaScript to play audio:

We use the HTML onCLick Attribute with the button tag to add and display an audio file in the document.

Code Snippet:

<html>
<head>
<title>How to Play Pause & Stop Audio file using JavaScript & HTML5</title>
</head>
<body>
	<audio src = "sample1.mp3" id = "Audio"> </audio>
  	<button onClick = "MyAudio()" > Play Audio </button>
  	<script>
    	function MyAudio(){
     		document.getElementById("Audio").play();
     	}
   </script>
</body>
</html>

Output:

Run Code Snippet

Explanation:

Here in the code, we have used the HTML <audio> tag with the src attribute to add our local audio file. Then, we used the onClick Attribute of HTML to Play HTML Audio using JavaScript and HTML.

We need to create a function named MyAudio(). When we call this function, it will run the HTML onClick attribute.

Again, when we call the onClick attribute, we can run the JavaScript function. But before that, we need to add the required JS code inside that Function to play the audio file.

We used the JavaScript document.getElementById() and .play() Methods to use the properties added inside the onClick attribute of the <button> tag. The JS document.getElementById() will set the Audio Tag's property, i.e., the audio file and the JavaScript .play() method will play the desired elements file.

Method 2: Using the JavaScript Click Event and HTML to play the audio:

It is an alternative way to play an audio file in HTML using JavaScript. If programmers do not like to use the onClick attribute of the HTML to run a JavaScript function, then they can use JavaScript's Event Listener to play the specific audio file on a button click.

Code Snippet: 

<html>
<head>
<title>How to Play Pause & Stop Audio file using JavaScript & HTML5</title>
</head>

<body>
	<audio src = "sample1.mp3" id = "Audio"> </audio>
  	<button id = "Button" > Play Audio </button>
   	<script>  document.getElementById("Button").addEventListener("click",function(){
    	document.getElementById("Audio").play();
     });
	</script>
</body>
</html>

Output:

Run Code Snippet

Explanation:

In the code snippet, we used JavaScript's addEventListener that activates any click on the desired HTML Element. When users click the specified HTML element, it will play the HTML audio file.

Method 3: Using HTML DOM Audio play() method to stop and play audio with play() and pause() methods:

It is another approach to stop and play an audio file in an HTML document. Programmers can use the HTML DOM Audio play(), which allows them to play the current audio file.

But they need to operate the controls property to display the audio controls like play, pause, volume, seeking, etc., associated with the file to use the Audio play() method.

Syntax:

audioObject.play()

Code Snippet: 

<html>
<head>
<title>How to Play Pause & Stop Audio file using JavaScript & HTML5</title>
</head>
<body>
	<h1 style = "color:red" >The Audio File</h1>
	<h2 style = "font-family: Algerian">DOM Audio play() method</h2>
	
	<audio id = "idAudio">
		<source src = "sample1.mp3" type = "audio/ogg" >
		<source src = "sample1.mp3" type ="audio/mpeg">The browser is not supporting the audio element...
	</audio>
<p> Click the "Play Audio" to play the Audio.</p>
	<button onclick = "playaudio()" type = "button" > Play the Audio </button>
	<button onclick = "pauseaudio()" type = "button" > Pause the Audio </button>
	<button onclick = "stopaudio()" type = "button" > Stop the Audio </button>
	<script>
		var a = document.getElementById("idAudio");
		function playaudio() {
			a.play();
		}
		function pauseaudio() {
			a.pause();
		}
		function stopaudio() {
			a.pause();
			a.currentTime = 0;
		}
	</script>
</body>
</html>

Output:

Run Code Snippet

Explanation:

This is an example of play, pause and stop audio using HTML and JavaScript. We used the HTML onCLick Attribute to Play HTML Audio using JavaScript in the above HTML document. We need to create a function named playaudio().

When we call this function, it will run the HTML onClick attribute. We have added an external audio file by copying the link on the HTML <audio> tag src attribute. Inside the function playaudio(), we have used the play() and pause() methods that create three buttons for play pause and stop.

There is no stop() function in JavaScript so we use pause() function and set “currentTime” to “0”  to stop the audio.

Conclusion:

In summary, we have discussed how to play an audio player in HTML using JavaScript. Programmers can follow any of these methods to create an HTML document that plays an audio file, either local or external links of the audio file.

Recommended Posts:
×