HTML Audio là một phần tử trong HTML cho phép bạn nhúng và phát âm thanh trực tiếp trên trang web. Với thẻ <audio>, bạn có thể nhúng các tệp âm thanh như .mp3, .wav, .ogg và cung cấp các điều khiển cho người dùng. HTML Audio là một công cụ tuyệt vời để thêm âm thanh vào trang web của bạn mà không cần sử dụng công nghệ Flash cũ.

Bài viết này là một phần của chuỗi học HTML trên "codetuthub.com", với các bài học hữu ích khác như HTML Video, HTML Media Attributes, và HTML Multimedia.

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

Thẻ <audio> trong HTML được sử dụng để nhúng các tệp âm thanh vào trang web. Thẻ này có thể chứa một hoặc nhiều thẻ <source>, cho phép bạn cung cấp nhiều định dạng âm thanh khác nhau để tăng khả năng tương thích với các trình duyệt.

Cú pháp cơ bản

<audio controls>
    <source src="https://codetuthub.com/example/file_MP3_1MG.mp3" type="audio/mpeg">
    <source src="https://codetuthub.com/example/file_OOG_1MG.ogg" type="audio/ogg">
    Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>

Trong ví dụ này:

• Thuộc tính controls cho phép hiển thị các điều khiển phát nhạc như nút phát/tạm dừng, âm lượng, và thanh tiến trình.
• Thẻ <source> chỉ định tệp âm thanh và định dạng của nó.

2. Các thuộc tính cơ bản của thẻ <audio>

2.1 controls

Thuộc tính controls hiển thị giao diện điều khiển âm thanh trên trình duyệt, cho phép người dùng phát, tạm dừng và điều chỉnh âm lượng.

<audio src="https://codetuthub.com/example/file_MP3_1MG.mp3" controls></audio>

Khi có controls, người dùng sẽ thấy thanh điều khiển của trình phát âm thanh.

2.2 autoplay

Thuộc tính autoplay giúp âm thanh tự động phát khi trang web tải. Lưu ý rằng nhiều trình duyệt hiện đại không phát âm thanh tự động nếu không có sự tương tác của người dùng để tránh gây phiền hà.

<audio src="https://codetuthub.com/example/file_MP3_1MG.mp3" autoplay></audio>

2.3 loop

Thuộc tính loop giúp âm thanh phát lặp lại liên tục.

<audio src="https://codetuthub.com/example/file_MP3_1MG.mp3" loop controls></audio>

2.4 muted

muted giúp tắt tiếng âm thanh mặc định khi trang tải.

<audio src="https://codetuthub.com/example/file_MP3_1MG.mp3" muted controls></audio>

2.5 preload

Thuộc tính preload kiểm soát mức độ tải trước của âm thanh khi trang được tải. Giá trị của preload bao gồm:

• auto: Tải toàn bộ âm thanh khi trang tải.
• metadata: Chỉ tải thông tin cơ bản như thời gian phát.
• none: Không tải trước âm thanh.

<audio src="https://codetuthub.com/example/file_MP3_1MG.mp3" preload="auto" controls></audio>

3. Sử dụng nhiều định dạng âm thanh

HTML Audio hỗ trợ nhiều định dạng âm thanh, nhưng không phải trình duyệt nào cũng hỗ trợ tất cả định dạng. Do đó, bạn nên cung cấp nhiều nguồn khác nhau để đảm bảo tính tương thích.

<audio controls>
    <source src="https://codetuthub.com/example/file_MP3_1MG.mp3" type="audio/mpeg">
    <source src="https://codetuthub.com/example/file_OOG_1MG.ogg" type="audio/ogg">
    Trình duyệt của bạn không hỗ trợ âm thanh.
</audio>

Trong ví dụ này, nếu trình duyệt không hỗ trợ .mp3, nó sẽ chuyển sang .ogg để đảm bảo âm thanh vẫn được phát.

4. JavaScript với HTML Audio

Bạn có thể điều khiển âm thanh bằng JavaScript để tùy chỉnh thêm các tính năng. Một số phương thức và thuộc tính phổ biến bao gồm:

