×

Cách sử dụng thẻ <audio> để phát âm thanh trên trang web trong HTML

Avatar of admin
admin 0 Views

Phát âm thanh trên trang web là một yêu cầu phổ biến trong thiết kế, đặc biệt khi bạn muốn cải thiện trải nghiệm người dùng hoặc thêm phần sinh động cho nội dung. Một trong những cách để đạt được mục tiêu này là sử dụng thẻ <audio> trong HTML. Dưới đây là hướng dẫn chi tiết về cách sử dụng thẻ này.

1. Giới thiệu về thẻ <audio>

Thẻ <audio> được sử dụng để nhúng âm thanh vào trang web. HTML5 cung cấp thẻ này nhằm thay thế cho các phương pháp cũ hơn như sử dụng Flash. Với thẻ này, người dùng có thể phát, tạm dừng, hay thay đổi âm lượng của tệp âm thanh một cách dễ dàng.

2. Cấu trúc cơ bản của thẻ <audio>

Cấu trúc cơ bản của thẻ <audio> rất đơn giản. Dưới đây là một ví dụ:

<audio controls>
  <source src="path/to/your-audio-file.mp3" type="audio/mpeg">
  Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>

Mô tả ý nghĩa của từng phần:

  • <audio controls>: Thẻ <audio> với thuộc tính controls giúp hiển thị các điều khiển phát nhạc (phát, tạm dừng, thay đổi âm lượng, ...). Nếu không thêm controls, người dùng sẽ không nhìn thấy các điều khiển này.
  • <source>: Thẻ <source> chỉ định tệp âm thanh và định dạng của nó. Thuộc tính src chỉ đường dẫn đến tệp âm thanh, còn type chỉ định định dạng của tệp đó (ví dụ: audio/mpeg cho tệp MP3).
  • Thông báo trong trường hợp không hỗ trợ: Nội dung bên trong thẻ <audio> sẽ hiển thị nếu trình duyệt không hỗ trợ thẻ này.

3. Các thuộc tính quan trọng của thẻ <audio>

  • controls: Hiển thị các điều khiển âm thanh.
  • autoplay: Tự động phát tệp âm thanh khi trang web tải.
<audio controls autoplay>
  <source src="path/to/your-audio-file.mp3" type="audio/mpeg">
  Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>
  • loop: Phát lại âm thanh sau khi kết thúc.
<audio controls loop>
  <source src="path/to/your-audio-file.mp3" type="audio/mpeg">
  Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>
  • muted: Tắt âm thanh của tệp âm thanh mặc định.
<audio controls muted>
  <source src="path/to/your-audio-file.mp3" type="audio/mpeg">
  Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>

4. Đa dạng hóa định dạng âm thanh

Để đảm bảo tệp âm thanh có thể phát trên tất cả các trình duyệt, bạn nên cung cấp tệp âm thanh ở nhiều định dạng khác nhau. Dưới đây là một ví dụ:

<audio controls>
  <source src="path/to/your-audio-file.mp3" type="audio/mpeg">
  <source src="path/to/your-audio-file.ogg" type="audio/ogg">
  Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>

Bằng cách cung cấp nhiều định dạng, bạn sẽ đảm bảo tính tương thích cao nhất với các trình duyệt hiện tại.

5. Tùy chỉnh style của thẻ <audio>

Bằng CSS, bạn có thể tùy chỉnh giao diện của thẻ <audio>, ví dụ điều chỉnh kích thước hoặc ẩn các điều khiển mặc định:

audio {
  width: 300px;
}

Hoặc ẩn điều khiển:

audio::-webkit-media-controls {
  display: none;
}

Tuy nhiên, lưu ý rằng việc ẩn điều khiển có thể làm giảm trải nghiệm người dùng.

6. Sử dụng JavaScript để điều khiển thẻ <audio>

Bạn có thể sử dụng JavaScript để điều khiển thẻ <audio>, ví dụ phát âm thanh khi người dùng nhấp vào một nút:

<audio id="myAudio">
  <source src="path/to/your-audio-file.mp3" type="audio/mpeg">
  Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>
<button onclick="playAudio()">Phát âm thanh</button>
<button onclick="pauseAudio()">Dừng âm thanh</button>

<script>
  var audio = document.getElementById("myAudio");

  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }
</script>

Kết luận

Thẻ <audio> cung cấp cách đơn giản và hiệu quả để nhúng âm thanh vào trang web. Bằng cách hiểu và sử dụng các thuộc tính của thẻ, bạn có thể tạo ra trang web chứa âm thanh phong phú và thân thiện với người dùng. Hãy thử áp dụng thẻ này vào dự án của bạn để tận dụng tối đa các tính năng mà HTML5 mang lại.

Comments

Bài viết liên quan