Chèn Audio Vào Trang Web Bằng HTML Đơn Giản & Hiệu Quả

Table of Contents

Chèn audio vào trang web giúp nâng cao trải nghiệm người dùng bằng cách thêm âm thanh, nhạc nền hoặc nội dung podcast. Trong HTML, bạn có thể dễ dàng nhúng file âm thanh bằng thẻ <audio>, cho phép phát nhạc trực tiếp trên trình duyệt mà không cần phần mềm bổ trợ. Thẻ này hỗ trợ nhiều định dạng như MP3, OGG, WAV và đi kèm các thuộc tính như tự động phát, lặp lại hoặc hiển thị điều khiển phát nhạc. Trong bài viết này, Y2Graphic sẽ chia sẻ cách chèn một đoạn audio vào trang web một cách đơn giản và hiệu quả.

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ụ

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

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

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

Related Posts