HTML - Phần tử Audio

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới tuyệt vời của các phần tử audio trong HTML. Với kinh nghiệm dạy这门 học trong nhiều năm, tôi có thể nói rằng việc thêm âm thanh vào các trang web của bạn thực sự có thể làm sống động chúng. Hãy bắt đầu nào!

Cú pháp

Phần tử HTML <audio> được sử dụng để chèn nội dung âm thanh vào tài liệu. Đây là một bổ sung tương đối mới trong HTML, được giới thiệu trong HTML5, và nó đã thay đổi cách chúng ta bao gồm âm thanh trên các trang web.

Dưới đây là cú pháp cơ bản:

<audio src="audio_file.mp3" controls>
Trình duyệt của bạn không hỗ trợ phần tử audio.
</audio>

Hãy phân tích này:

• <audio>: Đây là thẻ mở cho phần tử audio.
• src="audio_file.mp3": Thuộc tính này chỉ định nguồn của tệp âm thanh.
• controls: Thuộc tính này thêm các điều khiển âm thanh, như phát, dừng và điều chỉnh âm lượng.
• Văn bản nằm giữa thẻ mở và thẻ đóng sẽ được hiển thị nếu trình duyệt không hỗ trợ phần tử audio.

Làm thế nào để chèn audio vào HTML?

Bây giờ chúng ta đã biết cú pháp cơ bản, hãy xem cách thực sự chèn audio vào tài liệu HTML của bạn. Có một vài cách khác nhau để làm điều này, và tôi sẽ chỉ bạn từng cách.

Phương pháp 1: Sử dụng thuộc tính src

Đây là phương pháp đơn giản nhất:

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

Phương pháp 2: Sử dụng phần tử <source>

Phương pháp này cho phép bạn chỉ định nhiều nguồn âm thanh:

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

Trong ví dụ này, trình duyệt sẽ cố gắng phát tệp MP3 trước. Nếu không thể, nó sẽ chuyển sang tệp OGG. Nếu không thể phát cả hai, nó sẽ hiển thị thông báo văn bản.

Phương pháp 3: Sử dụng JavaScript

Để có kiểm soát nâng cao hơn, bạn có thể sử dụng JavaScript:

<audio id="myAudio">
<source src="path/to/audio.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ phần tử audio.
</audio>

<button onclick="playAudio()">Phát</button>

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

Phương pháp này cho bạn nhiều sự linh hoạt hơn trong việc kiểm soát khi và cách âm thanh phát.

Ví dụ về phần tử Audio trong HTML

Hãy xem một số ví dụ hơn để củng cố hiểu biết của chúng ta.

Ví dụ 1: Trình phát audio cơ bản

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ phần tử audio.
</audio>

Điều này tạo ra một trình phát audio cơ bản với các điều khiển. Nó cố gắng phát tệp OGG trước, sau đó là MP3 nếu OGG không được hỗ trợ.

Ví dụ 2: Tự động phát và lặp lại

<audio controls autoplay loop>
<source src="background_music.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ phần tử audio.
</audio>

Âm thanh này sẽ bắt đầu phát tự động khi trang tải và sẽ lặp lại liên tục. Hãy cẩn thận với tự động phát, vì nó có thể làm phiền người dùng!

Ví dụ 3: Thuộc tính preload

<audio controls preload="auto">
<source src="interview.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ phần tử audio.
</audio>

Thuộc tính preload告诉浏览器在页面加载时要做什么。 "auto" có nghĩa là trình duyệt nên tải toàn bộ tệp âm thanh.

Hỗ trợ của Trình duyệt cho các Định dạng Âm thanh Khác nhau

Bây giờ, đây là điều quan trọng cần hiểu: không phải tất cả các trình duyệt đều hỗ trợ tất cả các định dạng âm thanh. Hãy phân tích trong bảng:

Định dạng	Chrome	Firefox	Safari	Opera	Internet Explorer
MP3	Có	Có	Có	Có	Có (9+)
WAV	Có	Có	Có	Có	Không
OGG	Có	Có	Không	Có	Không

Như bạn có thể thấy, MP3 là định dạng được hỗ trợ rộng rãi nhất. Đó là lý do tại sao thường là một ý tưởng tốt để bao gồm một phiên bản MP3 của âm thanh của bạn.

Đây là một mẹo chuyên nghiệp từ những năm dạy học của tôi: luôn cung cấp ít nhất hai định dạng khác nhau của tệp âm thanh của bạn. Bằng cách này, bạn sẽ bao gồm phần lớn các hỗ trợ trình duyệt.

Cuối cùng, phần tử audio trong HTML là một công cụ mạnh mẽ để thêm âm thanh vào các trang web của bạn. Dù bạn đang tạo một trình phát nhạc, thêm nhạc nền hoặc bao gồm các clip âm thanh trong nội dung của mình, việc hiểu cách sử dụng phần tử <audio> là rất quan trọng.

Nhớ rằng, chìa khóa để thành thạo này (và bất kỳ khái niệm lập trình nào khác) là thực hành. Vậy hãy thử chèn một số âm thanh vào tài liệu HTML của bạn. Thử nghiệm với các thuộc tính và phương pháp chúng ta đã thảo luận. Và quan trọng nhất, hãy vui vẻ! Ai biết được, có thể bạn sẽ là người tiếp theo tạo ra một trang web audio phổ biến!

Credits: Image by storyset