Thẻ AUDIO trong HTML

• Trần Thị Vân
• 2020
• 03/05/2025

Chức năng của Thẻ AUDIO trong HTML

Thẻ AUDIO trong HTML dùng để chạy các file âm thanh, các file âm thanh đó có thể nằm trên website của bạn hoặc có thể nằm trên các website khác.

Cú pháp của Thẻ AUDIO trong HTML

<audio controls autoplay muted volume="giatrivolume" loop controlslist="nodownload" >
  <source src="thumuc/file-am-thanh.mp3" type="audio/mpeg">
  <source src="thumuc/file-am-thanh.ogg" type="audio/ogg">
</audio>

source: Chứa đường dẫn tới file âm thanh với những định dạng khác nhau để chạy được trên nhiều trình duyệt.

controls: Dùng để hiện các nút điều khiển như nút Play/Pause và thanh tua,..

autoplay: Cho phép âm thanh phát sau khi tải trang.

muted: Mặc định sẽ tắt âm thanh.

volume="giatrivolume": Dùng để quy định mức độ âm thanh to nhỏ, 0 là tắt tiếng và tăng dần đến mức 1 là lớn nhất.

loop: Phát lại nhiều lần sau khi kết thúc.

controlslist="nodownload": Thuộc tính controlslist cho cài đặt không cho tải file về hoặc "nofullscreen", và "noremoteplayback":

Các thành phần có trong thẻ

Thẻ source trong thẻ AUDIO

Thẻ source chứa đường dẫn tới file âm thanh với những định dạng khác nhau để chạy được trên nhiều trình duyệt:

<audio controls >
  <source src="thumuc/file-am-thanh.mp3" type="audio/mpeg">
  <source src="thumuc/file-am-thanh.ogg" type="audio/ogg">
</audio>

Chạy Thử

Thuộc tính controls trong thẻ AUDIO

Thuộc tính controls dùng để hiện các nút điều khiển như nút Play/Pause và thanh tua,..

<audio controls >
  <source src="thumuc/file-am-thanh.mp3" type="audio/mpeg">
  <source src="thumuc/file-am-thanh.ogg" type="audio/ogg">
</audio>

Chạy Thử

Thuộc tính autoplay trong thẻ AUDIO

Thuộc tính autoplay cho phép âm thanh phát sau khi tải trang:

<audio controls autoplay >
  <source src="thumuc/file-am-thanh.mp3" type="audio/mpeg">
  <source src="thumuc/file-am-thanh.ogg" type="audio/ogg">
</audio>

Chạy Thử

Thuộc tính muted trong thẻ AUDIO

Thuộc tính muted mặc định sẽ tắt âm thanh:

<audio controls autoplay muted >
  <source src="thumuc/file-am-thanh.mp3" type="audio/mpeg">
  <source src="thumuc/file-am-thanh.ogg" type="audio/ogg">
</audio>

Chạy Thử

Thuộc tính volume trong thẻ AUDIO

Thuộc tính volume dùng để quy định mức độ âm thanh to nhỏ, 0 là tắt tiếng và tăng dần đến mức 1 là lớn nhất:

<audio controls autoplay volume="0.5">
  <source src="thumuc/file-am-thanh.mp3" type="audio/mpeg">
  <source src="thumuc/file-am-thanh.ogg" type="audio/ogg">
</audio>

Chạy Thử

Thuộc tính loop trong thẻ AUDIO

Thuộc tính loop làm đoạn audio phát lại nhiều lần sau khi kết thúc:

<audio controls autoplay loop>
  <source src="thumuc/file-am-thanh.mp3" type="audio/mpeg">
  <source src="thumuc/file-am-thanh.ogg" type="audio/ogg">
</audio>

Chạy Thử

Thuộc tính controlslist trong thẻ AUDIO

Thuộc tính controlslist cho cài đặt không cho tải file về hoặc "nofullscreen", và "noremoteplayback":

<audio controls controlslist="nodownload">
  <source src="thumuc/file-am-thanh.mp3" type="audio/mpeg">
  <source src="thumuc/file-am-thanh.ogg" type="audio/ogg">
</audio>

Chạy Thử

Các loại định dạng của thẻ AUDIO

Lưu ý khi sử dụng thẻ AUDIO trong HTML

Khi sử dụng thẻ audio trong HTML, ngoài việc nắm rõ cú pháp và các thuộc tính hỗ trợ, lập trình viên cần chú ý đến hiệu suất tải trang, khả năng tương thích trình duyệt và trải nghiệm của người dùng. Việc triển khai đúng cách giúp âm thanh hoạt động ổn định mà không làm ảnh hưởng đến tốc độ website.

Tối ưu kích thước file âm thanh để tăng tốc độ tải trang

File âm thanh có dung lượng lớn có thể làm tăng thời gian tải trang, đặc biệt với người dùng sử dụng thiết bị di động hoặc kết nối mạng không ổn định. Vì vậy, nên lựa chọn mức chất lượng âm thanh phù hợp với mục đích sử dụng thay vì sử dụng file có dung lượng quá cao.

Các định dạng phổ biến như MP3 thường được ưu tiên nhờ khả năng nén tốt, giúp giảm kích thước file nhưng vẫn giữ chất lượng âm thanh ở mức chấp nhận được. Ngoài ra, có thể sử dụng công cụ nén audio trước khi đưa lên website để cải thiện tốc độ tải.

Chọn định dạng audio phù hợp với trình duyệt

Không phải mọi trình duyệt đều hỗ trợ giống nhau với từng định dạng âm thanh. Việc cung cấp nhiều nguồn audio thông qua thẻ source giúp trình duyệt lựa chọn file tương thích nhất với thiết bị của người dùng.

Khi xây dựng website, nên ưu tiên các định dạng được hỗ trợ rộng rãi như MP3, đồng thời có thể bổ sung thêm các định dạng khác nếu cần để tăng khả năng tương thích.

<audio controls>
    <source src="am-thanh.mp3" type="audio/mpeg">
    <source src="am-thanh.ogg" type="audio/ogg">
</audio>

Không nên lạm dụng thuộc tính autoplay trên website

Thuộc tính autoplay giúp âm thanh tự động phát khi trang được mở, nhưng nếu sử dụng không hợp lý có thể gây khó chịu cho người truy cập. Nhiều người dùng không mong muốn website tự phát âm thanh khi họ chưa thực hiện thao tác nào.

Đối với phần lớn website, nên để người dùng chủ động nhấn nút phát thay vì tự động phát âm thanh. Cách này giúp cải thiện trải nghiệm và tránh ảnh hưởng đến quá trình duyệt web.

Đảm bảo khả năng truy cập cho người dùng khi phát âm thanh

Một website tốt cần quan tâm đến khả năng sử dụng của nhiều nhóm người dùng khác nhau. Khi sử dụng thẻ audio, nên cung cấp các nút điều khiển cần thiết để người dùng có thể phát, tạm dừng hoặc điều chỉnh âm lượng dễ dàng.

Với các nội dung âm thanh quan trọng như bài học, hướng dẫn hoặc nội dung thông tin, nên kết hợp thêm phần mô tả hoặc văn bản thay thế để người dùng vẫn có thể tiếp cận nội dung khi không thể nghe trực tiếp.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ AUDIO trong HTML.