Audio trong HTML5
HTML5 cung cấp các chuẩn để chạy các tệp tin audio trên web. Audio trên Web Trước khi HTML5 ra đời, không có bất kỳ chuẩn nào quy định việc chạy audio trên website. Nếu muốn sử dụng audio trên trình duyệt, thông thường người dùng phải thêm chương trình hỗ trợ (như flash). Khi thẻ ...
HTML5 cung cấp các chuẩn để chạy các tệp tin audio trên web.
Audio trên Web
Trước khi HTML5 ra đời, không có bất kỳ chuẩn nào quy định việc chạy audio trên website. Nếu muốn sử dụng audio trên trình duyệt, thông thường người dùng phải thêm chương trình hỗ trợ (như flash).
Khi thẻ <audio> được đưa vào HTML5, bạn có thể dễ dàng chèn audio theo đúng chuẩn.
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Audio | 4.0 | 3.5 | 9.0 | 4.0 | 10.5 |
Thẻ audio trong HTML5
Sử dụng thẻ <audio> để chạy audio trong HTML5:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <audio controls> <source src="/wp-content/uploads/2015/09/bell.ogg" type="audio/ogg"> <source src="/wp-content/uploads/2015/09/bell.mp3" type="audio/mpeg"> Trình duyệt của bạn không hỗ trợ thẻ audio trong HTML5. </audio> </body> </html> |
Demo
Cách sử dụng thẻ audio
Thuộc tính controls cho phép hiển thị thanh điều khiển video như: bắt đầu, tạm dừng, âm lượng…
Đoạn thông báo nằm giữa thẻ <audio> và </audio> chỉ hiển thị đối với những trình duyệt không hỗ trợ thẻ <audio>.
Bạn có thể sử dụng nhiều thẻ <source> để liên kết tới tệp tin audio có định dạng khác nhau. Trình duyệt sẽ tự động tải kiểu audio mà nó hỗ trợ. Nếu có nhiều kiểu audio được hỗ trợ trong thẻ <source>, trình duyệt sẽ sử dụng kiểu đầu tiên.
Định dạng audio được hỗ trợ
Hiện tại, có 3 kiểu định dạng được hỗ trợ trong thẻ <audio> là: MP3, Wav và Ogg:
| Trình duyệt | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | CÓ | KHÔNG | KHÔNG |
| Chrome | CÓ | CÓ | CÓ |
| Firefox | CÓ | CÓ | CÓ |
| Safari | CÓ | CÓ | KHÔNG |
| Opera | CÓ | CÓ | CÓ |
Các kiểu audio
| Định dạng | Kiểu |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
Phương thức, thuộc tính, sự kiện trong thẻ audio
HTML5 sử dụng DOM cho các phương thức, thuộc tính và sự kiện của thẻ <audio>.
Nó cho phép bạn tải, chạy, dừng audio cũng như thiết lập thời lượng và âm lượng của audio.
Bạn có thể sử dụng javascript để bắt các sự kiện trong DOM qua đó nắm được các trạng thái của audio như: bắt đầu chạy, tạm dừng, v.v…
