Thẻ <audio> trong HTML

1) Thẻ <audio> trong HTML

- Thẻ <audio> được dùng để tạo một "trình phát nhạc" cho trang web.

- Ví dụ: Bên dưới là một trình phát nhạc.

- Để tạo một trình phát nhạc thì thẻ <audio> cần phải được sử dụng kết hợp với thẻ <source> để xác định tập tin âm thanh mà bạn muốn phát.

Ví dụ:

- Đoạn mã bên dưới dùng để tạo một trình phát nhạc giống như ví dụ phía trên

<audio controls>
    <source src="../file/bell.mp3">
</audio>

Xem ví dụ

2) Các thuộc tính được sử dụng trong thẻ <audio>

- Thẻ <audio> có sáu thuộc tính cơ bản.

- Dưới đây là bảng mô tả sơ lược về sáu thuộc tính đó:

src	Xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát
controls	Xác định việc "trình phát nhạc sẽ được hiển thị trên màn hình"
autoplay	Thiết lập hành động: "sau khi trang web được tải xong, trình phát nhạc sẽ tự động chơi bản nhạc"
loop	Thiết lập hành động "bản nhạc sẽ tự động được phát lặp lại sau mỗi lần kết thúc"
muted	Xác định việc trình phát nhạc sẽ mặc định được thiết lập ở chế độ "tắt tiếng"
preload	Xác định việc tập tin âm thanh có được tải cùng với lúc tải trang hay không

2.1) Thuộc tính src

- Thuộc tính src dùng để xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát.

- Lưu ý: "Đường dẫn đến tập tin âm thanh mà bạn muốn phát" có thể được xác định bằng đường dẫn tương đối hoặc đường dẫn tuyệt đối.

Ví dụ:

<audio src="../file/bell.mp3" controls></audio>

Xem ví dụ

- Tuy nhiên, hầu hết các lập trình viên không sử dụng thuộc tính src của thẻ <audio> để xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát. Họ sử dụng thẻ <source>, vì thẻ <source> có hỗ trợ thêm nhiều thuộc tính, giúp trình phát nhạc trở nên đa năng hơn.

Ví dụ:

<audio controls>
    <source src="../file/bell.mp3">
</audio>

Xem ví dụ

2.2) Thuộc tính autoplay

- Thuộc tính autoplay thiết lập hành động "sau khi trang web được tải xong, trình phát nhạc sẽ tự động chơi bản nhạc"

Ví dụ:

<audio controls autoplay>
    <source src="../file/bell.mp3">
</audio>

Xem ví dụ

2.3) Thuộc tính controls

- Thuộc tính controls xác định việc "trình phát nhạc sẽ được hiển thị trên màn hình"

Ví dụ:

<p>- Trình phát nhạc bên dưới ĐƯỢC hiển thị.</p>
<audio controls>
    <source src="../file/bell.mp3">
</audio>
<p>- Trình phát nhạc bên dưới KHÔNG ĐƯỢC hiển thị.</p>
<audio>
    <source src="../file/bell.mp3">
</audio>

Xem ví dụ

- Lưu ý: Thẻ <audio> không có thuộc tính controls thì trình phát nhạc không hiển thị. Tuy nhiên, nếu tồn tại thuộc tính autoplay thì bản nhạc vẫn được phát bình thường.

Ví dụ:

<audio autoplay>
    <source src="../file/bell.mp3">
</audio>

Xem ví dụ

2.4) Thuộc tính loop

- Thuộc tính loop thiết lập hành động "bản nhạc sẽ tự động được phát lặp lại sau mỗi lần kết thúc"

Ví dụ:

<audio controls loop>
    <source src="../file/bell.mp3">
</audio>

Xem ví dụ

2.5) Thuộc tính muted

- Thuộc tính muted xác định việc trình phát nhạc sẽ mặc định được thiết lập ở chế độ "tắt tiếng"

Ví dụ:

<audio controls muted>
    <source src="../file/bell.mp3">
</audio>

Xem ví dụ

2.6) Thuộc tính preload

Mặc định khi trang web được tải thì tập tin âm thanh của trình phát nhạc cũng được tải theo, điều đó đồng nghĩa với việc tốc độ tải trang bị chậm lại.

- Thuộc tính preload xác định việc tập tin âm thanh có được tải cùng với lúc tải trang hay không.

- Thuộc tính preload có hai giá trị:

auto	Tập tin âm thanh sẽ được tải cùng với lúc tải trang
none	Tập tin âm thanh sẽ KHÔNG được tải cùng với lúc tải trang (nó chỉ được tải khi người dùng bấm vào nút play)

Ví dụ:

<audio controls preload="none">
    <source src="../file/bell.mp3">
</audio>

Xem ví dụ

3) Những định dạng âm thanh được hỗ trợ

- Hiện nay có ba loại định dạng âm thanh phổ biến được hỗ trợ trên các trình duyệt: MP3, Wav, Ogg

Format	MIME-type
MP3	audio/mpeg
Wav	audio/wav
Ogg	audio/ogg

- Tuy nhiên, không phải tất cả các trình duyệt đều hỗ tợ hết ba loại định dạng âm thanh này.

Trình duyệt	MP3	Wav	Ogg
Chrome	CÓ	CÓ	CÓ
Firefox	CÓ	CÓ	CÓ
Opera	CÓ	CÓ	CÓ
Safari	CÓ	CÓ	KHÔNG
Internet Explorer	CÓ	KHÔNG	KHÔNG

- Để đề phòng trường hợp trình duyệt không hỗ trợ định dạng tập tin âm thanh của bạn, bạn có thể "sơ cua" thêm một vài tập tin âm thanh khác bằng những thẻ <source> khác (nếu định dạng tập tin âm thanh thứ nhất không được hỗ trợ thì nó sẽ chuyển sang sử dụng tập tin âm thanh thứ hai, ....)

Ví dụ:

<audio controls>
    <source src="../file/bell.ogg">
    <source src="../file/bell.mp3">
</audio>

Xem ví dụ