SLEEK HTML5 Audio PLaylist

by Michael Prosser

HTML

<ul class="sleek-playlist"></ul>

CSS

.sleek-playlist{
    position:relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    margin:0px;
    list-style:none;
}
.sleek-playlist li{
    position:relative;
    display:block;
    padding:12px;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
    background-color:#b5bdc8;
    cursor:pointer;
    -webkit-transition:all 0.6s;
    -moz-transition:all 0.6s;
    -o-transition:all 0.6s;
    -ms-transition:all 0.6s;
    transition:all 0.6s;
    color:#ffffff;
}
.sleek-playlist li:hover{
    background-color:#010101 !important;
    color:#999999 !important;
}
.sleek-playlist-col-left{
    float:left;
     width:50%;
    margin-left:60px
}
.sleek-playlist-col-right{
    float:right;
     width:25%;
    text-align:right;
}
.sleek-playlist-song{
    font-family:Arial, Tahoma;
    font-size:17px;
}
.sleek-playlist-artist{
    font-family:Arial, Tahoma;
    font-size:14px;
}
.sleek-playlist-genre{
    font-family:Arial, Tahoma;
    font-size:11px;
    font-style:italic;
    margin-top:8px;
}
.sleek-playlist-copyright{
    font-family:Arial, Tahoma;
    font-size:9px;
}
.sleek-playlist-clear{
    clear:both;
}
.sleek-playlist-controls{
    position:absolute;
    width:40px;
    height:40px;
    top:10px;
   ...

JavaScript

// playlist javascript class written by Michael Prosser exclusively for Sleek Interactive //
// ©2015 All Rights Reserved

var playlist = function(){
    
    var playlist = this;
    
    this.selector = '.sleek-playlist';
    this.progressbar = '.sleek-progressbar';
    this.interval = null;
    
    this.mp3_list = Array();
    this.ogg_list = Array();
    this.song_list = Array();
    this.artist_list = Array();
    this.genre_list = Array();
    this.copyright_list = Array();
    
    this.init = function(){
        
        $(playlist.selector).html('');
        
        for(i=0;i<playlist.mp3_list.length;i++){
            
            var controls_html = '';
            
            controls_html += '<li data-index="' + i + '">';
            controls_html += '<audio data-index="' + i + '"><source src="' + playlist.mp3_list[i] + '" type="audio/mpeg"><source src="' + playlist.ogg_list[i] + '" type="audio/ogg"></audio>';
            controls_html += '<div class="sleek-playlist-col-left"><div class="sleek-playlist-song">' + playlist.song_list[i] + '</div>';
            controls_html += '<div class="sleek-playlist-artist">' + playlist.artist_list[i] + '</div></div>';
            controls_html += '<div class="sleek-playlist-col-right"><div class="sleek-playlist-copyright">&copy;' + playlist.copyright_list[i] + '</div>';
            controls_html += '<div class="sleek-playlist-genre">' + playlist.genre_list[i] + '</div></div>';
            controls_html += '<div data-index="' + i + '" class="sleek-playlist-controls sleek-playlist-controls-playenabled"></div><div class="sleek-playlist-clear"></div><div class="sleek-progressbar"></div>';
            controls_html += '</li>';
            
            $(playlist.selector).append(controls_html);
            
        }
        
        setTimeout(function(){
            
            $(playlist.selector).find('li').click(function(){
                
                var index = parseInt($(this).attr('data-index'));
     ...