Giới thiệu chung

Tag <audio> là một trong những tag HTML5 mới nhất, được sử dụng để nhúng âm thanh vào trang web của bạn. Với tag này, bạn có thể chơi các tệp âm thanh trực tiếp trên trình duyệt mà không cần sử dụng các plugin bên ngoài.

Cú pháp

Để sử dụng tag <audio>, bạn cần chỉ định một số thuộc tính bắt buộc như src (đường dẫn đến tệp âm thanh) và controls (hiển thị thanh điều khiển âm thanh). Dưới đây là cú pháp cơ bản của tag <audio>:

<audio src="path/to/audio/file.mp3" controls></audio>

Ví dụ

Dưới đây là một ví dụ đơn giản về cách sử dụng tag <audio>:

<audio src="path/to/audio/file.mp3" controls>
  Trình duyệt của bạn không hỗ trợ phát âm thanh.
</audio>

Trong ví dụ trên, chúng ta đã chỉ định đường dẫn đến tệp âm thanh (src) và hiển thị thanh điều khiển âm thanh (controls). Nếu trình duyệt không hỗ trợ phát âm thanh, văn bản "Trình duyệt của bạn không hỗ trợ phát âm thanh" sẽ được hiển thị.

Thuộc tính khác

Ngoài các thuộc tính bắt buộc như src và controls, tag <audio> còn hỗ trợ một số thuộc tính khác để tùy chỉnh trải nghiệm người dùng. Dưới đây là một số thuộc tính phổ biến:

• autoplay: Tự động phát âm thanh khi trang web được tải.
• loop: Lặp lại phát âm thanh khi nó kết thúc.
• preload: Xác định cách trình duyệt nên tải tệp âm thanh. Có thể là auto, metadata hoặc none.
• volume: Xác định mức âm lượng mặc định của âm thanh. Giá trị nằm trong khoảng từ 0 đến 1.

Hỗ trợ trình duyệt

Tag <audio> được hỗ trợ rộng rãi trên các trình duyệt hiện đại như Chrome, Firefox, Safari và Edge. Tuy nhiên, để đảm bảo tương thích trên tất cả các trình duyệt, bạn nên kiểm tra trước các thuộc tính và định dạng tệp âm thanh được hỗ trợ.

Kết luận

Tag <audio> là một công cụ mạnh mẽ để nhúng âm thanh vào trang web của bạn một cách dễ dàng. Bằng cách sử dụng các thuộc tính và cú pháp đơn giản, bạn có thể tạo ra trải nghiệm người dùng tốt hơn và tăng tính tương tác trên trang web của mình.