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 title="Click chọn bài ở list nhạc"></audio>
<div id="n"></div>
<ol id="playlist-alv" class="content">
<li class="active"><a href="Link file thứ 1 .mp3" title="Nghệ sĩ 01">Tên bài hát thứ 1</a></li>
<li><a href="Link file thứ 2 .mp3" title="Nghệ sĩ 02">Tên bài hát thứ 2</a></li>
<li><a href="Link file thứ 3 .mp3" title="Nghệ sĩ 03">Tên bài hát thứ 3</a></li>
<li><a href="Link file thứ 4 .mp3" title="Nghệ sĩ 04">Tên bài hát thứ 4</a></li>
<li><a href="Link file thứ 5 .mp3" title="Nghệ sĩ 05">Tên bài hát thứ 5</a></li>
<li><a href="Link file thứ ... .mp3" title="Nghệ sĩ ...5">Tên bài hát thứ ...</a></li>
<li><a href="Link file thứ 100 .mp3" title="Nghệ sĩ 100">Tên bài hát thứ 100</a></li>
</ol>
</center>
<!--css Audio,Playlist-alv-->
<style type="text/css">
#audio{background:#eee;width:330px;height:60px !important;padding:10px;border:4px solid green;}
#playlist-alv{background:#feffd5;width:300px;max-height:140px;overflow:auto;padding: 10px 25px;margin-top:0px;border:4px solid green;text-align:left;}
#playlist-alv li{padding:5px}
#playlist-alv::-webkit-scrollbar{width:8px;}
#playlist-alv::-webkit-scrollbar-track{background:#ced6e0;}
#playlist-alv::-webkit-scrollbar-thumb{background:#FFC312;}
#playlist-alv::-webkit-scrollbar-thumb:hover{background:#F79F1F}
#playlist-alv a {text-decoration:none;}
#playlist-alv a:hover {color:#33ff00;text-decoration:none}
#playlist-alv .active a{color:#8e0090;text-decoration:none;font-weight:bold;} 
</style>
<!--js Audio-->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
//Shuffle
$(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); });
});
//End Shuffle
$(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