Tag audio là gì
Tag audio là một tag đặc biệt trong html 5 giúp người dùng chèn âm thanh vào trong website của mình. Thẻ audio trong html còn được dùng để định nghĩa âm thanh, như nhạc hay trường audio khác. Chúng ta có thẻ sử dụng với tag <source> để hiện thị được nhiều nội dung âm thanh hơn.
Cấu trúc của thẻ audio
<audio src=”đường dẫn tới file audio” controls=”controls”>Dòng thông báo</audio>
Lưu ý :Đoạn chữ “dòng thông báo” nằm giữa <audio> và </audio> sẽ hiển thị khi trình duyệt không hỗ trợ thẻ <audio>.
Một số ví dụ sử dụng audio chèn nhạc vào html 5
Ví dụ 1: cách chèn nhạc nền vào html đơn giản
|
1 |
<audio src="wp-content/uploads/2017/08/Doan-Xuan-Ca.ogg" controls="controls">Trình duyệt của bạn không hỗ trợ thành phần audio.<audio> |
Kết quả bạn sẽ nghe được audio đoạn quân ca trong bài viết này.
Ví dụ 2: Chèn âm file mp3 vào website khi duyệt trình không hổ trợ kiểu MIME ogg. Để có thể chạy được mp3 thì các bạn sử dụng thêm thẻ <source>
|
1 2 3 4 5 |
<audio controls="controls"> <source src="wp-content/uploads/2017/08/Doan-Xuan-Ca.ogg" type="audio/ogg" /> <source src="wp-content/uploads/2017/08/Doan-Xuan-Ca.ogg" type="audio/mp3" /> Trình duyệt của bạn không hỗ trợ thành phần audio. <audio> |
Với ví dụ này khi bạn xài duyệt trình ie (Internet Explorer) truy vào bài viết này. Thì đoạn html trên sẽ tự động chuyển sang mp3 cho các bạn.
Những trình duyệt hổ trợ cho thẻ audio
| HTML Tag | |||||
|---|---|---|---|---|---|
| <audio> | Yes | Yes | Yes | Yes | Yes |
Hầu hết các trình duyệt đều hổ trợ cho thẻ audio. Nhưng các bạn chú ý đến bảng định dạng file cho audio bên dưới. Vì thế các bạn nên sử dụng chung với thẻ <source> để tăng thuộc tính cho tag audio.
Các bạn có thể xem các trình duyệt hổ trợ định dạng file audio.
| Internet Explorer | Firefox | Opera | Chrome | Safari | IOS | Android | Window Phone | |
| WebM | X | 4 | 10.5 | 6 | X | X | X | X |
|---|---|---|---|---|---|---|---|---|
| Ogg | X | 3.6 | 10.5 | 6 | 5.1 | X | X | X |
| Wav | X | 3.6 | 5.0 | 10 | 5.1 | 3.1 | X | X |
| MP3 | 9 | X | X | 6 | x | 3.1 | 2.2 | 7.5 |
| AAC | 9 | X | X | 6 | X | 3.1 | X | 7.5 |
| PCM | X | 3.6 | 5 | 10.5 | 5.1 | 3.1 | X | X |
Bảng Kiểu MIME cho định dạng Audio
| Định dạng | MIME type |
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
Thuộc tính của thẻ audio trong html 5
Cách sử dụng: <audio thuoctinh=”giatri”></audio>
Mẫu ví dụ về thuộc tính:
|
1 |
<audio autoplay="autoplay"></audio> |
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| autoplay | autoplay | autoplay=”autoplay” | File Âm thanh sẽ tự động chạy. |
| controls | controls | controls=”controls” | Hiển thị các tính năng điều khiển như next, pre, play |
| loop | loop | loop=”loop” | Hiển thị tính năng lặp lại khi chạy xong đoạn âm thanh. |
| preload | auto metadata none |
preload=”auto” | Xác định âm thanh có chạy không khi tải trang. |
| src | URL | src=”audio/audio.mp3″ | Xác định đường dẫn tới file âm thanh. |
Lời kết
Thẻ audio được sử dụng rộng rãi trong thiết kế html 5. Các bạn chú ý là nên sử dụng chung với tag source để tăng thuộc tính audio. Qua bài viết này, các bạn có thể hiểu rõ hơn về tag audio cũng như cách chèn âm thanh vào website. Nhớ share nếu cảm thấy bài viết này hữu ích nha.
