Nếu không xem được hãy để lại bình luận phía dưới Phim để ADMIN sửa lỗi.Giờ Cao điểm sever có lúc bị quá tải các bạn chỉ cần đợi 1 lúc và load lại phim là xem bình thường. BQT LaZaTV !
Tạo máy nghe nhạc (Music Player) cho Blogspot tuyệt đẹp
Thể Loại:
Quốc Gia:
Năm Phát Hành:
Trạng Thái
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
Đâ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 !
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>Bước 3: Vào bố cục > Thêm tiện ích > HTML/Javascript:
// 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>
<div class="wrappertt">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 =)))
<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>
Đâ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 !
Phim Xem Nhiều
-
Blogspot (hay còn gọi là blogger) là một hệ thống weblog được phát triển bởi Pyral Labs và được Google mua lại vào năm 2003, chúng cho phép ...
-
Porn Hub đang là một trào lưu hiện nay với nhiều bạn trẻ. Đã có rất nhiều WEB, Blog hướng dẫn cũng như thực hiện cách làm logo Porn Hub. Thế...
-
Xin chào mọi người. Trong thời gian vừa qua thì mình khá bận bịu với công việc và đặc biệt là với group mới. Đây là group chuyên sâu, là nơi...
-
Heey, xin chào các bạn. Mấy bữa nay thi không rảnh viết thủ thuật nên sorry mọi người nhiều. Hôm nay sẽ là bài viết mình bán theme. Đây là t...
-
Đã lâu rồi Khanh không viết thủ thuật cho các bạn vì một vài lý do :v Hôm nay thay vì viết thủ thuật như mọi khi thì hôm nay mình xin được c...
-
Đã có rất nhiều bạn hỏi về cái này thì hôm nay rảnh rỗi share cho mọi người. Để xem demo các bạn có thể rê chuột vào tên của người bình luận...
-
Với nhiều nút Demo, download được chia sẻ ở nhiều trang web thì hầu hết đều để nền cũng như hiệu ứng Hover khá quen thuộc. Chính vì thế, để ...
-
Bài viết tản mản đầu tiên. Mà cũng không biết nó có phải tản mạn không nữa tại cái này liên quan đến Blogspot mà cái ý tưởng như cái thủ thu...
-
Xin chào mọi người. Hiện nay sau một khoảng thời gian thành lập thì Link Thủ Thuật đã được nhiều người biết đến và sử dụng. Ban đầu trang we...
-
Cũng không biết nó đã có từ bao giờ nhưng mới hôm nay chỉ vài phút trước mình đã viết một bài viết ... nhưng bất ngờ khi viết một ký tự cộng...
Liên Kết Đối Tác
LazaTv.Com
LazaTv.Com
LazaTv.Com
lazatv, laza tv, laza tivi, lazativi, lazatv phim, laza tv phim hay, xem phim lazatv, xem lazatv
Website có sử dụng nguồn từ Phim14, BanhTV, Bilutv, Phimbathu, PhimMoi, KPhim, Youtube, Daily... Cảm ơn SubTEAM đã Việt Hoá những Bộ Phim Hay Nhất đến với những khán giả yêu Phim.