18/08/2018, 10:37

Cách chèn trình nghe nhạc vào trang web

Thật đơn giản để chèn một trình nghe nhạc vào trang web. Cách chèn trình nghe nhạc vào trang web Để chèn một trình nghe nhạc vào trang web, ta sử dụng thẻ <audio> và thẻ <source> theo cú pháp sau: <audio controls> <source src="đường dẫn đến tập tin âm thanh" ...

Thật đơn giản để chèn một trình nghe nhạc vào trang web.

Cách chèn trình nghe nhạc vào trang web

Để chèn một trình nghe nhạc vào trang web, ta sử dụng thẻ <audio> và thẻ <source> theo cú pháp sau:

<audio controls>
    <source src="đường dẫn đến tập tin âm thanh" type="Media Type">
</audio>

Hiện nay, thẻ <audio> chỉ hỗ trợ ba loại định dạng âm thanh là :MP3, Ogg, Wav

Định dạng Đuôi Media Type
MP3 .mp3 audio/mpeg
Ogg .ogg audio/ogg
Wav .wav audio/wav
Ví dụ
<audio controls>
    <source src="../public/home/file/bell.mp3" type="audio/mpeg">
</audio>
Xem ví dụ

Để đề phòng trường hợp tập tin âm thanh không tồn tại, hoặc trình duyệt không hỗ trợ định dạng âm thanh của tập tin của bạn. Khi đó, ta có thể sử dụng nhiều thẻ <source> (nếu thẻ phía trên không hoạt động được thì sẽ đến phiên thẻ phía dưới)

Ví dụ
<audio controls>
    <source src="../public/home/file/bell.ogg" type="audio/ogg">
    <source src="../public/home/file/bell.mp3" type="audio/mpeg">
</audio>
Xem ví dụ
<audio> là một thẻ trong phiên bản HTML5. Do đó, phía trên cùng của tập tin phải thêm thẻ <!DOCTYPE html>

Các thuộc tính của thẻ <audio>

Thuộc tính dùng để cung cấp thêm thông tin, hành động cho trình nghe nhạc (Ví dụ như: tự động phát nhạc, phát lặp đi lặp lại, tắt tiếng,....).

Thuộc tính Ý nghĩa Xem ví dụ
controls hiển thị trình nghe nhạc
Xem ví dụ
autoplay tập tin âm thanh sẽ được tự động phát khi trang web load xong.
Xem ví dụ
loop phát lặp đi lặp lại tập tin âm thanh mỗi khi nó kết thúc
Xem ví dụ
muted tắt volumn của trình nghe nhạc
Xem ví dụ
0