UPDATE: HTML5 Audio Player với Playlist: https://github.com/trangsihung/html5-audio-player-with-playlist
Trong bài trước mình đã hướng dẫn sử dụng jQuery để điều khiển HTML5 Audio Tag, lần này dựa vào đó chúng ta sẽ tạo một HTML5 Audio Player đơn giản. Trong bài mình tập trung vào jQuery, còn phần giao diện HTML-CSS thì các bạn có thể tham khảo phần trong phần code HTML-CSS hoặc tự code một cái.
HTML – CSS
1
Một cái mới trong code HTML-CSS trên là tag <input type="range" trong HTML5. Về <input type="range"> bạn có thể xem thêm thông tin tại http://diveintohtml5.info/forms.html#type-range.
Các nút đều khiển của player là mình dùng Font Awesome để làm.
JAVASCRIPT
Đây là phần quan trọng nhất đối với HTML5 Audio Player, ta thêm vào các file js sau: thư viện jQuery, plugin prefixfree giúp tự thêm các tiền tố -webkit, -moz, -ms, -o trong CSS.
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/prefixfree.js"></script> <script type="text/javascript" src="js/player.js"></script> <script type="text/javascript" src="js/main.js"></script>
- player.js xử lý các thao tác mà ta thực hiện trên player như: ấn play/pause, stop, tăng/giảm volume.
- main.js là phần script chính
Bắt đầu với main.js, đầu tiên ta tạo các jQuery selector cho các thành phần của player và gọi function control_player với tham số là biến player.
var player = {
play : $('#play'),
stop : $('#stop'),
vol : $('.volume input'),
},
song = new Audio();
song.type = 'audio/mpeg';
control_player(song, player);
Sau đó trong file player.js ta tạo function control_player với các sự kiện click vào nút play và nút stop trên player
function control(ctrl) {
ctrl.play.on('click', function(e) {
e.preventDefault();
status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';
if(status == 'play'){
$(this).changeClass('icon-pause','icon-play');
}else{
$(this).changeClass('icon-play','icon-pause');
}
});
ctrl.stop.on('click', function(e) {
e.preventDefault();
button.play.changeClass('icon-pause','icon-play');
});
}
$.fn.changeClass = function(before, after) {
$(this).find('i').removeClass(before).addClass(after);
}
Ta thấy khi click vào #play, nếu icon là pause thì sẽ chuyển thành play và ngược lại khi icon là play thì sẽ chuyển thành pause. Khi nhấn stop thì icon pause sẽ thành play. Nếu thấy khó hiểu bạn có thể xem click vào demo bên dưới để dễ hiểu hơn. function changeClass giúp code gọn hơn khi addClass và removeClass.
1
Tiếp tục trong main.js tạo thêm biến songDetail lưu các thông tin về bài hát, gồm tên bài hát, ca sĩ và link file mp3
songDetail = {
'tenbaihat' : 'Anh Không Đòi Quà',
'trinhbay' : 'OnlyC - Karik',
'link' : 'dropbox'
}
Đổi $(h3.tenbaihat), $(h4.trinhbay) và giá trị song.src theo songDetail. Đặt mức volume ban đầu của Audio theo giá trị của $('.volume input[range]'), do volume chỉ có giá trị 0 đến 1 nên ta chia val của $('.volume input[range]') cho 100 (do ta đặt max=100). Dùng song.play() để audio tự play.
$('h3.tenbaihat').text(songDetail.tenbaihat);
$('h4.trinhbay').text(songDetail.trinhbay);
song.src = songData.link;
song.volume = player.vol.val()/100;
song.play();
F5 lại trình duyệt để kiểm tra kết quả. Ta thấy audio đã tự play.
Tiếp đến là liên kết các điều khiển trên player với phần Audio.
song.addEventListener('timeupdate',function (){
per = (song.currentTime/song.duration)*100;
if(per == 100){
$('.fill').css({'width': '0%'});
$('#seek').attr('value',0);
}else{
$('.fill').css({'width': per + '%'});
$('#seek').attr('value', per);
}
});
Giải thích đoạn code trên, khi Audio được phát thì giá trị currentTime sẽ thay đổi và có sự kiện timeupdate, khi đó ta tính phần trăm giữa currentTime và duration và lấy phần trăm này set width cho $('.fill') và value của $('#seek'). Còn $('.fill') và $('#seek') là phần nào thì hãy xem lại phần HTML-CSS.
$('#seek').click(function(event) {
time = ($(this).val()/100)*song.duration;
song.currentTime = time;
});
Khi click vào $('#seek'), ta lấy $('#seek').val() là phần trăm thời gian đã phát, từ đó tính ra thời gian của Audio khi đã phát theo $('#seek').val(). VD: Khi click thì $('#seek').val() là 40. Ta đặt song.currentTime là 40% của song.duration.
Hoàn thành chức năng các control, sữa lại function control trong main.js thành control(song,player), mở file player.js và thêm tham số song vào hàm player. Viết thêm song.pause() khi chuyển từ icon-pause sang icon-play, song.play() khi chuyển từ icon-play sang icon-pause. Và thêm song.pause(); song.currentTime = 0; khi click vào nút stop.
function control_player(song,ctrl) {
...
if(status == 'play'){
$(this).changeClass('icon-pause','icon-play');
song.pause();
}else{
$(this).changeClass('icon-play','icon-pause');
song.play();
}
...
button.play.changeClass('icon-pause','icon-play');
song.pause(); song.currentTime = 0;
Do ta lấy giá trị của $('.volume input["range"]) là phần trăm volume nên khi thay đổi giá trị sẽ làm thay đổi volume
button.vol.change(function(e) {
song.volume = ($(this).val())/100;
$('#vol-fill').css('width', $(this).val() + '%');
});
Tóm lại
Vậy là đã hoàn thành HTML5 Audio Player đơn giản. Dựa vào code trong bài này, bài sau mình sẽ hướng dẫn tạo playlist cho HTML5 Audio Player mới tạo này.
Do mình viết theo cách hiểu của mình khi code nên có thể khi đọc bài viết bạn sẽ không hiểu lắm. Bạn nên vừa đọc vừa thực hành code thì sẽ dễ hiểu hơn. Ở cuối bài có phần demo và code khi hoàn thành bạn có thể down về xem.
Nếu gặp vần đề gì hay có góp ý thì comment lại bên dưới nhé.