Tạo tiện ích phát nhạc tự động vào Website hoặc Blog cực hay

Xin chào toàn thể quý vị và các bạn đã quay trở lại với chương trình.uhmm, à mà nhầm chào các bạn đến với Blog của mình một Blog mới có tên là Tôi Là Blogger, bây giờ mình sẽ tập trung phát triển Blog mong các bạn giúp đỡ nhé. Chắc gì các bạn đã biết mình là ai mà giúp =))
Ok, bài này mình sẽ chia sẻ cho các bạn tiện ích phát nhạc tự động vào Website hoặc Blog cực hay code này lấy đâu quên cmnr.
Tạo tiện ích phát nhạc tự động vào Website hoặc Blog cực hay

Các bước thực hiện

Bước 1: Chèn CSS vào giữa thẻ b:skin
.audio-play:after{background-image: url(https://cdn.jsdelivr.net/gh/ngylduy/blog/audio-play.svg);} .audio-pause{background-image: url(https://cdn.jsdelivr.net/gh/ngylduy/blog/audio-pause.svg);} .panel-audo { position: fixed; bottom: 15px; left: 3%; width: 90%; margin-left: auto; margin-right: auto; height: 30px; background-repeat: no-repeat; width: 94%; height: 66px;background-repeat: no-repeat; } .panel-audo>div{ height: 100%; padding: 0 15px } .panel-audo a{ display: block; border-radius: 50%; width: 40px; height: 40px; background-repeat: no-repeat; } .panel-audo a:hover{box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);} .audio-play { -webkit-animation: hava-shake 1s infinite ease-in-out; -moz-animation: hava-shake 1s infinite ease-in-out; -ms-animation: hava-shake 1s infinite ease-in-out; -o-animation: hava-shake 1s infinite ease-in-out; animation: hava-shake 1s infinite ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; } .audio-play:before{ content:""; background-color: rgba(117, 235, 80, 0.5); border-radius: 50%; display: block; left: 0; top: 0; margin-top: -20%; margin-left: -20%; height: 140%; width: 140%; display: block; animation: circle-fill-anim 2.3s infinite ease-in-out; } .audio-play:after{ display: block; content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .d-none{display:none!important} .d-flex{display:-ms-flexbox!important;display:flex!important} .justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important} .align-items-center{-ms-flex-align:center!important;align-items:center!important} @-moz-keyframes circle-fill-anim { 0% { -moz-transform: rotate(0) scale(.7) skew(1deg); opacity: .3 } 50% { -moz-transform: rotate(0) -moz-scale(1) skew(1deg); opacity: .3 } 100% { -moz-transform: rotate(0) scale(.7) skew(1deg); opacity: .3 } } @-webkit-keyframes circle-fill-anim { 0% { -webkit-transform: rotate(0) scale(.7) skew(1deg); opacity: .3 } 50% { -webkit-transform: rotate(0) scale(1) skew(1deg); opacity: .3 } 100% { -webkit-transform: rotate(0) scale(.7) skew(1deg); opacity: .3 } } @-o-keyframes circle-fill-anim { 0% { -o-transform: rotate(0) scale(.7) skew(1deg); opacity: .3 } 50% { -o-transform: rotate(0) scale(1) skew(1deg); opacity: .3 } 100% { -o-transform: rotate(0) scale(.7) skew(1deg); opacity: .3 } } @-moz-keyframes hava-shake { 0% { transform: rotate(0) scale(1) skew(1deg) } 10% { -moz-transform: rotate(-25deg) scale(1) skew(1deg) } 20% { -moz-transform: rotate(25deg) scale(1) skew(1deg) } 30% { -moz-transform: rotate(-25deg) scale(1) skew(1deg) } 40% { -moz-transform: rotate(25deg) scale(1) skew(1deg) } 50% { -moz-transform: rotate(0) scale(1) skew(1deg) } 100% { -moz-transform: rotate(0) scale(1) skew(1deg) } } @-webkit-keyframes hava-shake { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg) } 10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg) } 20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg) } 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg) } 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg) } 50% { -webkit-transform: rotate(0) scale(1) skew(1deg) } 100% { -webkit-transform: rotate(0) scale(1) skew(1deg) } } @-o-keyframes hava-shake { 0% { -o-transform: rotate(0) scale(1) skew(1deg) } 10% { -o-transform: rotate(-25deg) scale(1) skew(1deg) } 20% { -o-transform: rotate(25deg) scale(1) skew(1deg) } 30% { -o-transform: rotate(-25deg) scale(1) skew(1deg) } 40% { -o-transform: rotate(25deg) scale(1) skew(1deg) } 50% { -o-transform: rotate(0) scale(1) skew(1deg) } 100% { -o-transform: rotate(0) scale(1) skew(1deg) } }code-box
Bước 2: Chèn HTML vào sau thẻ <body>
<div class='panel-audo'> <div class='d-flex justify-content-between align-items-center'> <a class='audio-play' href='javascript:void(0)'/> </div> <ul class='playlist d-none'> <li data-audio='https://drive.google.com/uc?export=download&amp;id=1DCslFP9ktxDTWxn8-ZHYDN3nskJH1nSG'>Audio</li> <li data-audio='https://drive.google.com/uc?export=download&amp;id=1ZWdb7Z2Odn_ylwAv4P_a_4LCILTBVR13'>Audio</li> </ul> </div>code-box Trong phần HTML các bạn tự sửa link nhạc của các bạn nhé thểm thẻ mỗi thẻ li là một bài khi phát xong bài đầu sẽ phát bài tiếp theo.

Bước 3: Chèn script trước thẻ đóng </body>   <script>//<![CDATA[ $(document).ready(function() { var sounds = []; var activeTrack = 0; var musicTracker = 'noMusic'; $('.playlist li').each(function(index, el) { var load = new Audio($(this).data('audio')); load.load(); load.addEventListener('ended', function() { forward(); }); sounds.push(load); }); $('body').on('click','.audio-play',function(){ playPause(); }); $('body').on('click','.audio-pause',function(){ playPause(); }); var playPause = function() { if (musicTracker == 'noMusic') { sounds[activeTrack].play(); musicTracker = 'playMusic'; $(".audio-play").attr('class','audio-pause'); } else { sounds[activeTrack].pause(); musicTracker = 'noMusic'; $(".audio-pause").attr('class','audio-play'); } //showPlaying(); }; var forward = function() { function increment() { if (activeTrack < sounds.length - 1) activeTrack++; else activeTrack = 0; } if (musicTracker == 'playMusic') { sounds[activeTrack].pause(); sounds[activeTrack].currentTime = 0; increment(); sounds[activeTrack].play(); } else { increment(); } }; setTimeout(() =>{ sounds[activeTrack].play(); $(".audio-play").attr('class','audio-pause'); }, 3000); }); //]]></script> code-box Chúc các bạn thành công. Demo ngay tại bài viết nha!
  • Audio
  • Audio

1/Đăng Nhận Xét/Nhận Xét

Mới hơn Cũ hơn