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