<style>
#Audio_Container {
width: 320px;
position:relative;
}
.Audio_inner {
background: none repeat scroll 0 0 #333;
border-radius: 5px;
display: inline-block;
width:100%;
}
audio{
border-radius:5px;
height:30px;
width:250px;
}
#playlist{
background:#333;
display:none;
margin: 1px 0;
padding: 0;
position: absolute;
width: 100%;
}
#playlist .active a {
color:#5DB0E6;
}
#playlist li a {
color:#eeeedd;
background:#333;
padding:5px;
display:block;
text-decoration:none;
}
#playlist li{
padding-left:15px;
}
.playlist_button{
float:left;
color:#FFF;
cursor:pointer;
padding:5px 10px;
}
.playlist_button:hover{
color:#cecece;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--HTML-->
<div id="Audio_Container">
<div class="Audio_inner">
<div class="playlist_button" href="#">Playlist</div>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">Sorry, your browser does not support HTML5 audio.
</audio>
</div>
<ul id="playlist">
<li class="active">
<a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a>
</li>
<li>
<a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a>
</li>
<li>
<a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a>
</li>
</ul>
</div>
<!--EndHTML-->
<!--SCRIPT_AUDIO-->
<script type="text/javascript">
var audio;
var playlist;
var tracks;
var current;
Audio_init();
function Audio_init() {
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .10;
audio[0].play();
playlist.find('a').click(function (e) {
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended', function (e) {
current++;
if (current == len) {
current = 0;
link = playlist.find('a')[0];
} else {
link = playlist.find('a')[current];
}
run($(link), audio[0]);
});
/*PlayListClick*/
$('.playlist_button').click(function() {
/*Hidden*/
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(playlist).slideUp();
}
/*View*/
else{
$(this).addClass('active');
$(playlist).slideDown();
}
});
}
function run(link, player) {
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
</script>
<!--END_SCRIPT_AUDIO-->
Link download https://drive.google.com/file/d/0B785Epf6q5XlTHA5bFNrMnc5azQ/view?usp=sharing
