Tìm hiểu cách thêm âm thanh nền hoặc tệp nhạc cho trang web của bạn bằng cách sử dụng phần tử HTML <audio> và các thuộc tính của nó.
Để thêm nhạc/âm thanh nền trên trang web, bạn có thể dùng phần tử audio HTML (<audio>...</audio>).
Giả sử bạn có một tệp âm thanh muốn phát nền ngay khi người dùng truy cập trang web. Đây là mã HTML chung cần thiết để làm điều đó:
<audio autoplay> <source src="tệp-âm-thanh-của-bạn.wav" type="audio/wav" /> </audio>Thuộc tính src của phần tử <audio> chấp nhận cả nguồn âm thanh nội bộ và bên ngoài làm giá trị.
Chú ý thuộc tính autoplay. Đó là bắt buộc nếu bạn muốn âm thanh bắt đầu phát ngay khi người dùng vào trang web của bạn.
Demo: để nghe ví dụ, hãy giảm âm lượng máy tính/tai nghe và nhấp vào demo này.
Có ba định dạng âm thanh được hỗ trợ trong HTML: MP3, WAV và OGG. Trong phần tử <audio> bạn chỉ định định dạng trong thuộc tính type:
| Định dạng tệp | Loại phương tiện |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
Trong hướng dẫn này tôi dùng định dạng WAV, do đó tôi thêm thuộc tính type="audio/wav" trên phần tử <source> ở trên.
Thuộc tính phần tử audio
Dưới đây là một vài thuộc tính hữu ích tích hợp sẵn trong phần tử <audio>, cung cấp cho bạn kiểm soát chi tiết.
Lặp âm thanh nền
Để lặp âm thanh nền, bạn có thể thêm thuộc tính loop:
<audio autoplay loop> <source src="tệp-âm-thanh-của-bạn.wav" type="audio/wav" /> </audio>Tắt âm thanh nền
Để tắt âm thanh nền, bạn có thể thêm thuộc tính muted:
<audio muted> <source src="tệp-âm-thanh-của-bạn.wav" type="audio/wav" /> </audio>Tại sao bạn lại dùng thuộc tính muted? Có thể bạn muốn tạm thời vô hiệu hóa nguồn âm thanh của phần tử audio và bật lại sau, mà không xóa toàn bộ phần tử khỏi trang web.
Thêm giao diện điều khiển
Để thêm điều khiển (phát, tạm dừng, v.v.), dùng thuộc tính controls:
<audio controls> <source src="tệp-âm-thanh-của-bạn.wav" type="audio/wav" /> </audio>Bây giờ người dùng có thể nhấp phát nếu họ muốn nghe tệp âm thanh của bạn.
Hỗ trợ trình duyệt cho định dạng âm thanh
- MP3 được hỗ trợ trong tất cả trình duyệt,
- WAV được hỗ trợ trong tất cả trình duyệt trừ Edge/IE
- OGG được hỗ trợ trong tất cả trình duyệt trừ Edge/IE và Safari
Tính đến tháng 7 năm 2020.
Mẹo: thêm một <source> phụ vào phần tử <audio> của bạn làm dự phòng, trường hợp trình duyệt của người dùng cuối không hỗ trợ định dạng tệp chính của bạn:
<audio controls> <source src="tệp-âm-thanh-của-bạn.wav" type="audio/wav" /> <source src="tệp-âm-thanh-của-bạn.mp3" type="audio/mpeg" /> </audio>Bây giờ nếu trình duyệt của người dùng không hỗ trợ định dạng WAV, nó sẽ phát nguồn MP3 thay thế.