Tương như video, các tập tin audio trước khi có HTML5 đều phải được nhúng thông qua một plug-in (chẳng hạn như Flash). Điều đáng mừng là ở HTML5, bạn đã có thể dùng thẻ audio để nhúng một audio bất kỳ vào trang web. Tất cả các trình duyệt phổ biến hiện nay với các phiên bản mới nhất đều hỗ trợ phần tử audio.
Phần tử audio
Bạn có thể nhúng một tập tin audio vào HTML bằng phần tử audio với đoạn mã sau.
<audio controls> <source src="dammio.ogg" type="audio/ogg"> <source src="dammio.mp3" type="audio/mpeg"> </audio>
Trong ví dụ trên, thuộc tính controls dùng để thêm các nút điều khiển như play pause, và volume. Phần tử source mô tả đường dẫn của tập tin audio. Nếu có 2 phần tử source trở lên thì có nghĩa là phần tử thứ hai trở đi chứa tập tin dự phòng trong trường hợp tập tin chính ở phần tử source thứ nhất bị hỏng. Dòng chữ “Trình duyệt của bạn không hỗ trợ phần tử audio.” hiển thị khi trình duyệt không hỗ trợ phần tử audio.
Định dạng audio được hỗ trợ
Tương tự video, trong HTML5, có 3 định dạng được hỗ trợ là MP3, Wav, và Ogg. Tuy nhiên, các trình duyệt không hỗ hết 3 định dạng này mà tùy theo trình duyệt, mức độ hỗ trợ là khác nhau.
| Trình duyệt | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
Kết luận
Như vậy, trong bài bạn cũng đã biết cách nhúng một tập tin audio vào trang web thông qua phần tử audio. Mời bạn theo dõi bài tiếp theo.
![[HTML/HTML5] Phần 24: Bố cục trang web HTML cơ bản](https://www.dammio.com/wp-content/uploads/2017/09/layout-004-410x260.jpg "[HTML/HTML5] Phần 24: Bố cục trang web HTML cơ bản")
![[HTML/HTML5] Phần 6: Tiêu đề HTML](https://www.dammio.com/wp-content/uploads/2017/06/cropped-html-400x260.jpg "[HTML/HTML5] Phần 6: Tiêu đề HTML")
![[HTML/HTML5] Phần 41: Thể hiện bản đồ Google trong HTML](https://www.dammio.com/wp-content/uploads/2018/06/googlemaps_html-410x260.png "[HTML/HTML5] Phần 41: Thể hiện bản đồ Google trong HTML")
wpDiscuz