Do đặc thù content mấy blog khác của mình cho nên, mình thực sự rất cần đến trình phát nhạc, nhưng khi search trên google hay thậm trí, mò qua mấy trang nước ngoài thì vẫn không được như ý.
Thứ mình cần là một code phát nhạc đơn giản, nhưng muốn đơn giản thì chỉ tìm được loại như bên dưới này.
Demo trình phát nhạc HTML5 đơn giản, nhìn xem trông nó thực sự quá đơn điệu.
Code phát nhạc HTML5 đơn giản cho bạn... nếu cần.
<audio controls="controls" play="autoplay"> <source src="Link nhạc.mp3" type="audio/mpeg"></source> </audio>Thay chữ play thành autoplay nếu bạn muốn bài nhạc tự động phát. Link nhạc.mp3 thay thành link nhạc của bạn, nhớ là phải có đuôi .mp3, có thể lụm link khi lưu file .mp3 trên Google Drive mà không cần đuôi .mp3.
Dù đơn giản nhưng, code này lại không thể làm hài lòng mình, bởi nó quá tầm thường dù nhẹ và dễ sử dụng. Nhưng nếu muốn đẹp hơn thì phải cần đến JavaScript, mà JS thì nặng vc, làm trang load lâu hơn, lại còn khó cài đặt nếu bạn không rành code nữa chứ.
Mình thì chả thích phải dựa vào bên thứ 3 như, dùng mã nhúng từ mấy trang nhạc Zing MP3, SoundCloud... các kiểu, tại mấy cái logo của họ nhìn có hơi khó chịu, đã thế còn cái khâu giới hạn dung lượng phiền vãi, túm lại là dùng mã nhúng từ bên thứ 3 vẫn rất ok, nhanh, gọn, lẹ, nếu bạn không cảm thấy phiền vì những điều bên trên.
Vì lẽ đó, bên dưới đây là Code phát nhạc HTML5 cho Blogger/Blogspot cực nhẹ, đơn giản nhưng không đơn điệu, không gây nặng trang nhờ HTML5 và 1 đoạn cực ngắn CSS.
Code này mình lấy từ một trang wap ngày xưa, khoảng 2016 gì đó, giờ đã mất nguồn. Mới đầu trông nó có hơi sơ sài, sau nhiều lần nghiên cứu chỉnh sửa cuối cùng đã ra thành quả bên dưới này.
Demo code phát nhạc HTML5 cho Blogger/Blogspot cực nhẹ. ↓
 |
