Easy MP3 HTML5 Playlist

Include: css, html, script
<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