Tạo máy nghe nhạc (Music Player) cho Blogspot tuyệt đẹp

Ấn +1 Để xem phim nhanh hơn
Với các blog hiện nay đang ngày càng phát triển và cần những thứ đổi mới, những widget chức năng hữu ích như Top người bình luận, Máy nghe nhạc (music player)... Và hôm nay, KhanhBlogger xin được chia sẻ cho các bạn một MÁY NGHE NHẠC do mình nghiên cứu từ lâu kết hợp với W3Shools (Các bạn nên vào đây để học). Mấy hôm nay mình đang nghiên cứu máy phát nhạc cực cool cho các bạn, trong đó dùng khá nhiều JS mẫu từ W3shools rất hữu ích cho mình. Bắt đầu thôi !

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

Bước 1: Chèn CSS này vào dưới thẻ <style> của blogspot:

div.wrappertt{ width:100%; height:530px; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.1), 0 2px 4px 0 rgba(0,0,0,0.12); font-family: Roboto; transform-origin:top center; } .showMP1{ animation: showMusicPlayer 1000ms 300ms ease-in-out forwards; } .lzz{ position:absolute; left:50%; text-align:center; margin-left:-60px; margin-top:200px; font-size:10px; color:rgba(0,0,0,1); animation:pw 900ms ease-in-out infinite; } @keyframes pw{ 0%,100%{ opacity:1; } 70%{ opacity:0.7; } } @keyframes showMusicPlayer{ 0%{ transform:translateY(-550px); } 80%{ transform:translateY(10px); } 100%{ transform:translateY(0px); } } .song-loader{ position:absolute; width:4px; height:70px; background:#a26c37; display:inline-block; left:50%; top:120px; margin-left:-2px; opacity:1; animation:dancingBars 1000ms ease-in infinite; } .song-loader-anim{ animation:dancingBars 1000ms ease-in infinite; } .song-loader:after,.song-loader:before{ position:absolute; content:''; width:4px; height:70px; background:#a26c37; display:inline-block; } .song-loader:after{ margin-left:10px; animation:dancingBars 900ms 500ms ease-in infinite; } .song-loader:before{ margin-left:-10px; background:#a26c37; animation:dancingBars 700ms 100ms ease-in infinite; } @keyframes dancingBars{ 0%,100%{ transform:scaleY(1); opacity:1; } 50%{ transform:scaleY(0.2); opacity:0.4; } 80%{ transform:scaleY(1.2); opacity:0.9; } } div.wrappertt:after{ position:absolute; content:''; width:95%; height:15px; background:rgba(0, 55, 49, 0.81); display:block; left:2.5%; bottom:-37px; border-radius:100%; -webkit-filter:blur(2px); -moz-filter:blur(2px); -ms-filter:blur(2px); filter:blur(2px); z-index:-1; } .music-cover{ height:42.5%; background:#4080ff; text-align:center; overflow:hidden; } .cover-img{ width:90%; margin-top:30px; border-radius:8px; border-top:2px solid rgba(255,255,255,0.4); opacity:0.9; } .album-controls{ position:relative; height:42.5%; background:#4080ff; border-top:2px solid rgba(255,255,255,0.2); text-align:center; overflow:hidden; } .album-img{ width:100%; margin-top:-195px; border-radius:8px; border-top:2px solid rgba(255,255,255,0.4); -webkit-filter:blur(16px); -moz-filter:blur(16px); -ms-filter:blur(16px); filter:blur(16px); } .album-info{ position:absolute; width:100%; background:transparent; top:0; } .album-info span{ width:100%; display:block; text-align:center; background:transparent; text-transform:uppercase; } span.album-title{ color:#fff; font-size:19px; font-weight:bold; margin-top:45px; } span.song-title{ font-size:18px; margin-top:21px; color:rgba(255,255,255,1); } .song-utility{ margin-top:25px; } .h5555{ color:rgba(255,255,255,0.7); background:transparent; padding:10px 10px; font-size:35px; margin:0 10px; } span .fa-retweet, span .fa-home{ color:rgba(255,255,255,1); } .music-controls{ position:relative; height:20%; background:rgba(255,255,255,1); border-radius:0px 0px 14px 14px; -50px #c0bf99; /*overflow:hidden;*/ } .music-controls > span{ display:block; height:100%; float:left; text-align:center; background:#fff; line-height:580%; transition:all 0.3s linear; } .music-controls .seek-bar, .music-controls:before{ position:absolute; width:100%; height:7px; content:''; display:block; clear:both; border-bottom:1px solid rgba(0,0,0,0.2); } .music-controls .seek-bar{ width:0%; height:3px; top:1.5px; background:#4080ff; } .music-controls .song-buffer{ position:absolute; display:inline-block; width:0%; height:3px; top:2px; left:0; background:#4080ff; opacity:0.4; } .music-controls:before{ background:rgba(255,255,255,1); } .knot{ position:absolute; z-index:99; top:-6px; right:-8px; width:8px; height:8px; background:#fff; border-radius:100%; border:4px solid #4080ff; display:inline-block; transition:all 300ms ease-in-out; opacity:1; } .music-controls span.song-current-time{ width:30%; font-size:18px; color:#4080ff; border-radius:0 0 0 14px; opacity:0; transition:opacity 200ms ease-in; } .music-controls span.song-duration{ opacity:0; transition:opacity 200ms ease-in; } .music-controls span.play{ width:70%; font-size:18px; text-align:left; border-radius:0 0 14px 0; } .music-controls span.play:hover{ } .fa-play, .fa-pause{ position:relative; color:#4080ff !important; top:6px; left:45px; transition:all 0.3s linear; cursor:default; pointer-events:none; opacity:0; transition:opacity 300ms ease-in; margin-left: -14px; } .fa-play:hover, .fa-pause:hover{ color:#4080ff !important; } .music-controls span.song-duration{ position:absolute; font-size:18px; background:transparent; color:#4080ff; right:40px; } #music-player{ opacity:0; position:absolute; top:-100px; } .is-animate { transition:width 300ms linear; } div.credit { position: absolute; padding: 0px 10px; padding-bottom: 8px; height: 15px; right: 5px; top: 5px; display: inline-block; background: rgba(255, 255, 255, 0.2); font-size: 7px; font-weight: bold; color: rgba(0, 0, 0, 0.7); border: 1px solid rgba(0, 0, 0, 0.1); cursor: default; } div.credit:hover{ border: 1px solid rgba(0, 0, 0, 0.2); } div.credit img { position: relative; width: 14px; margin-left: 3px; top: 4px; }

Bước 2: Chèn JS này vào trước </head> của Blogspot:

<script>
// code by TKN BLOG - jquery by W3schools
var _audio = $("#music-player")[0],
_audioDuration = 0,
_currentTime = 0,
_buffered = 0,
_buuferPlayTime = 5;
$(".music-controls .fa").on("click", function() {
var $this = $(this);
$(".music-controls .seek-bar").css("animation-play-state", "running");
if ($this.hasClass("fa-play")) {
$this.removeClass("fa-play").addClass("fa-pause");
_audio.play();
$(".music-controls .seek-bar").addClass("is-animate");
} else {
$(".music-controls .seek-bar").css("animation-play-state", "paused");
$this.removeClass("fa-pause").addClass("fa-play");
$(".music-controls .seek-bar");
_audio.pause();
}
});
var _setAudioDuration = setInterval(function() {
_audioDuration = _audio.duration;
if (_audioDuration > 0) {
$(".song-duration").html(formatAudio(_audioDuration)).css("opacity", 1);
$(".song-current-time").css("opacity", 1);
clearInterval(_setAudioDuration);
}
}, 500);
var _animateSeek = setInterval(function() {
if ($(".fa").hasClass("fa-pause")) {
var _percent = (_audio.currentTime * 100) / _audioDuration;
$(".is-animate").css("width", _percent + "%");
$(".song-current-time").html(currentTime(_audio.currentTime));
}
}, 500);
_audio.onended = function() {
setTimeout(function() {
_audio.currentTime = 0;
$(".song-current-time").html(currentTime(_audio.currentTime));
$(".is-animate").css("width", "0%");
$(".music-controls .fa").removeClass("fa-pause").addClass("fa-play");
}, 500);
};
var _checkBuffer = setInterval(function() {
if (_audioDuration > 0) {
_buffered = (_audio.buffered.end(_audio.buffered.length - 1) * 100) / _audio.duration;

$(".music-controls .song-buffer").css("width", _buffered + "%");
if (_buffered > _buuferPlayTime) {
$(".wrappertt").addClass("showMP");
$(".fa").css({
"opacity": "1",
"pointer-events": "auto"
});
}
if (_buffered == 100) {
clearInterval(_checkBuffer);
}
}
}, 500);

function currentTime(songActivity){
var _mprefix = "";
var _sprefix = "";
var _secs = songActivity;
var _min = Math.floor(_secs/60);

var _time = Math.floor(((_secs/60) - _min )*60);
if(_min < 10){
_mprefix = "0";
}
if(_time < 10){
_sprefix = "0";
}
return _mprefix + _min + ":" + _sprefix + _time;
}

function formatAudio(songActivity) {
var _mprefix = "",
_sprefix = "",
_secs = songActivity,
_min = Math.floor(_secs / 60),
_time = Math.floor(((_secs / 60) - _min) * 60);

if (_min < 10) {
_mprefix = "0";
}
if (_time < 10) {
_sprefix = "0";
}
return _mprefix + _min + ":" + _sprefix + _time;
}
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-109680738-1');

</script>

Bước 3: Vào bố cục > Thêm tiện ích > HTML/Javascript:

<div class="wrappertt">
<div class="music music-cover">
<img src="LINK ẢNH" alt="" class="cover-img" />
</div>
<div class="music album-controls">
<img src="LINK ẢNH" alt="" class="album-img" />
<div class="album-info">
<span class="album-title">Người lạ ơi</span>
<span class="song-title">Khanhblogger.com</span>
<span class="song-utility">
<i class="fa fa-home h5555" aria-hidden="true"></i>
<i class="fa fa-random h5555" aria-hidden="true"></i>
<i class="fa fa-retweet h5555" aria-hidden="true"></i>
<i class="fa fa-clock-o h5555" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="music music-controls">
<span class="seek-bar">
<span class="knot"></span>
</span>
<span class="song-buffer"></span>
<span class="song-current-time">00:00</span><span class="play">
<i class="fa fa-play h5555" aria-hidden="true"></i>
<span class="song-duration">00:00</span>
</span>
</div>
</div>
<audio controls id="music-player" preload="auto">
<source src="https://f9-stream.nixcdn.com/NhacCuaTui958/NguoiLaOiAvaxcRemix-KarikOrangeSuperbrothers-5353998.mp3?st=u6gO4Ua7gVbUy7O8_3fydQ&e=1516867597&t=1516781197585" type="audio/mpeg">
</source></audio>

Thay LINK ẢNH thành link ảnh bài hát, thay phần in đậm dưới cùng thành link nhạc (dạng .MP3) và các thông tin khác =)))

Đây là một máy nghe nhạc, một Music Player tuyệt đẹp cho blogspot. Hi vọng với Widget này, blog bạn sẽ ngầu và chuyên nghiệp hơn.
Chúc các bạn thành công ! Từ Khóa Seo :Xem phim online Tạo máy nghe nhạc (Music Player) cho Blogspot tuyệt đẹp tap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100,tap 1, tap 2, tap 3, tap 4, tap 5, tap 6, tap 7, tap 8, tap 9, tap10, tap 11, tap 12, tap 13, tap 14, tap 15, tap 16, tap 17, tap 18, tap 19, tap 20, tap 21, tap 22, tap 23, tap 24 , tap 25, tap 26, tap 27, tap 28, tap 29, tap 30, tap 31, tap 32, tap 33, tap 34, tap 35, tap 36, tap 37, tap 38, tap 39, tap 40, tap 41, tap 42, tap 43, tap 44, tap 45, tap 46, tap 47, tap 48 , tap 49, tap 50, tap 51, tap 52, tap 53, tap 54, tap 55, tap 56, tap 57, tap 58, tap 59, tap 60,Tap cuoi,phim cũ,phim truyền hình .