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>

- 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>

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

- Thiết lập việc đoạn audio sẽ tự động được phát ngay sau khi trang tải xong.

.ttt-autoplay
controls

- Thiết lập việc hiển thị thanh công cụ điều khiển đoạn audio.

.ttt-controls
loop

- Chỉnh chế độ tự động phát lại sau mỗi lần đoạn audio kết thúc.

.ttt-loop
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.

.ttt-preload
muted

- Chỉnh chế độ mặc định tắt âm thanh của đoạn audio.

.ttt-muted

- Thuộc tính controls dùng để thiết lập việc hiển thị thanh công cụ điều khiển đoạn audio

<!DOCTYPE html> <html> <head> <title>Tiêu đề của trang web</title> <meta charset="utf-8"> </head> <body> <audio controls autoplay> <source src="../file/bell.mp3"> </audio> </body> </html>

Hiển thị thanh công cụ điều khiển đoạn audio

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

<!DOCTYPE html> <html> <head> <title>Tiêu đề của trang web</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>Tiêu đề của trang web</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 xuống 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 cho phép chúng ta 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 loại 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>Tiêu đề của trang web</title> <meta charset="utf-8"> </head> <body> <audio controls> <source src="../file/bell.mp3"> </audio> <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>Tiêu đề của trang web</title> <meta charset="utf-8"> </head> <body> <audio controls muted> <source src="../file/bell.mp3"> </audio> </body> </html>

Chỉnh chế độ mặc định tắt âm thanh của đoạn audio