Tạo Trình Phát Nhạc Cho Blog/Website Tuyệt Đẹp

GIỚI THIỆU

Để blog/website của bạn trở nên sinh động, đẹp mắt, thì nhạc là môt yếu tố vô cùng quan trọng và không thể thiếu. Tuy nhiên đôi khi cũng chính vì nó trang web của bạn load lâu hơn! Đa phần, khi chúng ta chèn nhạc vào blog/website đều cần đến bên thứ 3 để thực hiện (với những đoạn JS nặng nề làm ảnh hưởng nghiêm trọng đến tốc độ load). Điều này, sẽ chấm dứt ngay nếu bạn sử dụng trình phát nhạc tùy chỉnh bên dưới =))

Code này được mình rip bên 0286blog! Sử dụng hoàn toàn là CSS & HTML (nếu bạn biết chút về css thì có thể tùy biến theo ý bạn)

DEMO AND CODE

DEMO
Copy toàn bộ code phía dưới => Bố cục => Thêm tiện ích => HTML/JavaScript => Dán code => Lưu => Xong !
<!-- Trình Phát Nhạc -->
<style>
@import url(https://fonts.googleapis.com/css?family=Lobster|Roboto:400,400i,400b|Satisfy&subset=latin-ext,vietnamese);
@import url(//cdn.jsdelivr.net/gh/ngylduy/font-awesome@8612653/css/all.min.css);
@import url(//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
</style>
<style>
.trmh img{width:186px;height:auto;}
#snow{background-image:url(https://1.bp.blogspot.com/-ylh-AAvmU14/XKrBzZXZp3I/AAAAAAAAGfs/TZLDRJPluIQ5P-8KZz9uM8tCtAHDt2ybACLcBGAs/s1600/s1.png),url(https://4.bp.blogspot.com/-iyCWZI8nf_s/XKrBzEwDsMI/AAAAAAAAGfk/YJ50dLRsUGsNNzjpZSgO4wrTIH6YqDpbQCLcBGAs/s1600/s2.png),url(https://3.bp.blogspot.com/-mJEn3MCXvAk/XKrBzdHDiyI/AAAAAAAAGfo/YZKj1DR43X0Y5ptEFnBm29f77MjcUVKPgCLcBGAs/s1600/s3.png);height:100%;left:0;top:0;max-width:700px;margin:0 auto;z-index:1;-webkit-animation:snow 15s linear infinite;-moz-animation:snow 15s linear infinite;-ms-animation:snow 15s linear infinite;animation:snow 15s linear infinite}@keyframes snow{0%{background-position:0 0,0 0,0 0}50%{background-position:500px 500px,100px 200px,-100px 150px}100%{background-position:500px 1000px,200px 400px,-100px 300px}}@-moz-keyframes snow{0%{background-position:0 0,0 0,0 0}50%{background-position:500px 500px,100px 200px,-100px 150px}100%{background-position:400px 1000px,200px 400px,100px 300px}}@-webkit-keyframes snow{0%{background-position:0 0,0 0,0 0}50%{background-position:500px 500px,100px 200px,-100px 150px}100%{background-position:500px 1000px,200px 400px,-100px 300px}}@-ms-keyframes snow{0%{background-position:0 0,0 0,0 0}50%{background-position:500px 500px,100px 200px,-100px 150px}100%{background-position:500px 1000px,200px 400px,-100px 300px}}.trmh:hover{transition:all .4s;transform:translateY(-4px);background:#5f61ff;background:linear-gradient(132deg,rgba(95,97,255,1) 0,rgba(119,5,204,1) 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5f61ff",endColorstr="#7705cc",GradientType=1);color:#eee}.trmh{position:relative;background:linear-gradient(135deg,rgba(95,97,255,1) 10%,rgb(137,48,204) 100%);box-shadow:0 8px 60px -10px rgba(13,28,39,.6);border-radius:12px;text-align:center;color:white;font-size:18.5px;text-shadow:-.5px .5px 0 grey;line-height:1.65em;padding-left:20px;padding-right:20px;font-family:"Roboto",sans-serif;padding-top:35px;padding-bottom:35px;font-weight:400;max-width:700px;margin:0 auto;margin-bottom:50px}@media screen and (max-width:767px){.trmh{font-size:1.1em;line-height:1.55em;padding-left:10px;padding-right:10px;padding-top:30px;padding-bottom:30px}.bookmark_2{padding:15px 0!important}}@media screen and (max-width:480px){.trmh{font-size:1em;padding-left:10px;padding-right:10px;padding-top:25px;padding-bottom:25px}}
</style>
<div class="trmh">
<div id='snow'>
<img alt="Nếu như ngày đó" src="https://3.bp.blogspot.com/-lU_kKq4zVCA/XKq_-TDgu8I/AAAAAAAAGfY/qGlgmjr9h7swLDuFFvnt1PofXmuVJO-RQCLcBGAs/s1600/nld-neu.png" />
<br/>
Ngày ấy anh ngỏ lời
<span style="color: yellow;text-shadow: -1px 1px 0 grey">
 <span class="glitch2"><i class="fal fa-heartbeat"></i></span>
 <span class="glitch1"> thương và yêu</span>
</span>
đậm sâu với em, em có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.<br/>
<span style="color: #efefef">Nếu ngày ấy anh là chàng trai mà em ngày đêm ước ao, ..., thì giờ đây anh đã có câu chuyện thật đẹp...</span>
<br/>
<br/>
<i class='fas fa-volume' onclick='document.getElementById(&apos;audio2&apos;).play();' style='height: 35px;width: 35px;line-height: 22px;border: 1px yellow dashed;cursor: pointer;color:yellow;background:rgba(0,0,0,.1);padding:7px 7.7px;border-radius:100%' title='hát'>
<audio id='audio2' preload='none'>
 <source src='https://drive.google.com/uc?export=download&amp;id=1ZWdb7Z2Odn_ylwAv4P_a_4LCILTBVR13' type='audio/mpeg'></source>Trình duyệt không hỗ trợ phát âm thanh
</audio>
</i>
</div>
</div>
<!-- Kết Thúc Trình Phát Nhạc -->
Chú ý: Các bạn có thể thay link nhạc và sửa nội dung thỏa thích

LỜI KẾT

Trên đây là toàn bộ code & hướng dẫn tạo trình phát nhạc cho blog/website. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới (hoặc tại đây). Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!!

Copyright © Lê Anh Đức
Nếu thấy bài viết hay và có ích thì đừng quên để lại cho mình một Tim & Share nhá. Cảm ơn các bạn rất nhiều !!!
CÓ THỂ BẠN ĐANG TÌM KIẾM