Audio Tag là một tag mới trong HTML5, nó giúp ta trực tiếp chèn một file audio vào trong HTML mà không cần Flash. Trong bài này, mình sẽ hướng dẫn cơ bản cách điều khiển tag Audio này bằng Javascript.

Trong bài mình dùng jQuery để điều khiển nó, vì jQuery có cách select dễ hơn là dùng Javascript thuần. Và mấy câu select trong Javascript thì rất là dài :))

Cách sử dụng Audio Tag trong HTML5

Đơn giản chỉ cần thêm đoạn code này và thay duong_dan_file_audio là đường dẫn file audio cần chèn. Tùy thuộc vào trình duyệt đang dùng mà Audio Player mặc định sẽ khác nhau.

<audio controls="controls">
    <source src="duong_dan_file_audio"/>
</audio>

[CodePen height=300 show=result href=sqzxg user=jshung92]

Bạn có thể xem thêm về Audio Tag theo link ở cuối bài.

Điều khiển bằng jQuery

Audio Player khác nhau tùy theo trình duyệt sẽ làm bạn khó khăn khi thiết kế giao diện. Do vậy bạn cần dùng jQuery để điều khiển player. Trong bài chỉ nêu cách hoạt động không giao diện HTML-CSS, bạn có thể tự nghiên cứu thêm vào.

Tạo một file HTML với nội dụng sau:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio with jQuery</title>
</head>
<body>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="stop">Stop</button><br>
    <button id="volup">Volume +</button>
    <button id="voldown">Volume -</button>

    <script src="jquery-1.10.1.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

Ta sẽ tạo tag Audio bằng jQuery nên không cần tag Audio trong file trên. Các điều khiển cơ bản mà ta se làm là: play, pause, stop, tăng/giảm volume.

Tạo file main.js và thêm vào đoạn code

(function($){
    play    = $('#play');
    pause   = $('#pause');
    stop    = $('#stop');
    volup   = $('#volup');
    voldown = $('#voldown');

    //Song
    song    = new Audio();
    song.type= 'audio/mpeg';
    song.src='Alizee - La isla bonita.mp3';
})(jQuery);

Code tạo một Audio Object gán tên là song với thuộc tính type và src. Alizee - La isla bonita.mp3 là URL của file audio và các đoạn code sau phải thêm trước dòng })(jQuery);

Các chức năng

Tiếp đến ta thiết lập các chức năng. Audio Object có các function tương ứng cho chức năng play/pause, chức năng stop thì ta giả lập bằng cách dừng audio và đặt giá trị của currentTime là 0.

play.click(function (e) {
    e.preventDefault();
    song.play();
});

pause.click(function (e) {
    e.preventDefault();
    song.pause();
});

stop.click(function (e) {
    e.preventDefault();
    song.pause();
    song.currentTime = 0;
});

Audio Object dùng giá trị của volume để thiết lập volume của audio. Giá trị volume cố định tăng từ 0 đến 1. Ta chọn mỗi click Volume +/Volume – sẽ tương ứng tăng/giảm 0.05 giá trị của volume.

volup.click(function (e) {
    e.preventDefault();
    if(song.volume < 1){
        song.volume += 0.05;
    }else{
        song.volume = 1;
    }
});

voldown.click(function (e) {
    e.preventDefault();
    if(song.volume > 0){
        song.volume -= 0.05;
    }else{
        song.volume = 0;
    }
});

OK. Vậy là đã hoàn thành hướng dẫn dùng Javascript điều khiển tag Audio trong HTML5. Đọc có gì thắc mắc hay đóng góp ý kiến thì comment lại nhé. Mình sẽ cố gắng trả lời những gì mà mình biết.

Bạn có thể xem demo đầy đủ theo link này: http://cdpn.io/uIfzn. Và cũng có thể download source code ở link cuối bài.