HTML5 05 – Cách chèn trình nghe nhạc vào website trong HTML5

0
218

Bài số 5 trong series học lập trình HTML5, chúng ta sẽ tìm hiểu cách chèn trình nghe nhạc vào website như thế nào nhé.

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:

Hiện nay, thẻ <audio> chỉ hỗ trợ 3 loại định dạng âm thanh là: mp3, ogg, wav

Định dạng Đuôi Media Type
mp3 .mp3 audio/mpef
ogg .ogg audio/ogg
wav .wav audio/wav

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

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 Mô tả
controls hiển thị trình nghe nhạc
autoplay tập tin âm thanh sẽ được tự động phát khi trang web load xong.
loop phát lặp đi lặp lại tập tin âm thanh mỗi khi nó kết thúc
muted tắt volumn của trình nghe nhạc

Kết luận

Như vậy, tôi đã hướng dẫn cho các bạn cách thức chèn trình nghe nhạc trong HTML5 với thẻ <audio>. Hẹn gặp lại các bạn trong bài kế tiếp.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây