Code playlist mp3 đơn giản

ANHLEVAN.TK chia sẻ 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ự chọn để nghe những bài hát mà mình yêu thích, đam mê

<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. - Đừng quên chia sẻ trang web này đến mọi người nha bạn, cám ơn.

☞ Nếu bạn có bất kỳ vấn đề nào với bài viết này hãy 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