jQuery實現高仿QQ音樂
幾個實現的效果看視訊吧：
bandicam 2020-02-05 16-28-20-127
動圖很是不清楚
github地址奉上：https://github.com/tangmusenLiu/Large-warehouse
https://github.com/tangmusenLiu/Large-warehouse.git.
程式碼：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>music</title>
<link href="../jquery.mCustomScrollbar.css" rel="stylesheet">
<link href="../../../img/sup.ico" rel="icon">
<link href="../css/style.css" rel="stylesheet">
<script src="../../../jquery-3.4.1.min.js"></script>
<script src="../jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../js/player.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div class="container">
<div class="head">
<ul class="nav">
<li class="logo"></li>
<li class="set">設定</li>
<li class="up">登入</li>
</ul>
</div>
<div class="banner">
<div class="left">
<div class="func">
<span class="love"><i></i>收藏</span>
<span class="appendTo"><i></i>新增到</span>
<span class="download"><i></i>下載到</span>
<span class="remove"><i></i>刪除</span>
<span class="clear_list"><i></i>清空列表</span>
</div>
<ul class="list" data-mcs-theme="minimal-dark">
<li class="list_head">
<span class="list_select"></span>
<span class="list_index"></span>
<span class="list_music">歌曲</span>
<span class="list_name">歌手</span>
<span class="list_time">時長</span>
</li>
</ul>
</div>
<div class="right">
<span class="picture_right"><div class="picture"></div></span>
<a class="music_name_a" href="#"><span>歌曲名:</span><span>As long AS Love Me</span></a>
<a class="music_name_b" href="#"><span>歌手名:</span><span>Justin Bieber</span></a>
<a class="music_name_c" href="#"><span>專輯名:</span><span>NOW That's What I Call Music! 44）</span></a>
<div class="box">
<ul class="music_word">
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="play_music">
<span class="up_music"></span>
<span class="stop_music"></span>
<span class="down_music"></span>
</div>
<div class="music_news">
<span class="music_name">As long AS Love Me-</span>
<span class="music_music">Justin Bieber</span>
<span class="music_time_total">03:49</span>
<span class="music_time_current">00:00/</span>
</div>
<div class="scrollbar">
<div class="scrollbar_current"></div>
<div class="scroll_radius"></div>
</div>
<ul class="more_select">
<li class="model_select model_select_bg"></li>
<li class="model_love"></li>
<li class="model_download"></li>
<li class="model_talk"></li>
<li class="model_clear model_clear_bg"></li>
</ul>
<div class="volume">
<span class="volume_icon"></span>
<div class="volume_bg"></div>
<div class="volume_radius"></div>
</div>
</div>
<div class="mask"></div>
<div class="mask_mask"></div>
</div>
<audio></audio>
</body>
</html>
css
* {
margin: 0;
padding: 0;
user-select: none;/*文字不可選中*/
}
html, body {
width: 100%;
height: 100%;
font-family: "微軟雅黑 Light";
}
.container {
width: 1536px;
margin: 0 auto;
}
.head {
width: 100%;
height: 60px;
}
.head .nav{
list-style: none;
display: inline-block;
width: 100%;
}
.head .nav li{
color: rgba(255,255,255,0.5);
}
.logo{
display: inline-block;
width: 150px;
height: 60px;
background: url("../image/player_logo.png") no-repeat;
background-size: 100% 70%;
margin-left: 20px;
margin-top: 10px;
cursor: pointer;
}
.set{
display: inline-block;
width: 50px;
height: 20px;
float: right;
margin-top: 20px;
margin-right: 20px;
cursor: pointer;
}
.set:hover{
color: rgba(255,255,255,1) !important;
}
.up{
display: inline-block;
width: 50px;
height: 20px;
float: right;
margin-top: 20px;
cursor: pointer;
}
.up:hover{
color: rgba(255,255,255,1) !important;
}
.banner {
width: 100%;
height: 600px;
}
.banner .left {
width: 886px;
height: 600px;
float: left;
margin-left: 100px;
}
.func span{
margin-top: 10px;
cursor: pointer;
}
.love{
display: inline-block;
width: 100px;
height: 40px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 5px;
line-height: 40px;
text-align: right;
color: rgba(255,255,255,1);
opacity: 0.5;
margin-left: 50px;
position: relative;
padding-right: 40px;
}
.love i{
display: inline-block;
width: 20px;
height: 20px;
background: url("../image/icon_sprite.png") no-repeat -60px 0;
position: absolute;
top: 12px;
left: 40px;
}
.appendTo{
display: inline-block;
width: 110px;
height: 40px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 5px;
line-height: 40px;
text-align: right;
color: rgba(255,255,255,1);
opacity: 0.5;
position: relative;
padding-right: 30px;
}
.appendTo i{
display: inline-block;
width: 20px;
height: 20px;
background: url("../image/icon_sprite.png") no-repeat -20px 0;
position: absolute;
top: 12px;
left: 35px;
}
.download{
display: inline-block;
width: 110px;
height: 40px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 5px;
line-height: 40px;
text-align: right;
color: rgba(255,255,255,1);
opacity: 0.5;
position: relative;
padding-right: 30px;
}
.download i{
display: inline-block;
width: 20px;
height: 20px;
background: url("../image/icon_sprite.png") no-repeat -40px -219px;
position: absolute;
top: 12px;
left: 40px;
}
.remove{
display: inline-block;
width: 100px;
height: 40px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 5px;
line-height: 40px;
text-align: right;
color: rgba(255,255,255,1);
opacity: 0.5;
position: relative;
padding-right: 40px;
}
.remove i{
display: inline-block;
width: 20px;
height: 20px;
background: url("../image/icon_sprite.png") no-repeat -100px 0;
position: absolute;
top: 12px;
left: 45px;
}
.clear_list{
display: inline-block;
width: 120px;
height: 40px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 5px;
line-height: 40px;
text-align: right;
color: rgba(255,255,255,1);
opacity: 0.5;
position: relative;
padding-right: 20px;
}
.clear_list i{
display: inline-block;
width: 20px;
height: 20px;
background: url("../image/icon_sprite.png") no-repeat -40px -300px;
position: absolute;
top: 12px;
left: 30px;
}
.func_hover{
border: 1px solid rgba(255,255,255,1);
opacity: 1 ;
}
.func_i_hover{
filter:brightness(200%) !important;
}
.banner .left .list{
width: 730px;
height: 525px;
list-style: none;
margin-left: 50px;
overflow: auto;
text-align: center;
line-height: 50px;
margin-top: 20px;
}
.banner .left .list li{
position: relative;
height: 50px;
border-bottom: 1px solid rgba(255,255,255,0.2);
cursor: unset;
user-select: none;/*文字無法選擇*/
color: rgba(254, 254, 254, 0.5);
}
.list_head{
display: block;
width: 100%;
height: 50px;
}
.list_select{
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #b6b6b6;
border-radius: 4px;
position: absolute;
top: 18px;
left: 20px;
opacity: 0.5;
}
.list_select_check{
border: 1px solid #ffffff;
opacity: 1;
}
.list_select_icon{
background: url("../image/icon_sprite.png") -20px -200px !important;
opacity: 1!important;
}
.list_index{
display: inline-block;
position: absolute;
left: 60px;
}
.list_index_animate{
background: url("../image/wave.gif") no-repeat 0 center;
color: transparent;/*文字透明看不見*/
width: 10px;
}
.list_music{
display: inline-block;
width: 400px;
position: absolute;
left: 100px;
text-align: left;
}
.list_name{
display: inline-block;
position: absolute;
left: 500px;
}
.list_time{
display: inline-block;
position: absolute;
left: 650px;
}
.list_rem{
display: inline-block;
position: absolute;
left: 650px;
width: 40px;
height: 40px;
top: 10px;
background: url("../image/icon_list_menu.png") 0 -160px;
}
.music_list_f4{
list-style: none;
position: absolute;
height: 40px;
top: 10px;
left: 200px;
display: none;
}
.music_list_f4 li{
display: inline-block;
width: 40px !important;
height: 40px !important;
border-bottom: none !important;
}
.music_list_player{
background: url("../image/icon_list_menu.png") -80px 0;
}
.music_list_player_bg{
background: url("../image/icon_list_menu.png") -80px -200px!important;
}
.music_list_player_bg:hover{
background: url("../image/icon_list_menu.png") -120px -200px!important;
}
.music_list_player:hover{
background: url("../image/icon_list_menu.png") -120px 0;
}
.music_list_add{
background: url("../image/icon_list_menu.png") -80px -80px;
}
.music_list_add:hover{
background: url("../image/icon_list_menu.png") -120px -80px;
}
.music_list_download{
background: url("../image/icon_list_menu.png") -80px -120px;
}
.music_list_download:hover{
background: url("../image/icon_list_menu.png") -120px -120px;
}
.music_list_share{
background: url("../image/icon_list_menu.png") -80px -40px;
}
.music_list_share:hover{
background: url("../image/icon_list_menu.png") -120px -40px;
}
.list_rem:hover{
background: url("../image/icon_list_menu.png") -120px -160px;
}
.banner .right {
width: 550px;
height: 600px;
float: right;
position: relative;
}
.picture{
width: 250px;
height: 250px;
background: url("../file/source/AslongASLoveMe.jpg") no-repeat;
background-size: 100% 100%;
}
.picture_right{
display: inline-block;
position: absolute;
width: 280px;
height: 250px;
background: url("../image/album_cover_player.png") no-repeat;
background-size: 100% 100%;
top: 30px;
right: 145px;
}
.music_name_a{
text-decoration: none;
display: block;
text-align: center;
margin-top: 300px;
color: rgba(255,255,255,0.7);
user-select: none;
}
.music_name_b{
text-decoration: none;
display: block;
text-align: center;
margin-top: 10px;
color: rgba(255,255,255,0.7);
}
.music_name_c{
text-decoration: none;
display: block;
text-align: center;
margin-top: 10px;
color: rgba(255,255,255,0.7);
}
.box{
width: 300px;
height: 200px;
margin: 40px auto;
cursor: grabbing;
overflow: hidden;
}
.music_word{
list-style: none;
text-align: center;
color: rgba(255,255,255,0.7);
}
.music_word li{
font-weight: bold;
padding: 10px;
}
.footer {
width: 100%;
height: 100px;
position: relative;
}
.play_music{
width: 150px;
height: 100px;
display: inline-block;
position: absolute;
left: 100px;
}
.up_music{
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
top: 40px;
background: url("../image/player.png") no-repeat 0 -28px;
opacity: 0.6;
}
.up_music:hover{
opacity: 1 ;
}
.stop_music{
display: inline-block;
width: 30px;
height: 30px;
background: url("../image/player.png");
position: absolute;
top: 35px;
left: 60px;
opacity: 0.6;
}
.toggleStop{
background: url("../image/player.png") -30px 0!important;
}
.stop_music:hover{
opacity: 1 ;
}
.high{
color:rgba(255,255,255,1)!important;
}
.down_music{
display: inline-block;
width: 20px;
height: 20px;
background: url("../image/player.png") 0 -50px;
position: absolute;
top: 40px;
left: 120px;
opacity: 0.6;
}
.down_music:hover{
opacity: 1 ;
}
.music_news{
width: 600px;
height: 20px;
position: absolute;
top: 20px;
left: 320px;
color: rgba(255,255,255,0.5);
}
.music_name{
text-align: center;
}
.music_name:hover{
color: rgba(255,255,255,1);
}
.music_music:hover{
color: rgba(255,255,255,1);
}
.music_time_current{
display: inline-block;
width: 50px;
height: 20px;
float: right;
}
.music_time_current:hover{
color: rgba(255,255,255,1);
}
.music_time_total{
display: inline-block;
width: 50px;
height: 20px;
float: right;
}
.music_time_total:hover{
color: rgba(255,255,255,1);
}
.scrollbar{
display: inline-block;
width: 600px;
height: 3px;
background-color: #989b9c;
position: relative;
top: 55px;
left: 320px;
cursor: pointer;
}
.scrollbar_current{
opacity: 0.6;
width: 0px;
height: 3px;
background-color: #f3f8f9;
position: absolute;
display: inline-block;
}
.scroll_radius{
opacity: 0.7;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ffffff;
position: absolute;
top: -6px;
left: 0px;
cursor: pointer;
}
.scrollbar_hover{
opacity: 1!important;
}
.more_select{
list-style: none;
display: inline-block;
width: 350px;
height: 50px;
position: absolute;
top: 30px;
right: 240px;
}
.model_select{
width: 30px;
height: 25px;
position: absolute;
top: 20px;
left: 20px;
/*background: url("../image/player.png") 0 -205px;*/
opacity: 0.6;
}
.model_select_bg{
background: url("../image/player.png") 0 -205px;
}
.model_select_bg1{
background: url("../image/player.png") 0 -232px !important;
}
.model_select_bg2{
height: 21px;
background: url("../image/player.png") 0 -260px!important;
}
.model_select:hover{
opacity: 1;
}
.model_love{
opacity: 0.6;
width: 30px;
height: 25px;
position: absolute;
top: 20px;
left: 80px;
background: url("../image/player.png") 0 -95px;
}
.model_love_bg{
background: url("../image/player.png") -30px -95px;
}
.model_love:hover{
opacity: 1;
}
.model_download{
width: 30px;
height: 25px;
position: absolute;
top: 20px;
opacity: 0.6;
left: 140px;
background: url("../image/player.png") 0 -118px;
}
.model_download:hover{
opacity: 1;
}
.model_talk{
width: 30px;
height: 25px;
position: absolute;
top: 20px;
left: 200px;
background: url("../image/player.png") 0 -398px;
opacity: 0.6;
}
.model_talk:hover{
opacity: 1;
}
.model_clear{
width: 80px;
height: 30px;
position: absolute;
top: 20px;
left: 260px;
opacity: 0.6;
cursor: pointer;
}
.model_clear_bg{
background: url("../image/player.png") 0 -280px;
}
.model_clear_bg1{
background: url("../image/player.png") 0 -310px !important;
}
.model_clear:hover{
opacity: 1!important;
}
.volume{
display: inline-block;
position: absolute;
width: 180px;
height: 50px;
right: 50px;
top: 30px;
opacity: 0.6;
}
.volume:hover{
opacity: 1;
}
.volume_icon{
display: inline-block;
position: absolute;
/*background: url("../image/player.png") 0 -180px;*/
background: url("../image/player.png") 0 -145px;
top: 25px;
width: 40px;
height: 20px;
}
.volume_icon:hover{
opacity: 1;
}
.volume_bg{
width: 80px;
height: 2px;
background-color: #d7ddde;
position: absolute;
top: 32px;
left: 30px;
cursor:pointer !important;
}
.volume_radius{
display: inline-block;
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #FFFFFF;
top: 26px;
left: 100px;
cursor: pointer;
}
.mask_mask {
width: 1536px;
height: 800px;
z-index: -1;
position: absolute;
top: 0;
background-color: rgba(0,0,0,0.5);
}
.mask{
width: 1536px;
height: 600px;
background: url("../file/source/AslongASLoveMe.jpg") no-repeat 50% center;
background-size: 100% 100%;
z-index: -2;
position: absolute;
top: 0;
filter: blur(60px);
}
.opacity_one{
opacity: 1!important;
}
.volume_off{
background: url("../image/player.png") 0 -183px;
}
.changeGreen{
color: #5ab800;!important;
}
js
$(function () {
//自定義滾動條
$('.list').mCustomScrollbar();
let $audio = $('audio');
let player = new Player($audio);
let off = false;
//一，載入音樂列表
getPlayerList();
function getPlayerList() {
//歌曲列表載入
$.ajax({
url: '../file/source/musiclist.json',
datatype: "json",
success: function (data) {
player.musicList = data;
//遍歷獲取到的資料，建立每一首歌
$.each(data, function (index, music) {
let $list_music = `<li class="music_list_item">
<span class="list_select"></span>
<span class="list_index">${index + 1}</span>
<span class="list_music">${music.name}
<ul class="music_list_f4">
<li class="music_list_player"></li>
<li class="music_list_add"></li>
<li class="music_list_download"></li>
<li class="music_list_share"></li>
</ul>
</span>
<span class="list_name">${music.singer}</span>
<span class="list_time">${music.time}</span>
</li>`;
$('.list_head').parent().append($list_music);
$('.music_list_item').get(index).index = index;
$('.music_list_item').get(index).music = music;
$('.music_list_item').get(index).lrc = music.link_lrc;
})
}
});
}
//二，初始化事件監聽
initEvent();
function initEvent() {
//banner func span 滑鼠移入移出事件
$('.func span').hover(function () {
$(this).toggleClass('func_hover');
$(this).children().toggleClass('func_i_hover');//通過調高背景圖片的亮度；來實現高亮的效果，省去了換背景圖片的步驟
},);
//選擇框事件
$('body').delegate('.list_select', 'mousedown', function () {
// $('.list_select').each(function (index,element) {
// $('.list_select')[index+1].onclick = function () {
// $('.list_select')[index+1].style.background = 'url("../image/icon_sprite.png") -20px -200px'
// }
// });
});
$('body').delegate('.list_select', 'mouseenter', function () {
$('.list_select').each(function (index, element) {
$('.list_select')[index].onmouseenter = function () {
$('.list_select')[index].style.border = '1px solid #ffffff';
$('.list_select')[index].style.opacity = '1';
}
});
});
$('body').delegate('.list_select', 'mouseleave', function () {
$('.list_select').each(function (index, element) {
$('.list_select')[index].onmouseleave = function () {
$('.list_select')[index].style.border = '1px solid #b6b6b6';
$('.list_select')[index].style.opacity = '0.5';
}
});
});
//滑鼠觸碰歌曲事件(事件委託)
$('body').delegate('.music_list_item', 'mouseenter', function () {
$(this).css('color', "rgba(254, 254, 254, 1)")
.children('.list_time').css('color', 'transparent').parent().append($('<span class="list_rem"></span>'));
$(this).find('.music_list_f4').fadeIn(100).css('display', 'inline-block');
});
$('body').delegate('.music_list_item', 'mouseleave', function () {
$(this).css('color', "rgba(254, 254, 254, 0.5)")
.children('.list_rem').hide();
$('.list_time').css('color', 'rgba(255,255,255,0.6)');
$(this).find('.music_list_f4').css('display', 'none');
});
//進度條觸碰事件
$('.scrollbar_current').hover(function () {
$('.scrollbar_current').toggleClass('scrollbar_hover');
$('.scroll_radius').toggleClass('scrollbar_hover');
});
$('.scroll_radius').hover(function () {
$('.scroll_radius').toggleClass('scrollbar_hover');
$('.scrollbar_current').toggleClass('scrollbar_hover');
});
//迴圈按鈕點選切換
$('.model_select').on('click', function () {
let bg1 = $(this).is('.model_select_bg1');
let bg2 = $(this).is('.model_select_bg2');
let bg = $(this).is('.model_select_bg');
if (bg) {
$(this).addClass('model_select_bg1');
}
if (bg && bg1) {
$(this).addClass('model_select_bg2');
}
if (bg && bg1 && bg2) {
$(this).removeClass('model_select_bg1');
$(this).removeClass('model_select_bg2');
}
});
//喜歡按鈕點選變紅標
$('.model_love').on('click', function () {
$(this).toggleClass('model_love_bg');
});
//純淨按鈕點選切換
$('.model_clear').on('click', function () {
$(this).toggleClass('model_clear_bg1');
$(this).toggleClass('model_clear_bg');
});
//右下角聲音圖示點選聲音關閉/開啟，圖示切換
$('.volume_icon').on('click', function () {
$(this).toggleClass('volume_off');
if ($(this).is('.volume_off')) {
$audio.get(0).volume = 0;
} else {
$audio.get(0).volume = 1;
}
});
//右下角聲音按鈕可拖拽 + 聲音大小控制
$('.volume_radius').on('mousedown', function (e) {
let disX = e.offsetX;
$(document).on('mousemove', function (e) {
let $volume_offsetLeft = $('.volume').offset().left;
let $left = e.pageX - $volume_offsetLeft - disX;
if ($left < 30) {
$left = 30
}
if ($left > 100) {
$left = 100
}
$('.volume_radius')[0].style.left = $left + 'px';
$('.volume_bg')[0].style.width = $left - 30 + 'px';
//聲音大小跟著走
let proportion = parseInt($('.volume_radius').css('left')) - 30;
$audio.get(0).volume = (proportion / 70);
if (proportion / 70 <= 0) {
$('.volume_icon').toggleClass('volume_off');
} else if (proportion / 70 > 0) {
$('.volume_icon').removeClass('volume_off');
}
});
$(document).on('mouseup', function (e) {
$(document).off('mousemove');
});
});
//右下角聲音點選 + 點哪聲音大小設定
$('.volume_bg').on('mousedown', function (e) {
let $bg_width = e.pageX - $('.volume_bg').offset().left + 30 - parseInt($('.volume_radius').width()) / 2;
$('.volume_radius').css({left: $bg_width});
$('.volume_bg').css({width: $bg_width - 30});
//聲音大小控制
$audio.get(0).volume = $(this).width() / 80;
});
//刪除圖示點選效果
$('body').delegate('.list_rem', 'click', function () {
let idx = $(this).parents('.music_list_item').get(0).index;
//刪除的如果是正在播放的歌曲，讓它消失不見，並播放下一曲
if (idx === currentIndex) {
//主動觸發下一曲事件
$(".down_music").trigger('click');
}
//如果刪除的是在正在播放的歌曲的前面，確保下一曲功能正常
if (idx < currentIndex) {
currentIndex -= 1
}
//刪除
$(this).parents('.music_list_item').remove();//前臺刪除
player.musicList.splice(idx, 1);//後臺資料刪除，不光只刪除li元素
//序列號自動補位 ： 資料刪除後，遍歷剩餘的資料給它們重新設定序號，並且找到li中的序號元素，設定innerHTMl為index +1
$('.music_list_item').each(function (index, element) {
element.index = index;
$(element).find('.list_index').html(index + 1);
});
});
//音樂列表中的播放按鈕
var currentIndex = -1;
let arr_Time = [];
let arr_lyrics = [];
let index = -1;
$('body').delegate('.music_list_player', 'click', function () {
//播放音樂
playMusic($(this).parents('.music_list_item').get(0).index, $(this).parents('.music_list_item').get(0).music);
function playMusic(index, music) {
//判斷是否是同一首音樂
if (currentIndex === index) {
//是一首
//如果沒播放-播放
if ($audio.get(0).paused) {
$audio.get(0).play();
} else {
$audio.get(0).pause();
}
} else {
//不是同一首
//獲取當前點選歌曲的src設定給audio標籤的src並播放它
$audio.prop('src', music.link_url);
$audio.get(0).play();
currentIndex = index;
//要判斷下是否是同一首歌曲，不能點選一次就重置一次
arr_Time = [];
arr_lyrics = [];
index = -1;
}
}
if ($(this).is('.music_list_player_bg')) {
console.log("同一首！");
$(this).toggleClass('music_list_player_bg');
$(this).parents('li').removeClass('high');
$(this).parents('li').find('.list_index').removeClass('list_index_animate');
$('.stop_music').removeClass('toggleStop');
return true;
} else {
//點選的不是同一個按鈕，讓歌詞ul回到最初位置
$('.music_word').css({marginTop: '0'});
//要判斷下是否是同一首歌曲，不能點選一次就重置一次
//歌詞同步
$.ajax({
type: 'GET',
url: $(this).parents('.music_list_item').get(0).lrc,
dataType: 'text',
success: function (data) {
arr_Time = [];
arr_lyrics = [];
index = -1;
let a = data.split("\n");
let Reg = /\[(\d+:\d+.\d+)]/;
$.each(a, function (index, element) {
//處理歌詞：有的為空，把那些在開頭就排除掉，不進入下面的計算
let lyrics = element.split(']')[1];
if (lyrics.length === 1) return true;
arr_lyrics.push(lyrics);
let reg = Reg.exec(element);
// console.log(reg);
if (reg === null) return true;
let t = reg[1];
let i = t.split(":");
let m = parseInt(i[0] * 60);
let e = parseFloat(i[1]);
let time = Number(Number(m + e).toFixed(2));//保留兩位小數，保留後變成字串，用Number再轉下格式變回陣列型別，也可以用parseFloat
arr_Time.push(time);
});
//建立歌詞列表
let $lyrics = $('.music_word');
$lyrics.children().remove();
$.each(arr_lyrics, function (index, element) {
let perfect = `<li>${arr_lyrics[index]}</li>`;
$lyrics.append(perfect);
});
}
});
}
//背景切換+footer音樂時長+歌手+專輯切換
//獲取對應元素物件
let $NameRight = $('.music_name_a>span:eq(1)');
let $SingerRight = $('.music_name_b>span:last');
let $AlbumRight = $('.music_name_c>span:last');
let $NameLeft = $('.music_name');
let $SingerLeft = $('.music_music');
let $TotalTime = $('.music_time_total');
let $bgLeft = $('.picture');
let $bgContainer = $('.mask');
//給獲取的物件賦值
let music = $(this).parents('.music_list_item').get(0).music;
$NameRight.html(music.name);
$SingerRight.html(music.singer);
$AlbumRight.html(music.album);
$NameLeft.html(music.name + "-");
$SingerLeft.html(music.singer);
$TotalTime.html(music.time);
$bgLeft.css({background: 'url("' + music.cover + '") no-repeat'});
$bgContainer.css({
background: 'url("' + music.cover + '") no-repeat 50% center',
backgroundSize: '100% 100%'
});
//點選播放按鈕變暫停按鈕
$(this).toggleClass('music_list_player_bg');
//點選對應一行的文字高亮
$(this).parents('li').addClass('high');
//當前的序號變成聲音動畫
$(this).parents('li').find('.list_index').toggleClass('list_index_animate');
//當前點選的按鈕有背景即為播放狀態下 去除其他列表的播放按鈕背景，高亮，動畫
if ($(this).is('.music_list_player_bg')) {
$(this).parents('li').siblings().find('.music_list_player').removeClass('music_list_player_bg');
$(this).parents('li').siblings().removeClass('high');
$(this).parents('li').siblings().find('.list_index').removeClass('list_index_animate');
}
//音樂列表中有播放按鈕存在，先下方播放按鈕就新增背景實現同步
if ($('.music_list_player').is('.music_list_player_bg')) {
$('.stop_music').addClass('toggleStop');
}
//全部音樂列表中都沒有開始圖示後，去除當前高亮，下方播放按鈕去除新增的背景，實現同步
if (!$('.music_list_player').is('.music_list_player_bg')) {
$(this).parents('li').removeClass('high');
$('.stop_music').removeClass('toggleStop');
}
});
//音樂進度條拖拽
$('.scroll_radius').on('mousedown', function (e) {
let disX = e.offsetX;
$(document).on('mousemove', function (e) {
let $scrollbar_offsetLeft = $('.scrollbar').offset().left;
let left = e.pageX - $scrollbar_offsetLeft - disX;
if (left < 0) {
left = 0;
}
if (left > $('.scrollbar').width() - $('.scroll_radius').width()) {
left = $('.scrollbar').width() - $('.scroll_radius').width()
}
$('.scroll_radius').css({left: left});
$('.scrollbar_current').width(left);
$('.scroll_radius').css({opacity: 1});
$('.scrollbar_current').css({opacity: 1});
//在移動時防止timeupdate事件觸發使拖拽一閃一閃，將timeupdate事件取消，等滑鼠抬起時在恢復
off = true;//讓進度條跟音樂進度走方法失效確保拖拽使沒有其方法干擾
});
$(document).on('mouseup', function () {
$(document).off('mousemove');
$(document).off('mousedown');
$('.scroll_radius').css({opacity: 0.7});
$('.scrollbar_current').css({opacity: 0.6});
//正常拖拽，等滑鼠抬起時獲取當前進度條的比例進而設定播放音樂得到時間，保證在拖拽過程中音樂正常播放，如果新增在mousemove中會影響效果
let percentage = $('.scrollbar_current').width() / $('.scrollbar').width();//獲取當前進度條的比例
$audio.get(0).currentTime = $audio.get(0).duration * percentage;//根據進度條比例設定點選時播放音樂的時間
off = false;//在變回去，使進度條跟音樂進度自動走恢復
});
});
//音樂進度條點哪到哪 + 音樂進度跟著到哪
$('.scrollbar').on('mousedown', function (e) {
if (currentIndex === -1) {
alert("沒有選中音樂，無法設定進度！")
} else {
let left = e.pageX - $('.scrollbar').offset().left - parseInt($('.scroll_radius').css('width')) / 2;
$('.scroll_radius').css({left: left});
$('.scrollbar_current').css({width: left});
//音樂進度點哪到哪
let percentage = $('.scrollbar_current').width() / $('.scrollbar').width();//獲取當前進度條的比例
$audio.get(0).currentTime = $audio.get(0).duration * percentage;//根據進度條比例設定點選時播放音樂的時間
}
});
//全選框選中事件
$('.list_select:first').on('click', function () {
//點選全選 or 全取消
let determine = $('.list_select:first').is('.list_select_icon');
$('.list_select:first').addClass('list_select_icon');
$('.list_select:gt(0)').addClass('list_select_icon').attr('data', 'ready');
$('.list_select:first').on('click', function () {
$(this).removeClass('list_select_icon');
$('.list_select:gt(0)').removeClass('list_select_icon').attr('data', 'not');
});
if (!determine) {
$('.list_select:first').on('click', function () {
$(this).addClass('list_select_icon');
$('.list_select:gt(0)').addClass('list_select_icon').attr('data', 'ready');
});
}
});
//下方框有取消選中，全選框取消選中(未完成。。。)
$('.list_select:gt(0)').on('click', function () {
// let all = $('.list_select:gt(0)').length;
// if ($('.list_select:gt(0)').is('.list_select_icon')) {
// $(this).attr('data', 'ready')
// }
// if ($('.list_select:gt(0)').not('.list_select_icon')) {
// $(this).attr('data', 'not')
// }
// let a = [];
// $('.list_select:gt(0)').each(function (index, element) {
// let ready_length = $('.list_select:gt(0)')[index].getAttribute('data');
// a.push(ready_length);
// });
// let ok = JSON.stringify(a).match(/ready/g);
// if (ok == null){
// ok = [];
// }
// let ok_length = ok.length;
// if (ok_length !== all && ok_length !== 0){
// $('.list_select:first').removeClass('list_select_icon');
// }
// if (ok_length === all){
// $('.list_select:first').addClass('list_select_icon');
// }
// console.log(ok_length);
});
//下方播放按鈕點選
$('.stop_music').on('click', function () {
//判斷當前是否有toggleStop樣式
if ($(this).is('.toggleStop')) {
//如果有——移除
$(this).removeClass('toggleStop');
} else {//如果沒有——新增
$(this).addClass('toggleStop');
}
//判斷當前音樂列表中是否有正在播放的歌曲(兩種方法)
if ($audio.prop('src') !== "") {//如果有播放其他音樂
//if (currentIndex !== -1){
// 獲取它的index找到對應元素主動觸發它
$('.music_list_player').eq(currentIndex).trigger('click');
} else {//沒有音樂--播放第一首 trigger:主動觸發某事件
$('.music_list_player:eq(0)').trigger('click')
}
});
//上一曲，下一曲點選事件
$(".up_music").on('click', function () {
//限制currentIndex
if (currentIndex < 0) {
currentIndex = $('.music_list_player').length;
}
$('.music_list_player').eq(currentIndex - 1).trigger('click');
});
$('.down_music').on('click', function () {
if (currentIndex === $('.music_list_player').length - 1) {
currentIndex = -1
}
$('.music_list_player').eq(currentIndex + 1).trigger('click');
});
//歌曲播放時間 + 音樂播放時底部進度走動
$audio.on('timeupdate', function () {
let perfectTime = parseInt($(this).get(0).currentTime);
//失敗案例：適用於小於60的
// if (perfectTime < 10){
// perfectTime = "00:0"+ perfectTime + "/"
// }
// if (perfectTime >= 10){
// perfectTime = "00:" + perfectTime + "/"
// }
// if (perfectTime >60){
// perfectTime = "0"+parseInt(perfectTime/60)+":"+perfectTime-60*parseInt(perfectTime/60) + "/"
// }
if (perfectTime < 10 || perfectTime - (60 * parseInt(perfectTime / 60)) < 10) {
$('.music_time_current').html("0" + parseInt(perfectTime / 60) + ":" + "0" + perfectTime % 60 + "/");
} else {
$('.music_time_current').html("0" + parseInt(perfectTime / 60) + ":" + perfectTime % 60 + "/");
}
//進度條同步
let val = $(this).get(0).duration;//當前音樂總時長
let percentage = perfectTime / val * 100;//獲取當前時長佔全部時長的
//設定進度條的長度
scrollbar_off(percentage);
//歌詞同步
if (perfectTime >= arr_Time[0]) {
index++;
arr_Time.shift();
}
$('.music_word>li').eq(index).addClass('changeGreen');
$('.music_word>li').eq(index).siblings().removeClass('changeGreen');
if (index < 1) return true;
$('.music_word').css({marginTop: (-(index + 2) * 30)});
console.log(percentage)
});
//進度條跟音樂比例走 單獨提一個方法出來是為了拖拽時 進度條不跟著音樂走 防止產生拖拽閃爍問題
function scrollbar_off(percentage) {
if (off) return;
$('.scrollbar_current').css({width: percentage + "%", opacity: 1});
$('.scroll_radius').css({left: percentage + "%", opacity: 1});
}
//空格鍵觸發播放按鈕
$(document).on('keydown', function (e) {
if (e.keyCode === 32) {
$('.stop_music').trigger('click');
}
});
}
});
另一個js
//這個面對物件寫的像是開玩笑，待日後改進吧
(function (window) {
function Player($audio) {
return new Player.prototype.init($audio);
}
Player.prototype = {
constructor: Player,//把原型指向Player
musicList: [],
init:function ($audio) {
this.$audio = $audio;
this.audio = $audio.get(0);
},
// currentIndex:-1,
// playMusic : function (index,music) {
// //判斷是否是同一首音樂
// if (this.currentIndex === index){
// //是一首
// //如果沒播放-播放
// if (this.audio.paused){
// this.audio.play();
// }else{
// this.audio.pause();
// }
// }else {
// //不是同一首
// //獲取當前點選歌曲的src，播放它
// this.$audio.attr('src',music.link_url);
// this.audio.play();
// this.currentIndex = index
// }
// }
};
window.Player = Player;
})(window);
json
[
{
"name":"As long AS Love Me",
"singer": "Justin Bieber",
"album": "NOW That's What I Call Music! 44",
"time": "03:49",
"link_url":"../file/source/AslongASLoveMe.mp3",
"cover": "../file/source/AslongASLoveMe.jpg",
"link_lrc": "../file/source/AslongASLoveMe.txt"
},
{
"name":"Something Just Like This",
"singer": "Chainsmokers",
"album": "Something Just Like This",
"time": "04:07",
"link_url":"../file/source/SomethingJustLikeThis.mp3",
"cover":"../file/source/SomethingJustLikeThis.jpg",
"link_lrc":"../file/source/SomethingJustLikeThis.txt"
},
{
"name":"Your Song",
"singer": "Lady Gaga",
"album": "Your Song",
"time": "04:16",
"link_url":"../file/source/YourSong.mp3",
"cover":"../file/source/YourSong.jpg",
"link_lrc":"../file/source/YourSong.txt"
},
{
"name":"涼涼",
"singer": "楊宗緯/張碧晨",
"album": "涼涼",
"time": "05:00",
"link_url":"../file/source/涼涼.mp3",
"cover":"../file/source/涼涼.jpg",
"link_lrc":"../file/source/涼涼.txt"
},
{
"name":"小城大事",
"singer": "張學友",
"album": "學友光年世界巡迴演唱會",
"time": "03:54",
"link_url":"../file/source/小城大事.mp3",
"cover":"../file/source/小城大事.jpg",
"link_lrc":"../file/source/小城大事.txt"
},
{
"name":"廣東愛情故事",
"singer": "廣東雨神",
"album": "廣東愛情故事",
"time": "03:34",
"link_url":"../file/source/廣東愛情故事.mp3",
"cover":"../file/source/廣東愛情故事.jpg",
"link_lrc":"../file/source/廣東愛情故事.txt"
},
{
"name":"我是一個程式設計師",
"singer": "單小葉",
"album": "程式猿",
"time": "02:14",
"link_url":"../file/source/我是一個程式設計師.mp3",
"cover":"../file/source/我是一個程式設計師.jpg",
"link_lrc":"../file/source/我是一個程式設計師.txt"
},
{
"name":"演員",
"singer": "薛之謙",
"album": "紳士",
"time": "04:21",
"link_url":"../file/source/演員.mp3",
"cover":"../file/source/演員.jpg",
"link_lrc":"../file/source/演員.txt"},
{
"name":"百里守約",
"singer": "蕭敬騰",
"album": "《王者榮耀》百里守約英雄主打歌",
"time": "03:42",
"link_url":"../file/source/百里守約.mp3",
"cover":"../file/source/百里守約.jpg",
"link_lrc":"../file/source/百里守約.txt"
},
{
"name":"社會搖",
"singer": "蕭全",
"album": "社會搖",
"time": "04:09",
"link_url":"../file/source/社會搖.mp3",
"cover":"../file/source/社會搖.jpg",
"link_lrc":"../file/source/社會搖.txt"
},
{
"name":"說散就散",
"singer": "袁婭維",
"album": "說散就散",
"time": "04:02",
"link_url":"../file/source/說散就散.mp3",
"cover":"../file/source/說散就散.jpg",
"link_lrc":"../file/source/說散就散.txt"
},
{
"name":"輸了你贏了世界又如何",
"singer": "林俊杰",
"album": "夢想的聲音《第二季》",
"time": "04:43",
"link_url":"../file/source/輸了你贏了世界又如何.mp3",
"cover":"../file/source/輸了你贏了世界又如何.jpg",
"link_lrc":"../file/source/輸了你贏了世界又如何.txt"
}
]
相關文章
- 微信小程式-仿QQ音樂微信小程式
- 仿QQ錄音以及振幅動畫實現動畫
- RemoteViews一 仿qq音樂自定義通知欄實現快捷切換歌曲REMView
- LRC歌詞原理和實現高仿Android網易雲音樂Android
- Android自定義View–仿QQ音樂歌詞AndroidView
- React全家桶開發仿QQ音樂WebAppReactWebAPP
- QQ音樂API koa2實現 - 全介面實現API
- Android自定義View--仿QQ音樂歌詞AndroidView
- Electron+Vue實現仿網易雲音樂實戰Vue
- 卡拉OK歌詞原理和實現高仿Android網易雲音樂Android
- 使用jQuery仿製網易雲音樂移動端jQuery
- 高仿網易雲音樂 Vue前端專案Vue前端
- QQ音樂音質加密加密
- Android QQ音樂/酷狗音樂鎖屏控制實現原理，酷狗鎖屏Android
- 【專案實戰：跟小K來擼一個菜鳥音樂APP】—高仿網易雲音樂APP
- QQ音樂api介面梳理API
- iOS仿網易雲音樂iOS
- Thinkphp3.2高仿酷狗音樂官網|DJ舞曲程式|MP3音樂程式|PHP
- Python 爬蟲QQ音樂Python爬蟲
- QQ音樂：React v16 新特性實踐React
- 仿網易雲音樂webAppWebAPP
- 仿網易雲音樂播放介面
- Android高仿QQ小紅點Android
- javascript 實現高仿 growingIOJavaScript
- Taro小程式仿網易雲音樂
- Flutter仿網易雲音樂：播放介面Flutter
- 音樂App評測之QQ音樂篇:音樂圈多樣演算法差評APP演算法
- 音樂播放器WordPress外掛 WP-Player （支援網易雲音樂, 蝦米音樂, QQ音樂, 百度音播放器
- Python從網易雲音樂、QQ 音樂、酷狗音樂等搜尋和下載歌曲Python
- jquery實現仿郵箱收件人jQuery
- QQ音樂的動效歌詞是如何實踐的？
- vue 音樂App QQ音樂搜尋列表最新介面跨域設定VueAPP跨域
- QQ音樂搜尋功能基本思路
- 奇妙音樂屋！一個基於Vue3高仿網易雲PC端的音樂流媒體網站Vue網站
- 高仿QQ 傳送圖片高亮HaloProgressViewView
- 高仿QQ小程式，我趟過的坑
- QQ揭祕：如何實現窗體靠邊隱藏？【低調贈送：QQ高仿版GG 4.2 最新原始碼】原始碼
- Android開源音樂播放器之高仿雲音樂黑膠唱片Android播放器