- Trang chủ
- Tham khảo
- Tag html
- html5
Định nghĩa và sử dụng
- Tag định nghĩa âm thanh, như nhạc hay trường audio khác.
- Thường dùng kèm với tag để hiện thị được nhiều nội dung hơn.
Sự khác nhau giữa HTML4.01 và HTML5
● Không hỗ trợ | ● Đây là tag mới trong HTML5 |
Cấu trúc
Dòng thông báo
Dòng text nằm giữa và sẽ hiển thị khi trình duyệt không hỗ trợ tag
Html viết:
Trình duyệt bạn sử dụng không hỗ trợ tag audio.
Hiển thị nhiều nội dung với tag
Do các trình duyệt hỗ trợ định dạng file audio khác nhau, nên cách dùng trên có thể chạy video cho nhiều trình duyệt và hệ điều hành khác nhau.
Định dạng file audio hỗ trợ bởi trình duyệt và hệ điều hành:
X | 4 | 10.5 | 6 | X | X | X | X | |
X | 3.6 | 10.5 | 6 | 5.1 | X | X | X | |
X | 3.6 | 5.0 | 10 | 5.1 | 3.1 | X | X | |
9 | X | X | 6 | Ogg | 3.1 | 2.2 | 7.5 | |
9 | X | X | 6 | X | 3.1 | X | 7.5 | |
X | 3.6 | 5 | 10.5 | 5.1 | 3.1 | X | X |
- Ogg
Wav
x
AAC
PCM
Chuyển đổi định dạng file audio: www.worldwidewhat.net
Trình duyệt hỗ trợ
Yêu cầu phiên bản trình duyệt với mức tối thiểu được hỗ trợ cho thẻ :
Trình duyệt dành cho PC:
Tag được hỗ trợ trong đa số các trình duyệt.
Thiết bị hỗ trợ
Trình duyệt dành cho PC:
Tag được hỗ trợ trong đa số các trình duyệt.
Thiết bị hỗ trợ
Yêu cầu phiên bản hệ điều hành và trình duyệt với mức tối thiểu được hỗ trợ cho thẻ :
ĐIỆN THOẠI [SMARTPHONE]
Trình duyệt | Trình duyệt | MÁY TÍNH BẢNG [TABLETS] | Thuộc tính |
Cách sử dụng: | Cách sử dụng: | Thuộc tính tùy chọn | Giá trị |
Ví dụ | Ví dụ | Mô tả | autoplay |
autoplay="autoplay" | Âm thanh tự động chạy. metadata none | controls | controls="controls" |
Hiển thị tính năng điều khiển. | loop | loop="loop" | Hiển thị tính năng lặp lại khi chạy xong đoạn âm thanh. |
preload
auto metadata none
- Tuy nhiên, hầu hết các lập trình viên không sử dụng thuộc tính src của thẻ để xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát. Họ sử dụng thẻ , vì thẻ có hỗ trợ thêm nhiều thuộc tính, giúp trình phát nhạc trở nên đa năng hơn.
2.2] Thuộc tính autoplay được dùng để tạo một "trình phát nhạc" cho trang web.
- Thuộc tính autoplay thiết lập hành động "sau khi trang web được tải xong, trình phát nhạc sẽ tự động chơi bản nhạc"
2.3] Thuộc tính controls
- Thuộc tính controls xác định việc "trình phát nhạc sẽ được hiển thị trên màn hình"
Xem ví dụ
- Tuy nhiên, hầu hết các lập trình viên không sử dụng thuộc tính src của thẻ để xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát. Họ sử dụng thẻ , vì thẻ có hỗ trợ thêm nhiều thuộc tính, giúp trình phát nhạc trở nên đa năng hơn.
2.2] Thuộc tính autoplay
- Thuộc tính autoplay thiết lập hành động "sau khi trang web được tải xong, trình phát nhạc sẽ tự động chơi bản nhạc"
2.3] Thuộc tính controls | - Thuộc tính controls xác định việc "trình phát nhạc sẽ được hiển thị trên màn hình" |
- Lưu ý: Thẻ không có thuộc tính controls thì trình phát nhạc không hiển thị. Tuy nhiên, nếu tồn tại thuộc tính autoplay thì bản nhạc vẫn được phát bình thường. | 2.4] Thuộc tính loop |
autoplay | Thiết lập hành động:"sau khi trang web được tải xong, trình phát nhạc sẽ tự động chơi bản nhạc" |
loop | Thiết lập hành động "bản nhạc sẽ tự động được phát lặp lại sau mỗi lần kết thúc" |
muted | Xác định việc trình phát nhạc sẽ mặc định được thiết lập ở chế độ "tắt tiếng" |
preload | Xác định việc tập tin âm thanh có được tải cùng với lúc tải trang hay không |
2.1] Thuộc tính src
- Thuộc tính src dùng để xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát.
- Lưu ý: "Đường dẫn đến tập tin âm thanh mà bạn muốn phát" có thể được xác định bằng đường dẫn tương đối hoặc đường dẫn tuyệt đối.
Xem ví dụ
- Tuy nhiên, hầu hết các lập trình viên không sử dụng thuộc tính src của thẻ để xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát. Họ sử dụng thẻ , vì thẻ có hỗ trợ thêm nhiều thuộc tính, giúp trình phát nhạc trở nên đa năng hơn.
Xem ví dụ
- Tuy nhiên, hầu hết các lập trình viên không sử dụng thuộc tính src của thẻ để xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát. Họ sử dụng thẻ , vì thẻ có hỗ trợ thêm nhiều thuộc tính, giúp trình phát nhạc trở nên đa năng hơn.
2.2] Thuộc tính autoplay
Xem ví dụ
- Tuy nhiên, hầu hết các lập trình viên không sử dụng thuộc tính src của thẻ để xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát. Họ sử dụng thẻ , vì thẻ có hỗ trợ thêm nhiều thuộc tính, giúp trình phát nhạc trở nên đa năng hơn.
2.2] Thuộc tính autoplay
- Trình phát nhạc bên dưới ĐƯỢC hiển thị.
- Trình phát nhạc bên dưới KHÔNG ĐƯỢC hiển thị.
Xem ví dụ
- Lưu ý: Thẻ không có thuộc tính controls thì trình phát nhạc không hiển thị. Tuy nhiên, nếu tồn tại thuộc tính autoplay thì bản nhạc vẫn được phát bình thường.
Xem ví dụ
2.4] Thuộc tính loop
- Thuộc tính loop thiết lập hành động "bản nhạc sẽ tự động được phát lặp lại sau mỗi lần kết thúc"
Xem ví dụ
2.5] Thuộc tính muted
- Thuộc tính muted xác định việc trình phát nhạc sẽ mặc định được thiết lập ở chế độ "tắt tiếng"
Xem ví dụ
2.6] Thuộc tính preload
Mặc định khi trang web được tải thì tập tin âm thanh của trình phát nhạc cũng được tải theo, điều đó đồng nghĩa với việc tốc độ tải trang bị chậm lại.
- Thuộc tính preload xác định việc tập tin âm thanh có được tải cùng với lúc tải trang hay không.
- Thuộc tính preload có hai giá trị:
auto | Tập tin âm thanh sẽ được tải cùng với lúc tải trang |
none | Tập tin âm thanh sẽ KHÔNG được tải cùng với lúc tải trang[nó chỉ được tải khi người dùng bấm vào nút play] |
Xem ví dụ
3] Những định dạng âm thanh được hỗ trợ
- Hiện nay có ba loại định dạng âm thanh phổ biến được hỗ trợ trên các trình duyệt: MP3, Wav, Ogg
MP3 | audio/mpeg |
Wav | audio/wav |
Ogg | audio/ogg |
- Tuy nhiên, không phải tất cả các trình duyệt đều hỗ tợ hết ba loại định dạng âm thanh này.
Chrome | CÓ | CÓ | CÓ |
Firefox | CÓ | CÓ | CÓ |
Firefox | CÓ | CÓ | CÓ |
Firefox | CÓ | CÓ | Firefox |
Opera | CÓ | Firefox | Firefox |
Opera
Xem ví dụ