Singer: Hoàng Yến Chibi 🎤
Chitose2D: Triết lý Anime/Manga/Light Novel 🎼
|
So với JS và mã nhúng của bên thứ 3 thì đoạn HTML5 này trông khá đẹp phải không nào.
Ưu điểm của code phát nhạc HTML5 cho Blogger/Blogspot 👇
✧ Chẳng cần nhờ cái thằng JavaScript, nó sẽ khiến trang bạn nặng và load lâu hơn✧ Code được tạo thành từ HTML5 + CSS. Load mượt mà gần như là ngay lập tức✧ Dễ chỉnh sửa và cài đặt, chỉ việc dán code vào là xong✧ Giao diện đẹp mắt, không hề thua kém JS và mã nhúng của bên thứ 3✧ Độ tùy biến cao, thỏa mái sáng tạo nếu bạn biết code✧ 2 kiểu trình phát, có thể tận dụng làm list nhạc✧ Tự do chỉnh sửa màu nền bằng CSS✧ Cho phép bạn thỏa mái thay đổi font chữ, màu chữ bằng cách bôi đen văn bản, tận dụng các chức năng kết hợp trong bài viết của Blogger✧ Tùy chỉnh đường kẻ khung, bo góc thỏa mái theo ý thích.✧ Có hầu hết mọi chức năng cần thiết của trình phát nhạc như: Ảnh mô tả bên cạnh, có thể thiết lập tự động phát nhạc hoặc không. Mặc định code HTML5 có nút tải xuống, chỉnh tốc độ phát.
Vâng dài cmn dòng vãi lun nhỉ, và bên dưới đây là code + hướng dẫn tùy chỉnh.
Kiểu mặc định: Thích hợp dùng cho bài viết chỉ phát một bài hát. Demo xem lại bên trên ↑
Bước 1: Chủ đề > Tùy chỉnh > Chỉnh sửa HTML > Thêm đoạn CSS dưới đây vào trong blog bạn.
.post-body table td, .post-body table caption{border:1px dashed #555555;padding:5px 0px 0px 10px;vertical-align:top;font-family: Mali;color: #dddddd;}Zui lòng không chỉnh sửa gì thêm nếu không rành code, còn nếu muốn tùy chỉnh thì hãy làm theo hướng dẫn bên dưới.
Giải thích đoạn CSS có màu xanh (border:1px dashed #666666;)
border = đường viền bao quanh trong trình phát nhạc.1px = Độ lớn của đường viền 1px là nhỏ nhất, đổi số lớn hơn nếu bạn muốn, nếu đổi thành 0px đường viền sẽ biến mất.
dashed = đường gạch gạch Đổi thành ↓
solid = đường liền
dotted = đường chấm chấm
#55555 = Màu của đường viền, thay đỗi thành mã màu mà bạn thích.
Đoạn có màu hồng #dddddd; trong CSS là mãu màu của văn bản, trừ màu văn bản có đính kèm liên kết nhá.
Bước 2: Vào bài viết Blogspot > Chuyển sang Chế độ xem HTML > Copy code dưới này dán vào trong bài viết của bạn. Thích đặt đâu thì đặt, trên giữa dưới kệ mẹ bạn.
<div style="-webkit-border-radius: 4px; background-color: black; border-radius: 4px;">
<table style="width: 100%;"><tbody>
<tr><td align="center" width="20%"><span style="font-family: Mali;"><img alt="nghe nhạc" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexCQoZ4oTu7bgq7l1W28fBKlGu5hbSbPNxs4RpVr_teV3Ppyn9erytfMW13bM9p2_DU1SAniM4HE58108PNd0tjzrpdIMfM0Qz_AS2Tq-YKGLy8vhp--9GJyb2MCwwo4EMNBW3IMPfellc5BidTQkPjd9340E8j7fqa6dlYE_sFp6dOuaWjhrv-T7qA/s90/112.png" width="90px" /> </span></td><td align="left" valign="top" width="100%"><b><span style="font-family: Mali; font-size: large;"><span><marquee><span>[AMV] Kowarekake no Orgel (Đồi Hoa Mặt Trời - Hoàng Yến Chibi)</span></marquee><br />
</span>
</span></b><div>
<span><span style="font-family: Mali; font-size: medium;"><b>Singer: </b><a href="https://chitose2d.blogspot.com/"><font color="#dddddd">Hoàng Yến Chibi 🎤</font></a></span></span></div><div>
<span><span style="font-family: Mali; font-size: medium;"><b>Chitose2D: </b><a href="https://chitose2d.blogspot.com/"><font color="#dddddd">Triết lý Anime/Manga/Light Novel 🎼</font></a></span></span></div>
</td></tr></tbody></table>
<span><audio controls="true" loop="true" name="audio" play="true" style="width: 100%;"> <source src="https://archive.org/download/amv-kenh-anime-24h-kowarekake-no-orgel-doi-hoa-mat-troi-hoang-yen-chibi/%5BAMV%5D%20-%20KenhAnime24h%20-%20Kowarekake%20no%20Orgel%20%28%C4%90%E1%BB%93i%20Hoa%20M%E1%BA%B7t%20Tr%E1%BB%9Di%20-%20Ho%C3%A0ng%20Y%E1%BA%BFn%20Chibi%29.mp3" type="audio/mpeg"></source></audio>
</span></div>Xong rồi lưu lại và xem thành quả. Chỉ với 2 bước quá đơn giản phải hong nè. Giờ thì bắt đầu phần hướng dẫn trong code.
Màu đen trong code chữ: black là màu nền của toàn bộ trình phát nhạc, thay đổi theo ý thích của bạn thành mã màu dạng #, ví dụ: #0000FF.
Màu cam trong code: 4px là độ bo tròn cho cả bốn góc trình phát nhạc. Số càng lớn thì càng bo tròn.
Màu xanh lá trong code: Mali là font chữ cho trình phát nhạc, có thể đổi thành tên font bạn thích. Mẹo nhỏ, bạn có thể bôi đen tất cả văn bản trong trình phát nhạc, sau đó kết hợp với chức năng đổi font chữ trong bài viết của Blogger.
Màu xanh trong code: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexCQoZ4oTu7bgq7l1W28fBKlGu5hbSbPNxs4RpVr_teV3Ppyn9erytfMW13bM9p2_DU1SAniM4HE58108PNd0tjzrpdIMfM0Qz_AS2Tq-YKGLy8vhp--9GJyb2MCwwo4EMNBW3IMPfellc5BidTQkPjd9340E8j7fqa6dlYE_sFp6dOuaWjhrv-T7qA/s90/112.png đổi thành link ảnh nào đó của bạn.
Màu tím trong code: <marquee> - </marquee> là cài đặt Tiêu đề chữ tự chạy ngang, xóa nó sẽ không còn chạy ngang nữa.
Văn bản có màu đỏ trong code, hãy thay đổi thông tin tùy ý.
Liên kết có xanh lá cây đậm trong code, hãy thay đổi thông tin tùy ý.
Màu xanh nước biển trong code: play thành autoplay nếu bạn muốn trình phát nhạc tự động phát.
Đã giải thích xong những đoạn cần thiết để bạn dễ dàng thiết lập, tùy chỉnh theo ý của riêng mình. Chúc các bạn thành công.
Bên dưới đây là mẫu mình đã sáng tạo thành list nhạc. Vâng chỉ với HTML5 cực nhẹ, dùng làm Blog truyện Audio cũng khá ổn chứ nhỉ. 😤
Demo kiểu Playlist nhạc/Audio ↓
 |
Tác giả: Chưa cập nhật 📖
Nghe truuyện Full: Triết lý Anime/Manga/Light Novel 📻
|
Hashtag: Code phát nhạc HTML5 cho Blogger/Blogspot cực nhẹ, có thể dùng làm Blog truyện Audio
Không có nhận xét nào
Đăng nhận xét