kimluc

[HTML5] Tạo danh sách (playlist) MP3 hoặc video tự động phát ngẫu nhiên

Giả sử bạn có 9 bài hát (mp3 hoặc video/mp4) là bài 1, bài 2, bài 3,..., bài 9 và bạn muốn phát các bài hát này một cách ngẫu nhiên không theo thứ tự mỗi khi người xem truy cập vào trang blog/ web của bạn giống như Zing radio, Nhưng Zing radio viết bằng Flash (bị hạn chế ở nhiều thiết bị chạy Android, iOS), ở đây mình viết bằng HTML5 (hỗ trợ hầu hết thiết bị chạy Windows, Android, iOS,...). Các đoạn mã sau đây sẽ giúp bạn thực hiện điều đó.

Xem minh họa: http://jsfiddle.net/kimthuy900/fe7JL/140/

-> [HTML5] Tạo danh sách phát (playlist) video/ MP4 (Hoàn chỉnh)

<!DOCTYPE html>
<html>
<head>
<!--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-->

<!--Playlist-->
<style type='text/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;}
</style>

<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');
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>
<!--End playlist-->

</head>

<body>

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg" autoplay>
<source type="audio/mp3" src="http://www.4shared.com/img/5509742828/a0ec04c6/dlink__2Fdownload_2FYsGlmzmbba_2Fbentley_5Fdubs.mp3_3Ftsid_3D20150401-035728-9e8a463b_26lgfp_3D7200_26sbsr_3Ded923f51b1486d3a858feea785a5716444956bbecc8fb93f/preview.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>

</body>

</html>

Để tắt chức năng tự động phát ngẫu nhiên, chỉ cần xóa bỏ dòng này: <div id="n"></div> và ngược lại.

Để phát danh sách video (mp4), thay <audio ...></audio> bằng <video ...></video> và thay tệp có đuôi .mp3 bằng tệp có đuôi .mp4, Thay tất cả chữ audio thành video, thêm kích cỡ cho trình phát video ví dụ: <video height="350px" width="550px id="video" poster="" autoplay><source src="movie.mp4" type="video/mp4"></video>

Bạn có thể sao chép tất cả mã html trên rồi dán vào notepad. Sau đó lưu tệp tin với tên có đuôi .html (ví dụ: audio-array-shuffle-playlist-1.html

Kế tiếp, bạn vào nơi lưu tệp tin này rồi nhấp đúp chuột vào tệp để mở trình duyệt xem minh họa. Lưu ý HTML5 không hỗ trợ một số trình duyệt quá cũ đại loại như IE6.

Để mở notepad: Start -> Run -> notepad -> nhấn enter

3 nhận xét:

  1. Bài viết hay lắm bạn, nhưng mình còn vài chỗ chỉnh hoài ko xong là làm sao cho cái play list nó xếp ngang thay vì xếp dọc bên dưới và có cái ảnh nhỏ phía trên cái title đó bạn. Please Help me. Thank bạn !

    Trả lờiXóa
  2. không play nhạc tu google drive dc ha bạn có thể giup minh dc không

    Trả lờiXóa
  3. cảm ơn bạn đã replay. Ý mình muốn nói là cái playlist phải nằm dưới player chính, có ảnh đại diện và theo phương ngang có mũi tên chạy qua chạy lại hoặc là có thanh scrollbar để se lên, xuống đó bạn. Chúc năm mới thật nhiều may mắn nhé bạn.

    Trả lờiXóa