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/fe7JL/192
<!DOCTYPE html>
<html>
<head>
<!--Shuffle-->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<!--Đường dẫn file javascript trên có thể thay thế bằng: https://ia601500.us.archive.org/20/items/audio-shuffle-jquery-1.7.2-jquery.min/audio-shuffle-jquery-1.7.2-jquery.min.js -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
for (var $x=$(".content li"), i=$x.length-0, 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 - 0;
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>
<!-- HTML5 audio player-->
<audio id="audio" preload tabindex="0" controls="" type="audio/mpeg" autoplay>
<source type="audio/mp3" src="https://archive.org/download/iPhone_7_ringtone_cutted/iPhone_7_ringtone_cutted.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
<!--End HTML5 audio player-->
<div id="n"></div>
<ul id="playlist" class="content">
<li class="active"><a href="https://archive.org/download/HaTrangElvisPhuong/HaTrang-ElvisPhuong.mp3">Ha trang - Elvis Phung</a></li>
<li><a href="https://archive.org/download/O.LaiThan.hHa/O.Lai-Than.hHa.mp3">Ở lại - Thanh Hà</a></li>
<li><a href="https://archive.org/download/ToiRuEmNguElvisPhuong/T%C3%B4i%20Ru%20Em%20Ng%E1%BB%A7-Elvis%20Ph%C6%B0%C6%A1ng.mp3">Tôi ru em ngủ - Elvis Phuong</a></li>
<li><a href="https://archive.org/download/MaHHngTuNNgcBgngKiBu/M%C6%B0a%20h%E1%BB%93ng%20-%20Tu%E1%BA%A5n%20Ng%E1%BB%8Dc-B%E1%BA%B1ng%20Ki%E1%BB%81u.mp3">Mưa hồng - Tuấn Ngọc, Bằng Kiều</a></li>
<li><a href="https://archive.org/download/NhCCnhVCBayKhynhLy/Nh%C6%B0%20C%C3%A1nh%20V%E1%BA%A1c%20Bay-Kh%C3%A1nh%20Ly.mp3">Như cánh vạc bay - Khánh Ly</a></li>
<li><a href="https://archive.org/download/MuaChieuKyNiemYPhuongQuocKhanh/MuaChieuKyNiem-YPhuong-QuocKhanh_rqyb.mp3">Mưa chiều kỷ niệm - Y Phương, Quốc Khánh</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="url.jpg" autoplay controls><source src="url.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 -> gõ
notepad -> nhấn enter
Cũng đăng trên Timvn.blogspot.com
