Change HTML5 audio player src file in JavaScript

By Faruque Ahamed Mollick

In this post, I am going to show you how can you change HTML5 audio player src file in Javascript.

It is quite easy to change the music file of an HTML5 audio player with JavaScript.

Suppose we have an HTML5 audio player:

<audio id="my-audio" controls>
   <source src="assets/music1.mp3" type="audio/mpeg">
</audio>

You can change the audio file of the HTML5 player with just one line of JavaScript code that you can see below:



document.getElementById("my-audio").setAttribute('src', 'AUDIO_SRC_FILE');

In the above snippet, we have used the JavaScript setAttribute() that used to change the attribute of any HTML element. In our code we take the advantage of the setAttribute() method to change the audio file of our HTML5 audio player.

So actually we just have to change the src file of our HTML5 audio player and it changes the audio.

Now we are going to create two buttons to change the music of our HTML5 player. Clicking on these buttons will change the music or audio and instantly play the music file.

At the end of this tutorial, you will get the final and complete code. Now follow the process step by step.

Below are these two buttons which will change audio on clicking:

<button onclick="cs_change_music('assets/music1.mp3');">Play music 1</button>
<button onclick="cs_change_music('assets/music2.mp3');">Play music 2</button>

You can notice that we have call function with the music file path as the parameter. Now we have to create this JavaScript function.

Below is our JavaScript function that you can see in the onclick attribute of buttons:

function cs_change_music(music)
{
document.getElementById("my-audio").pause();
document.getElementById("my-audio").setAttribute('src', music);
document.getElementById("my-audio").load();
document.getElementById("my-audio").play();

}

 

Also, read:

 

The complete and final code

Below is the complete and final code of our tutorial:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
</head>
<body>

<audio id="my-audio" controls>
  <source src="assets/music1.mp3" type="audio/mpeg">
</audio>

<button onclick="cs_change_music('assets/music1.mp3');">Play music 1</button>
<button onclick="cs_change_music('assets/music2.mp3');">Play music 2</button>

<script type="text/javascript">
  
   function cs_change_music(music)
   {
      
     document.getElementById("my-audio").pause();
     document.getElementById("my-audio").setAttribute('src', music);
     document.getElementById("my-audio").load();
     document.getElementById("my-audio").play();

   }

</script>
</body>
</html>

You can save the above code as an HTML type file. After that replace the audio file path for both the button functions parameters and audio tag.

Now you can run it on your browser. If you test it on the browser, you will see that clicking the buttons will change the audio file and it will instantly start playing the new music as we have called the JavaScript play() method.

So we have successfully able to change HTML5 audio player src file in JavaScript and then add the functionality to our button.

Leave a Reply

Your email address will not be published. Required fields are marked *