HTML5 cung cấp một số cách để kết hợp âm thanh vào các trang web. Dưới đây là một số phương pháp phổ biến:

1. Phần tử <audio> : Phần tử <audio> là cách chính để nhúng nội dung âm thanh trong HTML5. Nó hỗ trợ nhiều định dạng tệp âm thanh khác nhau như MP3, Ogg và WAV. Đây là một ví dụ cơ bản:

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

   Thuộc tính controls thêm các điều khiển phát, tạm dừng và âm lượng cho trình phát âm thanh.

2. Nhiều nguồn để tương thích trên nhiều trình duyệt: Để đảm bảo khả năng tương thích trên các trình duyệt khác nhau, bạn có thể cung cấp nhiều <source> thành phần với các định dạng âm thanh khác nhau:

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

   Trình duyệt sẽ sử dụng nguồn đầu tiên mà nó hỗ trợ.

3. Âm thanh nhúng với <embed> : Bạn có thể sử dụng phần tử <embed> để nhúng tệp âm thanh:

    html
    <embed src="audiofile.mp3" autostart="false" loop="false" width="300" height="90">
   

   Tuy nhiên, thẻ <embed> không được sử dụng rộng rãi như thẻ số <audio> .

4. API JavaScript để điều khiển âm thanh: Bạn có thể sử dụng JavaScript để điều khiển việc phát lại âm thanh theo chương trình. Ví dụ:

    html
    <audio id="myAudio" src="audiofile.mp3"></audio>
   <button onclick="playAudio()">Play</button>
   <button onclick="pauseAudio()">Pause</button>
   <script>
     var audio = document.getElementById("myAudio");
   
     function playAudio() {
       audio.play();
     }
   
     function pauseAudio() {
       audio.pause();
     }
   </script>
   

   Điều này cho phép bạn tùy chỉnh các điều khiển và hành vi phát lại bằng cách sử dụng JavaScript.

5. API Web Audio: Để thao tác âm thanh nâng cao hơn, API Web Audio cung cấp một bộ công cụ mạnh mẽ để tạo, xử lý và thao tác âm thanh trong trình duyệt. Nó liên quan đến việc sử dụng JavaScript để tạo và thao tác các nút âm thanh. Điều này phức tạp hơn nhưng mang lại sự linh hoạt cao hơn.

    javascript
    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
   var audioElement = document.getElementById('myAudio');
   var audioSource = audioContext.createMediaElementSource(audioElement);
   // Additional audio processing nodes can be added here.
   audioSource.connect(audioContext.destination);
   

   Hãy nhớ kiểm tra khả năng tương thích của trình duyệt khi sử dụng API Web Audio.

Hãy nhớ xem xét khả năng truy cập khi sử dụng âm thanh trên trang web của bạn và cung cấp nội dung hoặc chú thích thay thế cho những người dùng có thể không nghe được âm thanh.