Chèn âm thanh: <audio>

3.1 Cơ bản về thẻ <audio>

Thẻ <audio> trong HTML5 được sử dụng để chèn file âm thanh vào trang web. Phần tử này hỗ trợ nhiều định dạng âm thanh và cung cấp cho người dùng các công cụ điều khiển tích hợp để phát, tạm dừng và điều chỉnh âm lượng.

Ví dụ đơn giản nhất

Thẻ <audio> được sử dụng với thuộc tính src, chỉ định đường dẫn đến file âm thanh. Cũng có thể thêm thuộc tính controls để hiển thị các công cụ điều khiển chuẩn như nút phát, tạm dừng và điều chỉnh âm lượng.

    
      <audio src="audiofile.mp3" controls></audio>
    
  

Ví dụ với nhiều nguồn

Để đảm bảo hỗ trợ nhiều trình duyệt, có thể chỉ định nhiều nguồn âm thanh bằng cách sử dụng thẻ <source>. Điều này cho phép trình duyệt chọn định dạng âm thanh được hỗ trợ.

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        Your browser does not support the audio element.
      </audio>
    
  

Thuộc tính của thẻ <audio>

• src: chỉ định đường dẫn đến file âm thanh.
• controls: hiển thị các công cụ điều khiển phát âm thanh
• autoplay: tự động phát âm thanh khi tải trang
• loop: lặp lại phát âm thanh khi kết thúc
• muted: tắt âm thanh khi tải
• preload: chỉ định cách trình duyệt nên tải âm thanh. Các giá trị có thể: none, metadata, auto

3.2 Ví dụ sử dụng thuộc tính

Thuộc tính controls

Thuộc tính controls thêm vào các công cụ điều khiển phát âm thanh tiêu chuẩn như nút "Play", "Pause" và điều chỉnh âm lượng. Thuộc tính này làm cho phần tử âm thanh trở nên tương tác và tiện lợi hơn đối với người dùng.

Ví dụ:

    
      <audio src="audiofile.mp3" controls></audio>
    
  

Thuộc tính autoplay

Thuộc tính autoplay khiến file âm thanh tự động bắt đầu phát ngay sau khi tải trang. Sử dụng thuộc tính này cần cẩn trọng vì phát tự động có thể gây khó chịu cho người dùng.

Ví dụ:

    
      <audio src="audiofile.mp3" autoplay></audio>
    
  

Thuộc tính loop

Thuộc tính loop chỉ định file âm thanh sẽ được phát lại trong vòng lặp vô tận. Điều này hữu ích cho nhạc nền hoặc hiệu ứng âm thanh cần lặp lại.

Ví dụ:

    
      <audio src="audiofile.mp3" autoplay loop></audio>
    
  

Thuộc tính muted

Thuộc tính muted tắt âm thanh file khi tải. Điều này có thể hữu ích nếu bạn muốn âm thanh được phát không có âm theo mặc định, và người dùng có thể bật âm khi cần.

    
      <audio src="audiofile.mp3" muted></audio>
    
  

Thuộc tính preload

Thuộc tính preload chỉ định trình duyệt cách tải file âm thanh khi tải trang. Nó có thể nhận một trong ba giá trị:

• none: trình duyệt không nên tải trước âm thanh
• metadata: trình duyệt chỉ nên tải metadata (thời lượng, kích thước v.v.)
• auto: trình duyệt nên tải toàn bộ âm thanh khi trang tải

    
      <audio src="audiofile.mp3" preload="auto"></audio>
    
  

3.3 Các định dạng âm thanh được hỗ trợ

Để đảm bảo tương thích đa trình duyệt, nên sử dụng nhiều định dạng âm thanh. Các định dạng phổ biến nhất gồm có MP3, OGG và WAV. Hãy xem xét chúng chi tiết hơn.

Định dạng MP3

MP3 (MPEG-1 Audio Layer III) — một trong những định dạng âm thanh phổ biến nhất. Nó được hỗ trợ bởi hầu hết các trình duyệt và thiết bị. MP3 sử dụng nén có mất mát, cho phép giảm kích thước file đồng thời giữ được chất lượng âm thanh khá cao.

Ví dụ:

    
      <audio src="audiofile.mp3" type="audio/mpeg"></audio>
    
  

Định dạng OGG

OGG (Ogg Vorbis) — định dạng nén âm thanh có mất mát mở, được hỗ trợ bởi hầu hết các trình duyệt hiện đại. Định dạng này cung cấp chất lượng âm thanh tốt và thường được sử dụng như là một giải pháp thay thế cho MP3.

Ví dụ:

    
      <audio src="audiofile.ogg" type="audio/ogg"></audio>
    
  

Định dạng WAV

WAV (Waveform Audio File Format) — định dạng âm thanh không nén, cung cấp chất lượng âm thanh cao. Tuy nhiên, file WAV có kích thước lớn hơn so với MP3 và OGG, do đó ít được sử dụng phổ biến trên web.

Ví dụ:

    
      <audio src="audiofile.wav" type="audio/wav"></audio>
    
  

3.4 Tính tương thích của định dạng

Không phải tất cả các trình duyệt đều hỗ trợ cùng một định dạng âm thanh. Để đảm bảo tương thích đa trình duyệt, nên sử dụng nhiều định dạng âm thanh như MP3, OGG và WAV.

Ví dụ hỗ trợ nhiều định dạng:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
      </audio>
    
  

Tính khả dụng

Để đảm bảo tính khả dụng, nên cung cấp một văn bản thay thế cho các trường hợp trình duyệt không hỗ trợ phần tử <audio> hoặc file âm thanh. Điều này có thể thực hiện được bằng văn bản giữa thẻ mở và thẻ đóng <audio>.

Ví dụ để đảm bảo tính khả dụng:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
        You can download the audio file <a href="audiofile.mp3">here</a>.
      </audio>
    
  

Hiểu được khả năng của thẻ <audio> và API của nó giúp tạo ra các trang web tương tác và khả dụng hơn.