实现简易网易云音乐播放器
文章目录
- 实现简易网易云音乐播放器
- 前言
-
- 该功能实现了单机版，可以在浏览器上运行，满足了音乐播放器应有核心功能
- 一、需要材料
- 二、html部分
- 三、css部分
- 四、js代码
-
- 五、效果图
前言
该功能实现了单机版，可以在浏览器上运行，满足了音乐播放器应有核心功能
一、需要材料
- HBuilder编辑器
- jQuery库
- 图标素材，音乐素材
二、html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网易云音乐播放器</title>
<link rel='stylesheet'href='css/网易云播放器.css'type='text/css'/>
<script src='js/jquery3.5.1.min.js'></script>
<script src='js/data.js'></script>
<script src='js/网易云播放器.js'></script>
</head>
<body>
<div id='box'>
<header>
<ul>
<li><img src='img/icon_c3uo4zcbvw9/wangyiyun.png'></li>
<li><b>网易云音乐</b></li>
<li id='seek'><input placeholder='搜索音乐'>
<ul>
</ul>
</li>
<li><img src='img/icon_c3uo4zcbvw9/denglu.png'></li>
<li id='logIn'><b>登陆</b>
<ul id='logIn_ul'>
<li>个人中心</li>
<li>退出登陆</li>
</ul>
</li>
<li><b>皮肤</b></li>
<li><img src='img/icon_c3uo4zcbvw9/pifu.png'></li>
<li><input type='color' id='color'></li>
</ul>
</header>
<article id='box_body'>
<div id='box_body_1'>
<h1>他不懂</h1>
<ul class='body_ul_1'>
<li>专辑：<span></span></li>
<li>歌手：<span></span></li>
<li>专辑：<span></span></li>
</ul>
<ul class='body_ul_2'>
</ul>
</div>
<div id='box_body_2'>
<img src='img/icon_c3uo4zcbvw9/zhuomian.png' id='picture'>
<ul>
<li><img src='img/灰心.jpg'>喜欢</li>
<li><img src='img/收藏.jpg'>收藏</li>
<li><img src='img/下载.jpg'>下载</li>
<li><img src='img/分享.jpg'>分享</li>
</ul>
</div>
<div id='box_body_3'>
<hr>
<ul class="b3_ul">
<li>听友评论<span id='span_1'>(已有<span id='span_2'>0</span>条评论)</span>
</li>
<li>
<input>
</li>
<li>
<b>精彩评论</b>
</li>
</ul>
<ul id='comment'>
<li class='addLi'>
<img src='"http://p1.music.126.net/mW53BkMgGy37I7yVrUg-aQ==/109951163117902077.jpg"'>
<ul>
<li><span>小柠檬：</span>听的也想哭老了你们还好吗</li>
<li>2018-08-01 14:36:2</li>
<li>回复</li>
<li>|</li>
<li>分享</li>
<li>|</li>
<li>点赞</li>
</ul>
</li>
</ul>
</div>
</article>
<footer>
<audio src='music/jn.mp3'></audio>
<ul id='foot_ul'>
<li><img src='img/icon_c3uo4zcbvw9/shangyiqu.png' class='togg' title='上一曲'></li>
<li><img src='img/icon_c3uo4zcbvw9/bofang_1.png' id='playBack' title='播放'></li>
<li><img src='img/icon_c3uo4zcbvw9/next.png' class='togg'title='下一曲'></li>
<li><span>0:00</span></li>
<li><input id='plan'type='range'min='0'max='0'value='0'style='width: 400px;'></li>
<li><span>0:00</span></li>
<li><img id='trumpet'src='img/icon_c3uo4zcbvw9/bofang.png' title='音量:50%'></li>
<li><input id='volume'type='range'min='0'max='1'step='0.01'></li>
<li><img src='img/icon_c3uo4zcbvw9/shunxubofang.png' id='random' title="顺序播放"></li>
<li id='menus'><img src='img/icon_c3uo4zcbvw9/caidan.png' title="列表菜单"></li>
<li><img src='img/icon_c3uo4zcbvw9/zhuomiangeci.png' id='img_zuomian'title='桌面歌词'></li>
</ul>
</footer>
<div id='list'>
<div>
<div class='list_1_1'>
<div>播放列表</div>
<div>历史纪录</div>
</div>
</div>
<p>总共<span></span>首 <span>清空</span></p>
<ul class='list_ul_1'>
</ul>
<ul class='list_1_2'》
</ul>
</div>
<div id='masklayer'></div>
<div class='adddiv'>
<img src='img/关闭.jpg'>
<ul class='add'>
<li><b>用户登录</b></li>
<li><input placeholder="用户名" ></li>
<li><input placeholder="密码" type='password'></li>
<li><span id='hint'></span><span><input type='checkbox'id='check'>记住密码</span></li>
<li>登陆</li>
</ul>
<ul id='hint_1'>
<li>edhsaiufhsjhf</li>
</ul>
</div>
<div id='remark'>
<img src='img/关闭.jpg'>
<p>歌曲：<span></span></p>
<textarea>
</textarea>
<b>评论</b>
</div>
</div>
<div id='desktop'>
好音乐用网易
<img src='img/关闭.jpg'>
</div>
<div id='show'>
</div>
</body>
</html>
三、css部分
*{
margin:0;
padding:0;
}
#box{
width:1200px;
height:750px;
margin:0 auto;
border:1px solid black;
position:relative;
z-index: 0;
}
#box header{
width:100%;
height:8.333%;
background-color:#6699cc;
line-height:62.5px;
position:relative;
}
#box article{
width:100%;
height:83.333%;
background-color:honeydew;
overflow-y:scroll;
z-index: 0;
position:relative;
}
#box footer{
width:100%;
height:8.333%;
background-color:#6699cc;
font-size:16px;
}
#box header li {
list-style:none;
float:left;
margin-right:10px;
font-size:20px;
height:30px;
line-height:30px;
text-align:center;
margin-top:16.25px;
}
#box header li img{
width:30px;
height:30px;
border-radius:3px;
}
#box header input{
height:25px;
border-radius:10px;
}
#box>header>ul>li:nth-child(1){
margin-left:16.25px;
}
#box>header>ul>li:nth-child(2){
color:white;
margin-left:5px;
}
#box>header>ul>li:nth-child(3){
margin-left:100px;
position: relative;
}
#box>header>ul>li:nth-child(3) ul{
position: absolute;
z-index: 90;
background-color: white;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
overflow:hidden;
display:none;
width:100%;
}
#box>header>ul>li:nth-child(3) ul li{
clear: left;
width: 100%;
text-align: left;
}
#box>header>ul>li:nth-child(3) ul li:hover{
width: 100%;
background-color:cadetblue;
}
#box>header>ul>li:nth-child(4){
margin-left:400px;
}
#box>header>ul>li:nth-child(5){
position:relative;
}
#logIn{
width:100px;
}
#box>header>ul>li:nth-child(5) ul{
position:absolute;
width:100px;
z-index: 1;
text-align: center;
display: none;
}
#box>header>ul>li:nth-child(5) ul li{
text-align: center;
width:100%;
}
#box>header>ul>li:nth-child(5) ul li:hover{
background-color: #DA70D6;
}
#box footer ul li{
list-style: none;
float:left;
text-align: center;
line-height:30px;
margin-left:30px;
margin-top:16px;
height:30px;
}
#box footer ul li:nth-child(4){
width:50px;
}
#box footer ul li img{
width:30px;
height:30px;
border-radius:3px;
}
#box footer ul input:nth-child(2){
width:100px;
}
#box_body_1{
margin-top: 50px;
width:45%;
height:450px;
float:right;
margin-left:12%;
font-size:20px;
margin-right:3%;
}
#box_body_2{
width:30%;
height:450px;
float:right;
margin-top: 50px;
position:relative;
font-size:20px;
text-align: center;
}
#box_body_2>img{
width:200px;
height:200px;
margin:0 auto;
border:60px solid black;
border-radius:50%;
}
#box_body_2 ul{
margin-top: 100px;
}
#box_body_2 ul li{
list-style: none;
float:left;
border:1px solid gainsboro;
}
#box_body_2 ul li:nth-child(2){
margin-left:24px;
margin-right:24px;
}
#box_body_2 ul li:nth-child(3){
margin-right:24px;
}
#box_body_2 ul li img{
width:20px;
height:20px;
}
.body_ul_1 li{
float:left;
width:33.333%;
list-style:none;
margin-top: 10px;
}
.body_ul_1 li span{
color:blue;
}
.body_ul_2{
margin-top:20px;
width:540px;
height:370px;
overflow-y:scroll;
font-size:20px;
}
.body_ul_2 li{
height:50px;
line-height: 50px;
list-style: none;
transition: all 1s linear;
}
.body_ul_2 li:hover{
background-color: #ADFF2F;
cursor:pointer;
}
#box_body_3{
top:100px;
position:relative;
width:80%;
margin:0 auto;
}
.b3_ul li{
margin-top: 20px;
list-style:none;
}
.b3_ul li:nth-child(1){
font-size:25px;
}
.b3_ul li #span_1{
font-size:14px;
}
.b3_ul li #span_2{
color:lightgray;
}
.b3_ul li input{
width:100%;
height:30px;
}
.b3_ul li:nth-child(3){
font-size:16px;
border-bottom: 1px dashed black;
}
.b3_ul_li{
}
#comment{
width:100%;
display:block;
position:absolute;
}
#comment .addLi{
list-style: none;
position:relative;
}
.addLi{
width:100%;
height:60px;
}
.addLi img{
width:50px;
height:50px;
border-radius:50%;
float:left;
}
.addLi ul{
font-size:14px;
display: inline;
list-style-type: none;
float:left;
margin-left:30px;
width:90%;
}
.addLi li:nth-child(1) span{
color:blue;
}
.addLi ul li{
list-style:none;
margin-top:5px;
}
.addLi ul li:nth-child(2){
float:left;
color:seagreen;
}
.addLi ul li:nth-of-type(n+3){
float:right;
color:seagreen;
}
#list{
width:500px;
height:500px;
position:absolute;
right: 0;
top:190px;
font-size:20px;
background-color:white;
overflow:hidden;
display: none;
}
#list p{
font-size: 16px;;
}
#list>div{
width:100%;
height:60px;
background-color: #D3D3D3;
position:relative;
top:0;
}
.list_1_1{
float:left;
width:200px;
height:30px;
margin-left:150px;
margin-top: 15px;
border-radius:15px;
background-color: antiquewhite;
overflow:hidden;
}
.list_1_1 div:nth-child(1){
background-color: antiquewhite;
}
.list_1_1 div:nth-child(2){
background-color:white;
}
.list_1_2{
display: none;
}
.list_1_2 li:hover{
background-color:indianred;
}
#list ul li{
height:50px;
line-height: 50px;
list-style: none;
}
#list ul li:hover{
background-color:pink;
cursor:pointer;
}
#list>div>div>div{
width:100px;
height:30px;
text-align: center;
line-height: 30px;
float:left;
}
#masklayer{
position:absolute;
width:100%;
height:100%;
background-color: #000000;
opacity: 0.2;
top:0;
display:none;
}
.adddiv{
width:400px;
height:300px;
background-color:greenyellow;
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-200px;
display:none;
}
.adddiv img{
width:20px;
height:20px;
float:right;
}
.adddiv .add{
width:70%;
margin:0 auto;
}
.adddiv .add li{
list-style:none;
height:50px;
text-align: center;
font-size:25px;
width:280px;
line-height: 50px;
}
.adddiv ul li:last-child{
background-color: violet;
}
.adddiv ul li:nth-child(2) input{
height:30px;
width:100%;
}
.adddiv ul li:nth-child(3) input{
height:30px;
width:100%;
}
.adddiv ul li:nth-child(4) span{
font-size:14px;
float:right;
top:18px;
}
#hint_1{
position:absolute;
width:70%;
left:15%;
top:95px;
background-color:white;
display: none;
height:200px;
}
#hint_1 li{
height:50px;
line-height:50px;
list-style: none;
font-size: 20px;;
background-color: white;
}
#hint_1 li:hover{
color:red;
}
#hint{
font-size:14px;
float:left;
top:18px;
color:red;
}
.rotate{
animation:xuanzhuan 10s linear infinite;
}
@keyframes xuanzhuan{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform:rotate(360deg);
}
}
.list_style{
animation: ;
background-color:#99ccff;
}
#desktop{
width: 1200px;
height:100px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.4) 98%, #FFFFFF 100%);
position:absolute;
top:80%;
left:50%;
margin-left:-600px;
text-align:center;
line-height:100px;
font-size:60px;
color:ghostwhite;
display:none;
}
#desktop img{
position:absolute;
right:0;
top:0;
width:30px;
height:30px;
transition: all 1s linear;
}
#remark{
width:500px;
height:350px;
background-color:#FFC0CB;
position:absolute;
left:50%;
top:50%;
margin-top:-200px;
margin-left:-250px;
display: none
}
#remark textarea{
width:400px;
height:200px;
position:absolute;
left:50px;
font-size:20px;
}
#remark p{
height:60px;
font-size:30px;
margin-left:30px;
line-height:60px;
}
#remark b{
width:60px;
height:40px;
position:absolute;
right:50px;
bottom:30px;
font-size:30px;
line-height:40px;
}
#remark img{
width:30px;
height:30px;
position:absolute;
right:0;
top:0;
c
}
#remark b:hover{
cursor: pointer;
color:darkred;
background-color:deepskyblue;
}
#list p span:hover{
background-color: #00BFFF;
}
四、js代码
$(function(){
var n=0;
var unde=[];
var degs=0;
var timess;
var true_false=true;
var monitor_rotate=false;
var audio=$('#box footer audio').get(0);
var temp_ss=[500];
function deg(){
degs++;
$('#picture').css('transform','rotate('+degs+'deg)')
monitor_rotate=true;
}
var setTime;
$('#playBack').on('click',function(){
if(audio.paused){
audio.play();
$('#playBack').attr('src','img/icon_c3uo4zcbvw9/zanting.png');
if(monitor_rotate){
clearInterval(setTime);
}
setTime=setInterval(deg,20);
}else{
audio.pause();
$('#playBack').attr('src','img/icon_c3uo4zcbvw9/bofang_1.png');
clearInterval(setTime);
monitor_rotate=false;
}
});
function sum_time(){
audio.oncanplay=function(){
var t;
t=audio.duration;
$('#plan').attr('max',t);
t=parseInt(t/60)+':'+(parseInt(t%60)<9?'0'+parseInt(t%60):parseInt(t%60));
var temp=$('#foot_ul li').eq(5).text(t);
}
}
audio.onvolumechange=function(){
var m=audio.volume;
$('#volume').val(m);
}
$('#volume').on('input',function(){
var temp=$('#volume').val();
var str=parseInt((temp/1)*100)+'%';
if(temp==0){
$('#trumpet').attr('src','img/icon_c3uo4zcbvw9/jingyin_1.png').attr('title','静音');
}else{
$('#trumpet').attr('src','img/icon_c3uo4zcbvw9/bofang.png').attr('title','音量:'+str);
}
audio.volume=temp;
});
$('#trumpet').on('click',function(){
if(audio.volume!=0){
$('#trumpet').attr('src','img/icon_c3uo4zcbvw9/jingyin_1.png').attr('title','静音');
audio.volume=0;
$('#plan').val(0);
}else{
audio.volume=0.5;
var str=(0.5/1)*100+'%';
$('#trumpet').attr('src','img/icon_c3uo4zcbvw9/bofang.png').attr('title','音量:'+str);
}
});
audio.ontimeupdate=function(){
var time=parseInt(this.currentTime);
$('#plan').val(time);
time=(parseInt(time/60)>0?parseInt(time/60):'0')+':'+(parseInt(time%60)>9?parseInt(time%60):'0'+parseInt(time%60));
$('#foot_ul li').eq(3).text(time);
}
var audio_change=0;
$('#plan').on('input',function(){
if(audio.paused){
}else{
audio.pause();
audio_change=1;
}
var t=$('#plan').val();
audio.currentTime=t;
t=(parseInt(t/60)>0?parseInt(t/60):'0')+':'+(parseInt(t%60)>9?parseInt(t%60):'0'+parseInt(t%60));
$('#foot_ul li').eq(3).text(t);
});
$('#plan').on('mouseup',function(){
if(audio_change==1){
audio.play();
audio_change=0;
}
});
$('#menus').on('click',function(){
var list=$('#list');
if(list.is(':hidden')){
list.show();
}
else{
list.hide();
}
})
$('.list_1_1>div').on('click',function(){
var index=$(this).index();
if(index==0){
$('#list ul').hide();
$('#list ul').eq(0).show();
var t=musicData.length;
$('#list p span').eq(0).text(t);
}
else{
$('#list ul').hide();
$('#list ul').eq(1).show();
var t=$('.list_1_2 li').length;
$('#list p span').eq(0).text(t);
}
$('.list_1_1 div').css('background-color','white');
$(this).css('background-color','antiquewhite');
})
var replace='pink';
$('#color').on('input',function(){
var temp=$('#color').val();
$('#box header').css('background-color',temp);
$('#box footer').css('background-color',temp);
});
$('#logIn').on('click',function(){
var temp=$('#logIn b').text();
if(temp=='登陆'){
$('#masklayer').show();
$('.adddiv').show();
}
else{
$('#logIn_ul').show();
}
})
$('.adddiv img').on('click',function(){
$('#masklayer').hide();
$('.adddiv').hide();
});
$('#foot_ul li:nth-child(1)').on('click',function(){
n--;
var temp=!audio.paused;;
if(n<0){
n=3;
}
$(audio).attr('src',musicData[n].url);
fill(n);
addList(n);
if(temp){
audio.play();
}
});
function addList(n){
var li=$('.list_ul_1 li').eq(n).clone();
var ht=li.html();
var ul_2=$('.list_1_2');
var t=0;
li.css('background-color','white');
for(var i=0;i<unde.length;i++){
if(unde[i].name[0].innerHTML==ht){
t++;
}
}
if(t===0&&unde.length<$('.list_ul_1 li').length){
ul_2.append(li);
var arr={
name:li,
id:n
};
unde.push(arr);
}
var log=$('.list_1_2 li').length;
$('#list p span').eq(0).text(log);
}
$('#foot_ul li:nth-child(3)').on('click',function(){
n++;
var temp=!audio.paused;
if(n>3){
n=0;
}
$(audio).attr('src',musicData[n].url);
fill(n);
addList(n);
if(temp){
audio.play();
}
});
fill(n);
function fill(n){
var temp=lrcs[n].lyric[0].lineLyric;
var str="
";
for(var a=0;a<temp.length;a++){
str+=''+temp[a]+''
}
$('#desktop').html(str);
sum_time();
$(audio).attr('src',musicData[n].url);
$('#box_body_2>img').attr('src',musicData[n].cover);
$('#box_body_1 h1').text(musicData[n].song);
$('#box_body_1 li:nth-child(1) span').text(musicData[n].album);
$('#box_body_1 li:nth-child(2) span').text(musicData[n].singer);
$('#box_body_1 li:nth-child(3) span').text(musicData[n].source);
$('.body_ul_2').html('');
for(var i=0;i<lrcs[n].lyric.length;i++){
var temp=lrcs[n].lyric[i].lineLyric;
$(""+temp+"").appendTo($('.body_ul_2'));
}
$('#comment').html('');
for(var i=0;i<musicData[n].msg.length;i++){
var use=parseInt(musicData[n].msg[i].userId)-1;
var temp=$(""
+"
+users[use].pic+">"
+"
+ ""+users[use].name+"："+musicData[n].msg[i].megCon+""
+ ""+musicData[n].msg[i].date+""
+ "回复"
+ "|"
+ "分享"
+ "|"
+ "点赞"
+ ""
+ "");
temp.appendTo($('#comment'));
}
$('.list_ul_1').html('');
for(var i=0;i<musicData.length;i++){
$('.list_ul_1').append($(''+musicData[i].song+''+musicData[i].singer+''));
var temp=musicData.length;
$('#list p span:nth-child(1)').text(temp);
}
$('.list_ul_1 li').removeClass();
$('.list_ul_1 li').eq(n).addClass('list_style');
scroll_2(n);
$('#remark p span').text(musicData[n].song);
}
$('.list_ul_1').on('click','li',function(){
var index=$(this).index();
var ht=$(this).html();
var li=$(this).clone();
var ul_2=$('.list_1_2');
var li_2=$('.list_1_2 li');
var t=0;
for(var i=0;i<li_2.length;i++){
if(unde[i].name[0].innerHTML==ht){
t++;
}
}
if(t===0){
ul_2.append(li);
var dx={
name:li,
id:index
};
unde.push(dx);
}
fill(index);
audio.play();
$('#playBack').attr('src','img/暂停.jpg');
})
var title_arr=['顺序播放','单曲循环','全部循环','随机播放'];
var img_arr=['img/icon_c3uo4zcbvw9/shunxubofang.png','img/icon_c3uo4zcbvw9/danquxunhuan.png','img/icon_c3uo4zcbvw9/quanbuxunhuan.png','img/icon_c3uo4zcbvw9/random.png'];
var index_p=0;
$('#random').on('click',function(){
index_p++;
if(index_p==title_arr.length){
index_p=0;
}
$(this).attr('src',img_arr[index_p]).text('title',title_arr[index_p]);
});
function mo(n){
if(n<musicData.length){
fill(n);
audio.play();
}
else{
n=musicData.length-1;
$('#playBack').attr('src','img/icon_c3uo4zcbvw9/zanting.png');
$('#picture').removeClass();
}
}
audio.onended=function(){
switch(index_p){
case 0://顺序播放，播完就结束了
n++;
if(n<musicData.length){
fill(n);
audio.play();
}else{
n=musicData.length-1;
$('#playBack').attr('src','img/icon_c3uo4zcbvw9/bofang_1.png');
$('#picture').removeClass();
}
break;
case 1://单曲循环 播放当前这首
fill(n);
audio.play();
break;
case 2://全部循环·
n++;
if(n==musicData.length){
n=0;
}
fill(n);
audio.play();
break;
case 3://随机播放
var temp=Math.floor(Math.random()*musicData.length);
fill(temp);
audio.play();
break;
}
}
function scroll(n){
var scrollTop=0;
var sum=0;
var ts=0;
var gun=$('.body_ul_2').get(0);
gun.scrollTop=0;
audio.ontimeupdate=function(){
var time=this.currentTime;
$('#plan').val(time);
time=(parseInt(time/60)>0?parseInt(time/60):'0')+':'+(parseInt(time%60)>10?parseInt(time%60):'0'+parseInt(time%60));
$('#foot_ul li').eq(3).text(time);
var t=parseInt(audio.currentTime);
console.log(t);
var list_gechi=$('.body_ul_2 li');
for(var i=0;i< lrcs[n].lyric.length;i++){
if(lrcs[n].lyric[i].time==t&&sum==0){
list_gechi.removeClass();
list_gechi.eq(i).addClass('list_style');
scrollTop=50*i-150;
gun.scrollTop=scrollTop;
sum++;
ts=t;
}
if(t-1==ts){
sum=0;
}
}
};
}
$('.body_ul_2').hover(function(){
true_false=false;
},function(){
true_false=true;
});
function scroll_2(n){
var gun=$('.body_ul_2').get(0);
gun.scrollTop=0;
var scrollTop=0;
var on_off=0
var on_off_1=0;
var on_off_2=0;
var on_off_3=0;
var color_temp=0;
var color_r='#'
var arr=[];
for(var i=0;i<lrcs[n].lyric.length;i++){
arr.push(lrcs[n].lyric[i].time);
}
var arr_1=[];
for(var i=0;i<arr.length;i++){
if(arr[i+1]!=undefined){
arr_1.push(arr[i+1]-arr[i]);
}
}
var now_lyric=[];
for(var i=0;i<lrcs[n].lyric.length;i++){
now_lyric[i]=lrcs[n].lyric[i].lineLyric;
}
var arr_lyric=[];
for(var i=0;i<now_lyric.length;i++){
var now_lyric_1=[];
var temporar=arr[i];
for(var k=0;k<now_lyric[i].length;k++){
temporar+=Number(((arr_1[i]/now_lyric[i].length)*0.8).toFixed(2));
now_lyric_1[k]= temporar;
}
arr_lyric.push(now_lyric_1);
}
var temporary_1=arr[arr.length-1];
var temporary_2=lrcs[n].lyric[lrcs[n].lyric.length-1].lineLyric;
arr_lyric[arr_lyric.length-1]='';
now_lyric=[];
for(var j=0;j<temporary_2.length;j++){
temporary_1+=0.4;
now_lyric[j]=temporary_1;
}
arr_lyric[arr_lyric.length-1]=now_lyric;
audio.ontimeupdate=function(){
var time=this.currentTime;
$('#plan').val(time);
time=(parseInt(time/60)>0?parseInt(time/60):'0')+':'+(parseInt(time%60)>9?parseInt(time%60):'0'+parseInt(time%60));
$('#foot_ul li').eq(3).text(time);
var t=parseInt(audio.currentTime);
var t_1=audio.currentTime;
var list_gechi=$('.body_ul_2 li');
var sr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
for(var i=0;i< lrcs[n].lyric.length;i++){
if(t==on_off_1){
on_off=0;
}
if(t==lrcs[n].lyric[i].time&&on_off==0){
on_off++;
on_off_1=arr[i+1];
color_r='#';
for(var ip=0;ip<6;ip++){
var r=Math.floor(Math.random()*sr.length);
color_r+=sr[r];
}
}
var length_ly=(i+1)<arr.length?(i+1):arr.length;
if(lrcs[n].lyric[i].time<t_1){
var temp=lrcs[n].lyric[i].lineLyric;
var str="";
for(var a=0;a<temp.length;a++){
str+=''+temp[a]+''
}
$('#desktop').html(str);
}
var span=$('#desktop span');
for(var k=0;k<arr_lyric[i].length;k++){
if(t_1>arr_lyric[i][k]){
span.eq(k).css('color',color_r);
}
}
}
for(var i=0;i< lrcs[n].lyric.length;i++){
if(lrcs[n].lyric[i].time==t){
list_gechi.removeClass();
list_gechi.eq(i).addClass('list_style');
}
if(true_false){
if(arr[i+1]!=undefined&&t>arr[i]&&t<arr[i+1]){
gun.scrollTop=i*50-150;
}
}
}
}
}
$('.body_ul_2').on('click','li',function(){
var index=$(this).index();
var temp=lrcs[n].lyric[index].time;
audio.currentTime=temp;
});
$('#img_zuomian').on('click',function(){
var temp=$('#desktop');
if(temp.is(':hidden')){
temp.show();
}else{
temp.hide();
}
});
var div=$('#desktop');
$('#desktop').on('mousedown',function(e) {
var x=e.pageX-$(this).offset().left;
var y=e.pageY-$(this).offset().top;
$(this).on('mousemove',function(e){
var x1=e.pageX;
var y1=e.pageY;
x1=x1-x;
y1=y1-y;
$(this).css({
top:y1,left:x1,margin:0
})
});
});
$('#desktop').on('mouseup',function(){
$(this).off('mousemove');
});
$('#desktop').on('click','img',function(){
$('#desktop').hide();
})
$('#box_body_3 input').on('click',function(){
var temp=$('#logIn b').text();
console.log(temp);
if(temp=='登陆'){
$('#masklayer').show();
$('.adddiv').show();
return;
}
$('#remark').show();
$('#remark p span').text(musicData[n].song);
});
$('#remark img').on('click',function(){
$('#remark').hide();
})
$('#remark b').on('click',function(){
var name=$('#logIn b').text();
var index=0;
for(var i=0;i<users.length;i++){
if(name==users[i].name){
index=i;
break;
}
}
var temp=$('#remark textarea').val();
var time=new Date();
var y=time.getFullYear();
var m=time.getMonth();
var d=time.getDate();
var h=time.getHours();
var min=time.getMinutes();
var s=time.getSeconds()
var str=y+'-'+m+'-'+d+'-'+(h<10?'0'+h:h)+':'+(min<10?'0'+min:min)+':'+(s<10?'0'+s:s);
console.log(str);
var id=musicData[n].msg.length+1;
var arr={
"megId":id,
"megCon":temp,
"date":str,
"userId":index+1
};
musicData[n].msg.push(arr);
fill(n);
$('#remark').hide();
})
$('.adddiv li:nth-child(5)').on('click',function(){
var name=$('.adddiv input').eq(0).val();
var password=$('.adddiv input').eq(1).val();
var ajax=new XMLHttpRequest();
ajax.open('GET','文件/users.txt',true);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4&ajax.status==200){
var temp=ajax.response;
temp=eval(temp);
console.log(temp);
var temppor=0;
for(var i=0;i<temp.length;i++){
if(name==temp[i].name){
temppor=temp[i].name;
break;
}
}
if(name=temppor){
if(password==temp[i].pwd){
$('#logIn b').text(temp[i].name);
$('#box header li:nth-child(4) img').attr('src',temp[i].pic);
$('.adddiv').hide();
$('#masklayer').hide();
$('#hint').text('');
var checked=$('#check').prop('checked');
console.log(checked);
window.localStorage.setItem('username',name);
window.localStorage.setItem('pwd',password);
if (checked) {
window.localStorage.setItem('username',name);
window.localStorage.setItem('pwd',password);
}
else{
window.localStorage.removeItem('username');
window.localStorage.removeItem('pwd');
}
}
else{
$('#hint').text('请输入正确的密码');
}
}else{
if(name==''){
$('#hint').text('还未输入信息');
}
else{
$('#hint').text('用户名错误');
}
}
console.log(name,password);
}
}
});
function ajax(get,url,f){
var ajax=new XMLHttpRequest();
ajax.open(get,url,true);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4&ajax.status==200){
var data=ajax.response;
return f(data);
} }
}
$('.adddiv li input').eq(0).on('input',function(){
ajax('GET','文件/users.txt',function(data){
data=eval(data);
$('#hint_1').html('');
for(var i=0;i<data.length;i++){
var name=data[i].name
$('#hint_1').show();
$(''+name+'').appendTo($('#hint_1'));
}
})
});
$('#hint_1').hover(function(){
$(this).show();
},function(){
$('#hint_1').hide();
});
$('#hint_1').on('click','li',function(){
var t=$(this).text();
$('.add input').eq(0).val(t);
$('#hint_1').hide();
})
$('#logIn_ul li').eq(1).on('click',function(e){
$('#logIn_ul').hide();
$('#logIn b').text('登陆');
$('#masklayer').show();
$('.adddiv').show();
$('#box header li:nth-child(4) img').attr('src','img/登陆.jpg');
return false;
})
$('#logIn_ul').hover(function(){
$(this).show();
},function(){
$(this).hide();
})
$('.list_1_2').on('click','li',function(){
var x=$(this).html();
var log=$('.list_1_2 li').length;
for(var i=0;i<unde.length;i++){
if(x==unde[i].name[0].innerHTML){
fill(unde[i].id);
audio.play();
break;
}
}
$('#list p span').eq(0).text(log);
});
$('#list p span').eq(1).on('click',function(){
unde=[];
if(!$('.list_1_2').is(":hidden")){
$('.list_1_2').html("");
$('#list p span').eq(0).text(0);
}
});
$('#seek').on('input',function(){
$('#seek ul').show();
$('#seek ul').html('');
var value=$('#seek input').val();
var reg=new RegExp('^[a-zA-Z]');
var v=value.slice(0,1);
for(var i=0;i<musicData.length;i++){
var t=musicData[i].song;
var t_1=t.slice(0,1);
if(v==t_1){
var li=$(''+t+'');
li.appendTo($('#seek ul'));
}
}
})
$('body').on('click',function(){
$('#seek ul').hide();
})
$('#seek ul').on('click','li',function(){
var a=0;
var t=$(this).text();
for(var i=0;i<musicData.length;i++){
if(t==musicData[i].song){
a=i;
break;
}
}
fill(a);
})
var username = window.localStorage.getItem('username');
if (username) {
$(".add input").eq(0).val(username);
$(".add input").eq(1).val(window.localStorage.getItem('pwd'));
$('.add input').eq(2).prop('checked',true);
}
});
五、效果图
