NỘI DUNG BÀI VIẾT
Audio trên trang Web
Trước khi HTML5 ra đời, các file audio chỉ có thể sử dụng được trên các trình duyệt web khi có các chương trình hỗ trợ (như flash).
Audio trong HTML5 là một chuẩn để có thể đưa các file audio vào trang web.
Phần tử <audio> trong HTML
Ta có thể chạy một file audio trong HTML, bằng cách sử dụng phần tử <audio>:
<audio controls> <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg"> <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> Trình duyệt của bạn không hỗ trợ phần tử audio. </audio>
Kết quả:
Audio trong HTML – Cách làm việc?
Các thuộc tính controls cho phép hiển thị điều khiển cho audio như: chạy, tạm dừng và âm lượng.
Phần tử <source> cho phép bạn chỉ định các fileaudio mà trình duyệt có thể lựa chọn từ đó. Nếu có nhiều file audio được hỗ trợ thì trình duyệt sẽ sử dụng định dạng đầu tiên.
Đoạn văn bản thông báo nằm giữa thẻ <audio> và </audio> sẽ chỉ hiển thị khi trình duyệt đó không hỗ trợ phần tử <audio>.
Audio trong HTML – các trình duyệt hỗ trợ
Trong HTML5, có 3 định dạng audio được hỗ trợ: MP3, Wav và Ogg.
Mỗi loại trình duyệt hỗ trợ các định dạng khác nhau:
| 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ó |
Audio trong HTML – các kiểu Media
| Định dạng file | Kiểu |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
HTML Audio – Các phương thức, thuộc tính và sự kiện
HTML5 sử dụng DOM cho các phương thức, thuộc tính và các sự kiện cho phần tử <audio>.
DOM cho phép bạn tải, chạy, dừng các audio, đồng thời cho bạn thiết lập thời gian và âm lượng.
Ngoài ra DOM còn có các sự kiện có thể đưa ra cho bạn thông báo một audio chuẩn bị chạy, đang tạm dừng, v.v.
Các thẻ Audio trong HTML
| Thẻ | Mô tả |
|---|---|
| <audio> | Định nghĩa nội dung của âm thanh |
| <source> | Chỉ định tài nguyên của các multiple media cho các phần tử media bởi cặp thẻ <video> và <audio> |
Kết luận
Qua đây là một số chia sẻ về audio trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
