Change HTML5 audio player src file in JavaScript
By Faruque Ahamed MollickIn 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:
- Change HTML5 audio player src file in JavaScript
- HTML5 Video/Audio player Volume Control With Key in JavaScript
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.
Good job here.
How can I make this work for Chrome?
Well, it has already tested on Chrome and it works.
Thanx a lot for this short but very efective code! It works great.
Thank you so much. I’ve been trying to get this functionality for several days using jQuery and have gone around in circles. This is simple, elegant, and it WORKS!
Using the HTML5 audio tag, with controls, is it possible to modify the 4 controls? I want to leave the Start/Pause button; change the digital progression indicator to only show the ‘remaining’ time left in the song; and make it where the width of the Progression & Volume sliders can be set; then the overall width would be a sum of what’s set for the 4 elements of the control bar.
Can this be done? I keep seeing clues that answer my question in the affirmative, but nothing concrete.
Well, it is possible. But need to write code to customize the player or maybe it needs to create a custom progress bar.
May I ask, why are you adding a ‘src’ attribute to the element, when it’s the child element that has a ‘src’ set by your markup? You are leaving the old element in place with the old media URL, and causing the to reference a new media URL by different means to the initial setup. It seems that this would be clearer: var source = document.getElementById(‘my-audio’).querySelector(‘source’); source.setAttribute(‘src’, ‘newfile.mp3’);