几个实现的效果看视频吧：
bandicam 2020-02-05 16-28-20-127
动图很是不清楚
github地址奉上：https://github.com/tangmusenLiu/Large-warehouse
github地址.
代码：
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"
}
]
最后如果本文对你有用的话欢迎你关注我的公众号，会有各种技术栈的文章