• play(): Phát âm thanh.
• pause(): Tạm dừng âm thanh.
• currentTime: Đặt hoặc lấy thời gian hiện tại của âm thanh (tính bằng giây).
• volume: Đặt hoặc lấy âm lượng của âm thanh (giá trị từ 0 đến 1).

Ví dụ điều khiển âm thanh bằng JavaScript

<audio id="myAudio" src="https://codetuthub.com/example/file_MP3_1MG.mp3" controls></audio>

<button onclick="playAudio()">Phát</button>
<button onclick="pauseAudio()">Tạm dừng</button>

<script>
    var audio = document.getElementById("myAudio");
    
    function playAudio() {
        audio.play();
    }
    
    function pauseAudio() {
        audio.pause();
    }
</script>

Trong ví dụ này:

• Nút "Phát" sẽ gọi hàm playAudio() để phát âm thanh.
• Nút "Tạm dừng" sẽ gọi hàm pauseAudio() để tạm dừng âm thanh.

5. Tạo trình phát âm thanh tùy chỉnh

Bạn có thể tạo trình phát âm thanh tùy chỉnh bằng cách kết hợp các thuộc tính của thẻ <audio> và JavaScript.

Ví dụ trình phát âm thanh tùy chỉnh

<audio id="customAudio" src="https://codetuthub.com/example/file_MP3_1MG.mp3"></audio>

<button onclick="playAudio()">Phát</button>
<button onclick="pauseAudio()">Tạm dừng</button>
<input type="range" id="volumeSlider" min="0" max="1" step="0.1" onchange="setVolume(this.value)" />

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

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

    function pauseAudio() {
        customAudio.pause();
    }

    function setVolume(volume) {
        customAudio.volume = volume;
    }
</script>

Ở đây:

• input type="range" là thanh trượt để điều chỉnh âm lượng. Khi người dùng thay đổi giá trị, hàm setVolume() sẽ được gọi để thay đổi âm lượng của âm thanh.

6. Các thuộc tính nâng cao của HTML Audio

HTML5 cung cấp thêm nhiều thuộc tính cho thẻ <audio>, giúp bạn tùy chỉnh và điều khiển âm thanh một cách chi tiết hơn. Một số thuộc tính nâng cao bao gồm:

• playbackRate: Điều chỉnh tốc độ phát âm thanh.
• duration: Lấy độ dài của âm thanh (tính bằng giây).
• ended: Trả về true nếu âm thanh đã phát hết.

Ví dụ sử dụng playbackRate

<audio id="fastAudio" src="https://codetuthub.com/example/file_MP3_1MG.mp3" controls></audio>
<button onclick="setPlaybackRate(2)">Phát nhanh</button>

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

    function setPlaybackRate(rate) {
        fastAudio.playbackRate = rate;
    }
</script>

Trong ví dụ này, khi nhấn nút "Phát nhanh", tốc độ phát âm thanh sẽ được tăng lên gấp đôi (playbackRate là 2).

7. Kết hợp HTML Audio và các thẻ khác trên website

Bạn có thể kết hợp thẻ <audio> với các thẻ HTML khác như <figure> và <figcaption> để tạo trình phát âm thanh kèm chú thích, tạo giao diện thân thiện và dễ hiểu hơn.

<figure>
    <audio src="https://codetuthub.com/example/file_MP3_1MG.mp3" controls></audio>
    <figcaption>Bài hát "A Day in Life" - John Doe</figcaption>
</figure>

8. Kết luận

HTML Audio là một công cụ hữu ích trong HTML5, giúp bạn dễ dàng thêm âm thanh vào trang web mà không cần đến các công cụ hỗ trợ ngoài. Bằng cách sử dụng thẻ <audio> và các thuộc tính, bạn có thể tùy chỉnh âm thanh cho phù hợp với nội dung của mình. Để học thêm về các phương tiện đa phương tiện trong HTML, hãy xem các bài học liên quan trên "codetuthub.com" như HTML Video, HTML Media Attributes, và HTML Multimedia.