Để lồng file âm thanh vào văn bản HTML bạn sử dụng thẻ <audio>
. Mẫu code của nó như sau:
<audio preload="none" controls="controls">
<source src="https://cdn.kiencang.net/file/audio.mp3" type="audio/mpeg" />
Trình duyệt của bạn không hỗ trợ thẻ audio
</audio>
Kết quả bên dưới (Leslie’s Strut (Sting) – Free music Youtube):
#1. Định nghĩa và cách sử dụng
Hiện tại có 3 định dạng được hỗ trợ bởi thẻ audio, đó là MP3, Wav, và Ogg. Tuy nhiên các trình duyệt hỗ trợ không giống nhau:
Trình duyệt | MP3 | Wav | Ogg |
Interner Expoler | Có | Không | Không |
Chrome | Có | Có | Có |
Firefox | Có | Có | Có |
Safari | Có | Có | Không |
Opera | Có | Có | Có |
#2. Kiểu MIME cho định dạng Audio
Định dạng | MIME type |
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
#3. Trình duyệt hỗ trợ
Cả 5 trình duyệt lớn hiện tại đều hộ trợ thẻ <audio>. Các con số trong bảng chỉ phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ tính năng của thẻ.
Trình duyệt | Chrome | Firefox | IE | Safari | Opera |
<audio> | 4.0 | 3.5 | 9.0 | 4.0 | 10.5 |
#4. Các thuộc tính
Thuộc tính | Giá trị | Mô tả |
autoplay | autoplay | Chỉ định âm thanh được bật ngay khi sẵn sàng (chỉ cần load xong là sẽ tự động bật) |
controls | controls | Chỉ định là nút điều khiển sẽ hiển thị ra ngoài (thí dụ như nút tắt bật âm thanh) |
loop | loop | Chỉ định là âm thanh sẽ được bật lại lần nữa sau khi hoàn thành xong |
muted | muted | Chỉ định âm thanh đầu ra không có cường độ (tắt tiếng) |
preload | auto metadata none | Chỉ định cách thức tải trước của âm thanh khi trang web được tải. Điều này ảnh hưởng đến thời gian tải trang. Nên sẽ ảnh hưởng đến trải nghiệm người dùng. |
src | URL | Đường dẫn chứa file audio |
Chào bạn! Bạn có thể cho mình xin cái code nhạc đầy đủ thuộc tính như: tự play, lặp lại một lần, lặp lại mãi được không bạn? Cảm ơn bạn rất nhiều.
Bạn thử chèn các thuộc tính mà mình mô tả trong bài viết vào xem thế nào nhé.