Logo - ProgrammingHead

How to Play Audio in HTML using JavaScript | Audio Player

In some Case we Don't want to Show Default Controls that provided by our Browsers to show HTML audio tag's Data and Wish to Control HTML Audio Data using Custom Controls. So if you are wonder about How to Play Audio in HTML using JavaScript, Then This Tutorial is for you. Where we will discuss about everything that you need to know while working with HTML Audio Elements in JavaScript.

How to Play Audio in HTML using JavaScript | Audio Player

Methods to Play Audio in HTML using JavaScript

There are several Methods to Play Audio in HTML Using JavaScript. Where we can call a JavaScript function to play our Audio Data in our HTML Document.
Which can be Done by JavaScript Click Event or HTML's onClick Attribute.

Method 1 : Playing Audio in HTML using JavaScript and HTML onClick Attribute

To Play HTML Audio using JavaScript and HTML onCLick Attribute we need to create a Function, Which will run using HTML onClick attribute.
As we all know that using HTML's onClick attribute we can Run JavaScript function.
But first we need to add Some JavaScript Code inside that Function to Play Audio File.
We have to use JavaScript document.getElementById() and .play() Method.
Where document.getElementById() will select the Audio <audio> Tag's Data (Our Audio File) and .play() Method will Play the Selected Elements Data (Audio in this Case).

index.html

<html>
 <body>
   <audio src="audio.mp3" id="myAudio"></audio>
   <button onClick="playMyAudio()">Play Audio</button>
   <script>
     function playMyAudio(){
       document.getElementById("myAudio").play();
     }
   </script>
 </body>
</html>

Results

Method 2 : Playing Audio in HTML using JavaScript Click Event

If you don't like to use HTML onClick attribute to run an JavaScript Function, Then you can use JavaScript's Event Listener to run a specific JavaScript task on a Button Click.
JavaScript's addEventListener will monitor any Click on the Selected HTML Element.
If someone clicks the Selected HTML Element (Like Button). This will Play the HTML Audio.

index.html

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

Play and Pause Audio in HTML Using JS

In our last 2 Examples, we are able to play our Audio file.
But there isn't anything that can stop that audio from playing.
So this Example will cover the Full process to Play and Pause Audio in HTML.
{Note : To make this Example Short we are using onClick Attribute/Event}
First we will add our Audio file inside our HTML Document using HTML's Audio Tags.
<audio></audio>
After that we will assign our Audio file's Path using HTML Audio tag's SRC Attribute.

index.html [Audio Tag Syntax]

<audio src="audioPath" id="myAudio">
</audio>

Now we will create two HTML Button and add onClick Event to it, So JavaScript can Run the Given Function on a Button Click.

index.html [Definig Functions]

function function1(){
  document.getElementById("myAudio").play();
}
function function2(){
  document.getElementById("myAudio").pause();
}

index.html [Calling JS Functions]

<button onClick="function1()">Play</button>
<button onClick="function2()">Pause</button>

index.html [Compelete CODE: Play and Pause audio]

<html>
 <body>
   <audio src="http://programminghead.com/audio/test.mp3" id="myAudio"></audio>
   <button onClick="playMyAudio()">Play Audio</button>
   <button onClick="pauseMyAudio()">Pause Audio</button>
   <p id="audioStatus">Click The Play Button</p>
   <script>
     function playMyAudio(){
       document.getElementById("myAudio").play();
      document.getElementById("audioStatus").innerHTML="Audio is Playing";	 
      
     }
     function pauseMyAudio(){
       document.getElementById("myAudio").pause();
      document.getElementById("audioStatus").innerHTML="Audio Paused";	
     }
   </script>
 </body>
</html>

Related Topics: How to Play Audio in HTML using JavaScript | Audio Player

Click on Titles below to reveal the Data

HTML play sound onclick image

To play sound when you click the HTML image, then you can simply use JavaScript onClick event in
your Image and then by using that Image, you can play the Audio file.
First we will add the onClick Event to our Image <img> tag, then we will call and JavaScript, inside our JavaScript function we will select the Audio element and play the song using .play() function.

index.html

<audio src="https://programminghead.com/audio/audio.mp3" id="myAudio"></audio>
<img src="https://www.programminghead.com/logo/logo.png" onClick="playMyAudio()"/>
<script>
    function playMyAudio(){
    document.getElementById("myAudio").play();
    }
</script>

Which HTML attribute will you need to see the play button on your audio video in the browser?

controls HTML attribute you need to see the controls like play button, Pause button, Audio Seekbar and Volume Control button on your audio or video Element in the browser.
<audio src="song.mp3" controls></audio>
Make sure that your are using controls attribute inside the starting tag, anywhere after the tag name.

index.html

<audio src="https://programminghead.com/audio/audio.mp3" controls></audio>

Results

Play audio in loop by using HTML

To loop an Audio in HTML we have loop attribute. By using loop attribute inside audio <audio> tag, we can tell our browser that we allow audio looping inside our HTML Document.
You can set loop="true" or just write loop inside the Audio tag, its going to work either way.

index.html

<audio src="mysong.mp3" controls loop></audio>

Results