Web Cơ Bản

Cách chèn một đoạn audio vào trang web

1) Cách chèn một đoạn audio vào trang web

- Để chèn một đoạn audio vào trang web thì chúng ta sử dụng cú pháp như sau:

<audio controls>
	<source src="đường dẫn đến tập tin audio">
</audio>
Ví dụ:
<audio controls>
	<source src="../file/bell.mp3">
</audio>
Xem ví dụ

- Lưu ý: Chúng ta nên sử dụng nhiều thẻ <source> để xác định nhiều tập tin audio dự phòng (đề phòng trường hợp đường dẫn đến tập tin audio này không tồn tại thì trình nghe nhạc sẽ chuyển sang sử dụng đường dẫn đến một tập tin audio khác)

Ví dụ:

- Mặc định thì trình nghe nhạc sẽ sử dụng tập tin jwiq.mp3, nếu tập tin jwiq.mp3 không tồn tại thì trình nghe nhạc sẽ sử dụng tập tin wi1o.mp3, nếu tập tin wi1o.mp3 không tồn tại thì trình nghe nhạc sẽ chuyển sang sử dụng tập tin bell.mp3, . . . .

<audio controls>
	<source src="../file/jwiq.mp3">
	<source src="../file/wi1o.mp3">
	<source src="../file/bell.mp3">
</audio>
Xem ví dụ

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

- Dưới đây là danh sách những thuộc tính thường được sử dụng bên trong thẻ <audio>

(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính)

autoplay - Đoạn audio sẽ tự động được phát ngay sau khi trang tải xong.
controls - Chỉ định việc hiển thị trình phát audio.
loop - Tự động phát lặp lại sau mỗi lần kết thúc.
preload - Tùy chỉnh việc đoạn audio có được tải xuống trong quá trình tải trang hay không.
muted - Tắt âm thanh.

- Thuộc tính controls dùng để chỉ định việc hiển thị trình phát audio

 
<!DOCTYPE html>
<html>
<head>
	<title>Web Cơ Bản</title>
	<meta charset="utf-8">
</head>
<body>
	<audio controls autoplay>
		<source src="../file/bell.mp3">
	</audio>
</body>
</html>
Hiển thị trình phát audio

- Thuộc tính autoplay dùng để chỉ định việc đoạn audio sẽ tự động được phát ngay sau khi trang tải xong.

 
<!DOCTYPE html>
<html>
<head>
	<title>Web Cơ Bản</title>
	<meta charset="utf-8">
</head>
<body>
	<audio controls autoplay>
		<source src="../file/bell.mp3">
	</audio>
</body>
</html>
Tự động phát đoạn audio ngay sau khi trang tải xong

- Thuộc tính loop dùng để chỉ định chế độ tự động phát lại sau mỗi lần đoạn audio kết thúc.

 
<!DOCTYPE html>
<html>
<head>
	<title>Web Cơ Bản</title>
	<meta charset="utf-8">
</head>
<body>
	<audio controls loop>
		<source src="../file/bell.mp3">
	</audio>
</body>
</html>
Tự động phát lại sau mỗi lần đoạn audio kết thúc

- VẤN ĐỀ: Khi chúng ta chèn một đoạn audio vào trang web thì mặc định đoạn audio đó sẽ tự động được tải trong quá trình tải trang, điều đó thật sự lãng phí (gây tốn băng thông, giảm tốc độ tải trang) nếu người dùng không có nhu cầu nghe đoạn audio.

- Từ đây, thuộc tính preload được sử dụng để tùy chỉnh việc đoạn audio có được tải xuống trong quá trình tải trang hay không.

- Cú pháp:

preload="value"

- Trong đó, value có thể được xác định đựa theo một trong hai giá trị:

auto - Đoạn audio sẽ được tải xuống trong quá trình tải trang (mặc định)
none - Đoạn audio chỉ được tải xuống khi người dùng bấm vào nút phát (play) đoạn audio. 
<!DOCTYPE html>
<html>
<head>
	<title>Web Cơ Bản</title>
	<meta charset="utf-8">
</head>
<body>
	<audio controls preload="auto">
		<source src="../file/bell.mp3">
	</audio>
</body>
</html>
Tự động tải audio trong quá trình tải trang

- Thuộc tính muted dùng để chỉnh chế độ mặc định tắt âm thanh của đoạn audio.

 
<!DOCTYPE html>
<html>
<head>
	<title>Web Cơ Bản</title>
	<meta charset="utf-8">
</head>
<body>
	<audio controls muted>
		<source src="../file/bell.mp3">
	</audio>
</body>
</html>
Mặc định tắt âm thanh đoạn audio