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