JSFiddle - React, Tailwind, and code Playground

by Kim Thuy

HTML

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg" autoplay>
        <source type="audio/mp3" src="http://k003.kiwi6.com/hotlink/j14y91oaj1/Song_Of_Ocarina-2.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>
<div id="n"></div>
    <ul id="playlist" class="content">
        <li class="active"><a href="http://k002.kiwi6.com/hotlink/3i06y32mee/ha_trang--elvis_phuong.mp3">Ha trang - Elvis Phung</a></li>
        <li><a href="http://k002.kiwi6.com/hotlink/q0cd9vl8c3/nhu_canh_vac_bay--hong_nhung.mp3">Nhu canh vac bay - Hong Nhung</a></li>
        <li><a href="http://k002.kiwi6.com/hotlink/in5c2r7a3o/toi_ru_em_ngu--elvis_phuong.mp3">Toi ru em ngu - Elvis Phuong</a></li>
        <li><a href="http://k002.kiwi6.com/hotlink/66u0n8s0je/giot_nang_ben_them--thanh_lam.mp3">Giot nang ben them - Thanh Lam</a></li> 
<li><a href="http://k007.kiwi6.com/hotlink/wulp9njnrs/L_Th_-_Tr_n_Th_i_H_a.mp3">La thu - Tran Thai Hoa</a></li>
<li><a href="http://k002.kiwi6.com/hotlink/bd730inc4f/Nh_n_nh_ng_m_a_thu_i--elvis_phuong.mp3">Nhin nhung mua thu di - Elvis Phuong</a></li>

   </ul>

CSS

#playlist,audio{background:#ccccff;width:400px;padding:10px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#194775;padding:5px;display:block;}
li a:hover{text-decoration:none;}

JavaScript

for (var $x=$(".content li"), i=$x.length-1, j, temp; i>=0; i--) { j=Math.floor(Math.random()*(i+1)), temp=$x[i], $x[i]=$x[j], $x[j]=temp; }
$x.each(function(i, li) { $(".content").append(li); }); 

var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .80;
    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]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}