Audio- Music Playlist for Your Website

Written by @m_k_amin 6 June 2013

Just playing a single music in your webpage may not be interesting. By this code, which is a combination of HTML5 and JavaScript, you are able to create a playlist of different sounds. They are played after each other and you can also choose one to be played by double clicking on it. The number of audio clips in the list can be unlimited and this code is also browser friendly; if one audio format failed to play, the other one is replaced. Hope to be useful.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
Double Click to Play:<br><br>
<select id="ML" name="MusicList" size="5" style="text-align:center; width: 128px" ondblclick="MusicLoad(ML.selectedIndex)"> 
    <option selected="selected">Music 1</option>
    <option>Music 2</option>
    <option>Music 3</option>
</select>

<br><br>
<audio id="aud" controls autoplay
onended="mEnd()" onerror="mError()"></audio>

<script>
var aud= document.getElementById('aud')
var ml= document.getElementById('ML')
var music= ['skylander','mymusic','ana']
var ind= ml.selectedIndex
var address= "http://www.html5freecode.com/files/"
MusicLoad(ind)

function MusicLoad(i){
	aud.setAttribute("src",address+music[i]+'.ogg')
	aud.load()
	ind=i
	ml.selectedIndex=i
}

function mEnd(){
	ind=ind+1
	if (ind >= ml.length) ind=0
	 MusicLoad(ind)
}

function mError(){
	if (aud.error.code==4){
		aud.setAttribute("src",address+music[ind]+'.mp3')
		aud.load()
	}
}
</script>
<div style="text-align: left"><br><font face="Tahoma"><br><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300