Tạo máy nghe nhạc (Music Player) cho Blogspot tuyệt đẹp Rabu, 24 Januari 2018
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 !
top 1 cmt !!!!!!
BalasHapusTop 1 Cmt là clgt a?
Hapuscmt v để cho mấy ng khỏi cmt kiểu "cmt đầu" này nọ :v
HapusEm định Cmt là "Cmt 2" đấy mà đang chơi ì ven lên thôi :v
Hapusđịnh hả :v
HapusMới chỉ có ý đinhk thôi :v
Hapusnhiều kinh :v
BalasHapusnhìn muốn xỉu
Nhiều JS vler luôn ý ông ạ :))
Hapusmất 2đ speed để lm đẹp blog bằng cái này thì xứng lắm chứ:v
HapusHi sinh 2 điểm speed vì cái đẹp :v
Hapus:v
HapusThiếu 1 bước chỉ cách lấy nhạc có đuôi .mp3
BalasHapustùy sever nx a. zing mp3 khác, nhaccuatui khác :v mak chắc mn lấy đc :v ko thì mai update :v
HapusMà cái này mấy cáu nút ngoài cái nút Play ra thì méo bấm vào được cái nào Khanh ơi :)
BalasHapusnó ko important =)
HapusThế thêm important đi a
Hapusý a là mấy nút đó ko qtrong á. mn tự thêm link vào đi :v
HapusỪ em biết mà đã thêm thì anh thêm luôn đi :v Chứ để làm cảnh nó gây 1 chút không vui :))
Hapustui mệt lắm r :3 nhiu đó đủ xài r :3
HapusVậy thôi thì anh nghỉ đi cho hết mệt rồi thêm :))
HapusQua demo cứ bấm bấm để nó tua, ai ngờ đâu nó k bấm đc :v
BalasHapusEm.cũng bấm mà mãi không được hóa ra là nút đó làm đẹp thôi anh ạ :v
Hapus:v nó ko tác động đc cặc
HapusBus@^%#!$% không Khanh?
Hapuscút
Hapus:v haha vãi cả bus
HapusBus là gì biết không?
Hapus@Trọng Khanh Nguyễn sao đuổi em?
HapusBus là gì? à xe bus hihi
Hapus@Cường: Đúng rồii là xe bus đó anh :)))
Hapusvcl h mới nhớ blog mình có cái chức năng chặn thô tục =)
HapusDemo đi anh :v
HapusÀ cặc --> @^%#!$%
HapusThế này á
@^%#!$% => @^%#!$% là sao :v mèo lại hoàn mèo hả
HapusTại nó mã hoá mà cặc nó ra cặc anh ạ :))
Hapuslà sao ? a ko hiểu :v
HapusDuma cái chức năng chặn Thô tục của anh đó :)) Viết Cặ c --> cặc :v
Hapuslà sao ? e điên hả :/ chả lẽ cnt chữ Duy ra Duy điên ?
HapusÝ là k cho cmt thô tục á :v
HapusDUMA nó cái mã hóa c-ặ-c --> cặc
Hapusủa néu mã hóa c-a-c mak sao nó vẫn ra thế. khó hiểu quá
HapusKhó hiểu thậy chứ :v
HapusVch anh đùa à mã hoá từ cặc nó ra cặc :v
Hapuslại ko hiểu =•=
HapusEm thua cmn luôn rồi -_-
HapusTui cũng k hiểu @@! :v
HapusDumachungbay sao không hiểu ? A Khanh ta cái mã hoá đi em giải cmn thích cho :))
Hapuscặc
BalasHapusĐỉnh thật, onl pc test ngay thôi hoho
BalasHapus(y)
HapusHehe :v
HapusNgầu
BalasHapus:v
HapusWow thật hay :)
BalasHapus. Ở J2 Team là 5s cmnr đó anh Khanh
Hapushả là sao
HapusKhông có gì anh :v ý em là vào gr J2 Team "." 1 cái là ăn kích luôn ấy mà
Hapusa luôn . mak e :v bên đó lâu r a còn ko vào tương tác mak ko bị sao hahaha
HapusChắc boss Gr không để ý :v
Hapusổng bn a :v
HapusÔng đó là anh họ của em :))
Hapuscon ông cháu cha hả :/ khinh
HapusGhê ghê
HapusGhê là điều bthg :v
HapusÂhaha :v
Hapushay lắm e
BalasHapusthanks a ạ <3
HapusGiờ để tăng tính chuyên nghiệp chuyển qua demo bên codepen.io đi e :D
BalasHapuse ghét nó :3
HapusCodepen.io cũng hay mà Khanh :)) Đỡ phải tạo trang ở Blog
Hapush so vs việc phải login codepen r cop code cái nào css cái nào js thì đối vs blog demo a chỉ cần cop all code r xuất bản là đc. nhanh nx
HapusChắc tùy sở thích mỗi người thôi a :v
Hapusrep thân thiện vch :))
Hapus=)
Hapus(y) like ủng hộ
Hapusxàm :|
HapusXàm :v Anh rep thân thiện vch ra ý
Hapusns câu ai cũng biết
HapusAi cũng vừa mới biết :v
Hapusim đi. má nch hãm lồn vl
HapusMấy câu kia em học ở lớp đó :))
Hapuscha nào bảo e thế
HapusMấy đứa ở lớp e hay nói thế em học theo luôn :v
Hapuscái hay ko học toàn học mấy đứa côn đồ
HapusKia là câu của mấy đứa côn đồ á a?
Hapusừ
HapusVC ừ :v
HapusHay đấy em ơi đỉnh của đỉnh là đây
BalasHapusthanks a <3
HapusQuôc sao k thấy onl fb nữa v
HapusMấy ngày nay r =)
HapusQuốc sắp comeback rồi :v
HapusGood :))
BalasHapusGood :)) là Tốt :)) hả bác?
Hapus