#W3SCHOOLS HTML5 AUDIO CODE#

So we have successfully able to change HTML5 audio player src file in JavaScript and then add the functionality to our button. 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.

After that replace the audio file path for both the button functions parameters and audio tag.

#W3SCHOOLS HTML5 AUDIO CODE#

You can save the above code as an HTML type file. HTML5 Video/Audio player Volume Control With Key in JavaScriptīelow is the complete and final code of our tutorial:.Change HTML5 audio player src file in JavaScript.

Now we have to create this JavaScript function.īelow is our JavaScript function that you can see in the onclick attribute of buttons: function cs_change_music(music)ĭocument.getElementById('my-audio').pause() ĭocument.getElementById('my-audio').setAttribute('src', music) ĭocument.getElementById('my-audio').load() ĭocument.getElementById('my-audio').play() You can notice that we have call function with the music file path as the parameter. Now follow the process step by step.īelow are these two buttons which will change audio on clicking: Play music 1 Clicking on these buttons will change the music or audio and instantly play the music file.Īt the end of this tutorial, you will get the final and complete code. Now we are going to create two buttons to change the music of our HTML5 player. Covers elements and attributes, headings and. Features a thorough reference section for easy review of suchitems as lists of tags, attributes, and symbols. So actually we just have to change the src file of our HTML5 audio player and it changes the audio. W3Schools is the top Google search result for instruction onHTML, CSS, and other key Web technologies this book presentsW3Schools tutorials in an easy-to-follow format for quicklearning. In our code we take the advantage of the setAttribute() method to change the audio file of our HTML5 audio player. In the above snippet, we have used the JavaScript setAttribute() that used to change the attribute of any HTML element. 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')

It is quite easy to change the music file of an HTML5 audio player with JavaScript. In this post, I am going to show you how can you change HTML5 audio player src file in Javascript.

W3schools html5 audio