Phát âm thanh trên web
Trước HTML5, các tệp âm thanh chỉ có thể được phát trên trình duyệt với một trình hỗ trợ (như Flash Player).
Phần tử HTML5 <audio> chỉ ra cách thức tiêu chuẩn để nhúng âm thanh vào một trang web.
Phần tử HTML <audio>
Để phát một tệp âm thanh trong HTML, sử dụng phần tử <audio>.
Ví dụ
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Cách thức hoạt động
Thuộc tính controls để thêm trình điều khiển âm thanh như play, pause, và volume.
Phần tử <source> cho phép bạn chỉ định các tệp âm thanh thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được nhận ra đầu tiên.
Văn bản giữa cặp thẻ <audio> và </audio> chỉ hiển thị nếu trình duyệt không hỗ trợ phần tử <audio>
Trình duyệt hỗ trợ
Trong HTML5, có 3 kiểu định dạng âm thanh được hỗ trợ: MP3, WAV, và OGG.
Bảng tham khảo
|
Browser |
MP3 |
WAV |
OGG |
|
Edge/IE |
YES |
NO |
NO |
|
Chrome |
YES |
YES |
YES |
|
Firefox |
YES |
YES |
YES |
|
Safari |
YES |
YES |
NO |
|
Opera |
YES |
YES |
YES |
Media Type
|
Định dạng File |
Media Type |
|
MP3 |
audio/mpeg |
|
OGG |
audio/ogg |
|
WAV |
audio/wav |
Các phương thức, thuộc tính và sự kiện.
HTML5 xác định các phương thức, thuộc tính và sự kiện DOM cho phần tử <audio>.
Chúng cho phép bạn tải, phát, cũng như đặt thời lượng, âm lượng cho video.
Ngoài ra còn có các sự kiện DOM có thể thông báo cho bạn khi âm thanh bắt đầu phát, bị tạm dừng, v.v.
Để tham khảo thêm về DOM bạn có thể vào link sau: HTML5 Audio/Video DOM Reference.
Các thẻ audio
|
Tag |
Mô tả |
|
<audio> |
Xác định nội dung âm thanh |
|
<source> |
Xác định tài nguyên phương tiện cho các thành phần phương tiện, chẳng hạn như <video> và <audio> (chỉ ra đường dẫn đến tệp âm thanh bằng thuộc tính src) |
Trích nguồn từ: (https://www.w3schools.com/html/html5_audio.asp)
