Hướng dẫn audio html tag - thẻ html âm thanh

  • Trang chủ
  • Tham khảo
  • Tag html
  • html5

Show

Đị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

HTML4.01HTML5
● 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:

 
Hướng dẫn audio html tag - thẻ html âm thanh
Hướng dẫn audio html tag - thẻ html âm thanh
Hướng dẫn audio html tag - thẻ html âm thanh
Hướng dẫn audio html tag - thẻ html âm thanh
Hướng dẫn audio html tag - thẻ html âm thanh
Hướng dẫn audio html tag - thẻ html âm thanh
Hướng dẫn audio html tag - thẻ html âm thanh
Hướng dẫn audio html tag - thẻ html âm thanh
WebMX 4 10.5 6 X X X X
OggX 3.6 10.5 6 5.1 X X X
OggX 3.6 5.0 10 5.1 3.1 X X
MP39 X X 6 Ogg 3.1 2.2 7.5
Wav9 X X 6 X 3.1 X 7.5
OggX 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)

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)Hệ điều hành
Trình duyệtTrình duyệtMÁ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ọnGiá 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"
"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)
(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

Format

MIME-type

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.

Trình duyệtMP3WavOgg
Chrome

Firefox

Firefox

Firefox

Firefox

Opera

Firefox

Firefox

Opera


Xem ví dụ