Cafedev chia sẻ cho ace về cách làm việc với audio trong html bằng thẻ audio.
Nội dung chính
1. Phần tử <video>
Để phát tệp âm thanh trong HTML, hãy sử dụng phần tử <audio>:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>2. Cách hoạt động của audio
Thuộc tính controls thêm các điều khiển âm thanh, như phát, tạm dừng và âm lượng.
Phần tử <source> cho phép bạn chỉ định các file â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 hỗ trợ nó.
Văn bản giữa các thẻ <audio> và </audio> sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <audio>.
3. Audio Formats trong HTML
Có ba định dạng âm thanh được hỗ trợ: MP3, WAV và OGG. Trình duyệt hỗ trợ cho các định dạng khác nhau là:
| 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 |
4. Audio – Media Types trong HTML
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
5. Audio với Methods, Properties, and Events
HTML định nghĩa các phương thức, thuộc tính và sự kiện DOM cho phần tử <audio>.
Điều này cho phép bạn tải, phát và tạm dừng âm thanh, cũng như đặt thời lượng và âm lượng.
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.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
