Chèn Âm thanh (audio) vào trang web

  • Trong HTML5 đã hỗ trợ thẻ (tag) <audio></audio> giúp chúng ta chèn âm thanh vào trang web một cách dễ dàng.
  • Hỗ trợ các định dạng âm thanh sau: .MP3 , .WAV, and .OGG

Các thuộc tính (attributes) hỗ trợ trong thẻ audio

Thuộc tính (Attribute) Giá trị (Value) Diễn giải (Description)
src URL Đây là thuộc tính quan trọng. Dùng để chỉ định đường dẫn đến file âm thanh.
autoplay autoplay Dùng để yêu cầu âm thanh sẽ tự động phát khi người dùng truy cập vào trang web.
controls controls Dùng để yêu cầu hiển thị thanh điều khiển với các nút Play, Pause, Stop, điều chỉnh âm lượng
loop loop Dùng để yêu cầu âm thanh có tự động lặp đi lặp lại (chạy lại khi đã phát hết thời lượng file âm thanh) hay không?
muted muted Dùng để yêu cầu âm thanh tự động tắt âm lượng.
preload auto metadata none Dùng để yêu cầu trình duyệt (web browser) ưu tiên tải tập tin âm thanh trước các thành phần HTML khác hay không?

Cách sử dụng thẻ (tag) audio

Download file âm thanh ví dụ Hannon-Jeremy_Black.mp3: Hannon-Jeremy_Black

Cách 1: khai báo đơn giản

<audio src="Hannon-Jeremy_Black.mp3" loop="loop" autoplay controls></audio>
Ví dụ trên chèn âm thanh Hannon-Jeremy_Black.mp3, với các yêu cầu thông qua các thuộc tính (attributes) như sau:
  • loop="loop": yêu cầu file âm thanh tự động lặp đi lặp lại nhiều lần
  • autoplay: yêu cầu tự động phát khi người dùng truy cập vào trang web
  • controls: yêu cầu hiển thị thanh điều khiển với các nút Play, Pause, Stop, điều chỉnh âm lượng

Cách 2: khai báo chi tiết

<audio controls>
  <source src="duong_dan_den_tap_tin_am_thanh_dinh_dang.ogg" type="audio/ogg">
  <source src="duong_dan_den_tap_tin_am_thanh_dinh_dang.mp3" type="audio/mpeg">
  Trình duyệt (web browser) của bạn không hỗ trợ định dạng âm thanh này.
</audio>
Do bạn không biết người dùng (khách ghé thăm) trang web của bạn sẽ sử dụng trình duyệt (web browser) nào? Phiên bản mới hay cũ? Có hỗ trợ định dạng âm thanh nào hay không? Để xử lý tốt tình huống này, chúng ta sẽ chuẩn bị nhiều định dạng âm thanh, và khai báo lần lượt theo thứ tự ưu tiên bằng thẻ <source /> lồng bên trong thẻ <audio></audio>. Khi đó, trình duyệt (web browser) của người dùng sẽ:
  • Tìm theo thứ tự ưu tiên từ trên xuống trong các thẻ <source /> được khai báo.
  • Khi tìm được định dạng âm thanh nào mà trình duyệt (web browser) hỗ trợ -> sẽ hiển thị và phát âm thanh.
  • Nếu tìm không thấy bất kỳ định dạng nào được hỗ trợ -> sẽ hiển thị dòng chữ Trình duyệt (web browser) của bạn không hỗ trợ định dạng âm thanh này.

Chèn video vào trang web

  • Trong HTML5 đã hỗ trợ thẻ (tag) <video></video> giúp chúng ta chèn video vào trang web một cách dễ dàng.
  • Hỗ trợ các định dạng âm thanh sau: .MP4 , .WebM, and .OGG
  • Thẻ <video></video> này hoạt động tương tự thẻ <audio></audio> ở phía trên.

Các thuộc tính (attributes) hỗ trợ trong thẻ video

Thuộc tính (Attribute) Giá trị (Value) Diễn giải (Description)
src URL Đây là thuộc tính quan trọng. Dùng để chỉ định đường dẫn đến file âm thanh.
autoplay autoplay Dùng để yêu cầu âm thanh sẽ tự động phát khi người dùng truy cập vào trang web.
controls controls Dùng để yêu cầu hiển thị thanh điều khiển với các nút Play, Pause, Stop, điều chỉnh âm lượng
loop loop Dùng để yêu cầu âm thanh có tự động lặp đi lặp lại (chạy lại khi đã phát hết thời lượng file âm thanh) hay không?
muted muted Dùng để yêu cầu âm thanh tự động tắt âm lượng.
preload auto metadata none Dùng để yêu cầu trình duyệt (web browser) ưu tiên tải tập tin âm thanh trước các thành phần HTML khác hay không?
width pixels Dùng để quy định chiều Rộng (width) của video hiển thị
height pixels Dùng để quy định chiều Cao (height) của video hiển thị
poster URL Dùng để hiển thị hình ảnh xem trước của video (trước khi người dùng bấm nút Play)

Cách sử dụng thẻ (tag) video

Download file video ví dụ SampleVideo_1280x720_1mb.mp4: SampleVideo_1280x720_1mb

Cách 1: khai báo đơn giản

<video src="SampleVideo_1280x720_1mb.mp4" loop="loop" autoplay controls></video>
Ví dụ trên chèn video SampleVideo_1280x720_1mb.mp4, với các yêu cầu thông qua các thuộc tính (attributes) như sau:
  • loop="loop": yêu cầu file video tự động lặp đi lặp lại nhiều lần
  • autoplay: yêu cầu tự động phát khi người dùng truy cập vào trang web
  • controls: yêu cầu hiển thị thanh điều khiển với các nút Play, Pause, Stop, điều chỉnh âm lượng

Cách 2: khai báo chi tiết

<video width="320px" height="240px" controls>
  <source src="duong_dan_den_tap_tin_video_dinh_dang.ogg" type="video/ogg">
  <source src="duong_dan_den_tap_tin_video_dinh_dang.mp3" type="video/mp4">
  Trình duyệt (web browser) của bạn không hỗ trợ định dạng video này.
</audio>
Do bạn không biết người dùng (khách ghé thăm) trang web của bạn sẽ sử dụng trình duyệt (web browser) nào? Phiên bản mới hay cũ? Có hỗ trợ định dạng video nào hay không? Để xử lý tốt tình huống này, chúng ta sẽ chuẩn bị nhiều định dạng video, và khai báo lần lượt theo thứ tự ưu tiên bằng thẻ <source /> lồng bên trong thẻ <video></video>. Khi đó, trình duyệt (web browser) của người dùng sẽ:
  • Tìm theo thứ tự ưu tiên từ trên xuống trong các thẻ <source /> được khai báo.
  • Khi tìm được định dạng video nào mà trình duyệt (web browser) hỗ trợ -> sẽ hiển thị và phát video.
  • Nếu tìm không thấy bất kỳ định dạng nào được hỗ trợ -> sẽ hiển thị dòng chữ Trình duyệt (web browser) của bạn không hỗ trợ định dạng video này.