Code playlist mp3 đơn giản

MUSSIC LEVAN chia sẻ đến các bạn code playlist mp3 đơn giản, có thể đưa vào widget thanh bên

Hy vọng giúp các bạn tự tạo list nhạc để nghe những bài hát mà mình yêu thích, đam mê

Copy

<center>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg" autoplay></audio>
<div id="n"></div>
<ol id="playlist-alv" class="content">
<li class="active"><a href="LiNK FILE THỨ 1" title="NGHỆ SĨ">TÊN BÀI HÁT THỨ 1</a></li>
<li><a href="LiNK FILE THỨ 2 .mp3" title="NGHỆ SĨ">TÊN BÀI HÁT THỨ 2</a></li>
<li><a href="LiNK FILE THỨ 3 .mp3" title="NGHỆ SĨ">TÊN BÀI HÁT THỨ 3</a></li>
<li><a href="LiNK FILE THỨ ... .mp3" title="NGHỆ SĨ">TÊN BÀI HÁT THỨ ...</a></li>
<li><a href="LiNK FILE THỨ 100 .mp3" title="NGHỆ SĨ">TÊN BÀI HÁT THỨ 100</a></li> 
</ol>
</center>
<!--css Audio,Playlist-alv-->
<style type="text/css">#audio{background:#ccccff;width:300px;height:70px !important;padding:10px;border:4px solid green;}
#playlist-alv{background:#feffd5;width:300px;max-height:200px;overflow:auto;padding:10px 15px;margin-top:-8px;border:4px solid green;text-align:left;}
#playlist-alv::-webkit-scrollbar{width:6px;}
#playlist-alv::-webkit-scrollbar-track{background:#ced6e0;}
#playlist-alv::-webkit-scrollbar-thumb{background:#FFC312;}
#playlist-alv::-webkit-scrollbar-thumb:hover{background:#F79F1F}
.active a{color:#8e0090;text-decoration:none;font-weight:bold !important;}
a:hover{color:#33ff00;text-decoration:none !important;}
</style>
<!--Shuffle-->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
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); });
});
//]]></script>
<!--End shuffle-->
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist-alv');
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();
}
}); 
//]]></script>

* Chú ý: Nếu trong template của bạn đã có jquery rồi thì bỏ dòng chứa file jquery.min.js đi nha.

  Chúc các bạn thành công. Mọi thắc mắc các bạn comment vào bên dưới, mình sẽ hồi âm sớm nhất có thể.

DEMO:

Mở cửa sổ nghe nhạc