实现简易网易云音乐播放器
文章目录
实现简易网易云音乐播放器前言该功能实现了单机版，可以在浏览器上运行，满足了音乐播放器应有核心功能一、需要材料二、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./mW53BkMgGy37I7yVrUg-aQ==/109951163117902077.jpg"'><ul><li><span>小柠檬：</span>听的也想哭老了你们还好吗</li><li>-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%;/* background-color:palegreen; */font-size:20px;margin-right:3%;}#box_body_2{width:30%;height:450px;/* background-color: aqua; */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;/* border-top:1px solid gold; */}.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;/* line-height: 60px;; */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;}/* #desktop{color: #5BA6DF;text-shadow: 1px 1px 10px #5BA6DF;background-image: -webkit-linear-gradient(left, #2EC7C9, #E6D205 25%, #2EC7C9 50%, #E6D205 75%, #2EC7C9 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: masked-animation 4s infinite linear;font-family:Chaparral Pro Light;letter-spacing:2px;font-size:56px;}@keyframes masked-animation {0% {background-position: 0 0; }100% {background-position: -100% 0;}}*/#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;}//1播放暂停按钮var setTime;$('#playBack').on('click',function(){if(audio.paused){//paused值为真时表示暂停状态，为假时表示播放状态audio.play();//播放音频文件$('#playBack').attr('src','img/icon_c3uo4zcbvw9/zanting.png');// $('#picture').addClass('rotate')if(monitor_rotate){clearInterval(setTime);}setTime=setInterval(deg,20);}else{audio.pause();$('#playBack').attr('src','img/icon_c3uo4zcbvw9/bofang_1.png');// $('#picture').removeClass();clearInterval(setTime);monitor_rotate=false;}});// setInterval(function(){// console.log('我要相信自己');// },temp_ss[0]);//2获取音频长度function sum_time(){audio.oncanplay=function(){var t;t=audio.duration;// console.log(t);$('#plan').attr('max',t);// console.log($('#plan').attr('max'));t=parseInt(t/60)+':'+(parseInt(t%60)<9?'0'+parseInt(t%60):parseInt(t%60));//这里的长度是随歌曲固定的var temp=$('#foot_ul li').eq(5).text(t);}}//3当音量改变的时候audio.onvolumechange=function(){var m=audio.volume;$('#volume').val(m);// console.log('音量设置');}//4设置音量$('#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;});//5静音设置$('#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);}});//对象.currentTime,获取当前音频播放时间，反过来就是设置播放时间；//6显示音频播放时间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);// console.log(time);}//7通过滑动条设置播放时间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;}});//8打开播放菜单$('#menus').on('click',function(){var list=$('#list');if(list.is(':hidden')){list.show();}else{list.hide();}})//9显示播放列表$('.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');})//10换皮肤颜色var replace='pink';$('#color').on('input',function(){var temp=$('#color').val();$('#box header').css('background-color',temp);$('#box footer').css('background-color',temp);// replace=temp;// var r=parseInt(temp.slice(1,3),16);// var g=parseInt(temp.slice(3,5),16);// var b=parseInt(temp.slice(5),16);// var r_1=parseInt(replace.slice(1,3),16);// var g_1=parseInt(replace.slice(3,5),16);// var b_1=parseInt(replace.slice(5),16);// $('#desktop').css('color','white').css('background-image','rgba('+r,g,b+')');// console.log(r,g,b);});//点击登陆会弹出一个登陆框$('#logIn').on('click',function(){var temp=$('#logIn b').text();if(temp=='登陆'){$('#masklayer').show();$('.adddiv').show();}else{$('#logIn_ul').show();}})//11取消登录框$('.adddiv img').on('click',function(){$('#masklayer').hide();$('.adddiv').hide();});//12上一曲$('#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);// $('#playBack').attr('src','img/暂停.jpg');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);}//13下一曲$('#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);// $('#playBack').attr('src','img/暂停.jpg');fill(n);addList(n);if(temp){//为真时就接这播放，为假时就不播放audio.play();}});//14一个专门用来填充数据的函数fill(n);function fill(n){//切歌清空桌面歌词// $('#desktop').html('-----网易云音乐-----<img src="img/icon_c3uo4zcbvw9/zhuomiangeci_guanbi.png">');var temp=lrcs[n].lyric[0].lineLyric;var str="<img src='img/icon_c3uo4zcbvw9/zhuomiangeci_guanbi.png'>";for(var a=0;a<temp.length;a++){str+='<span>'+temp[a]+'</span>'}$('#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;$("<li>"+temp+"</li>").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=$("<li class='addLi' style='margin-top:30px'>"+"<img src="+users[use].pic+">"+"<ul>"+"<li><span>"+users[use].name+"：</span>"+musicData[n].msg[i].megCon+"</li>"+"<li>"+musicData[n].msg[i].date+"</li>"+"<li>回复</li>"+"<li>|</li>"+"<li>分享</li>"+"<li>|</li>"+"<li>点赞</li>"+"</ul>"+"</li>");temp.appendTo($('#comment'));}//添加到播放列表$('.list_ul_1').html('');for(var i=0;i<musicData.length;i++){$('.list_ul_1').append($('<li>'+musicData[i].song+'<span style="right:0px;position:absolute;">'+musicData[i].singer+'</span></li>'));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);}//15播放列表里选择歌曲$('.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(){// mo(n);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;}}//21歌词同步显示 滚动条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);//还要获取列表中的歌词信息//如何让滚动条也跟着同步？//事件监听在不停的变化，强制转换之后，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=0var 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);}// console.log(now_lyric);//去掉歌词时间数组里最后一行，时间为NaN的情况；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;//现在分两步进行，1：先渲染当前的整句歌词，2：找到当前歌词每个字对应的时间点，根据索引对每个字改变颜色// console.log(arr);//播放时间// console.log(arr_1);//每一句实时间差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;//还要获取列表中的歌词信息//如何让滚动条也跟着同步？//事件监听在不停的变化，强制转换之后，t，有时候一秒中之内会是几个相同的数，//为了确保，每段歌词，只操作一次，定义监听变量var list_gechi=$('.body_ul_2 li');// var color_r='#';//随机十六进制色；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="<img src='img/icon_c3uo4zcbvw9/zhuomiangeci_guanbi.png'>";for(var a=0;a<temp.length;a++){str+='<span>'+temp[a]+'</span>'}$('#desktop').html(str); }// color_r='#';//五颜六色的变色；// for(var ip=0;ip<6;ip++){// var r=Math.floor(Math.random()*sr.length);// color_r+=sr[r];// }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;}}} }}//桌面歌词，每一个变换颜色//22点哪儿播哪儿$('.body_ul_2').on('click','li',function(){var index=$(this).index();var temp=lrcs[n].lyric[index].time;audio.currentTime=temp; });//23打开做桌面菜单$('#img_zuomian').on('click',function(){var temp=$('#desktop');if(temp.is(':hidden')){temp.show();}else{temp.hide();}});//24桌面歌词拖拽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');});//25关闭$('#desktop').on('click','img',function(){$('#desktop').hide();})//26如何判断有没有登陆$('#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);});//27关闭评论框$('#remark img').on('click',function(){$('#remark').hide();}) //28评论$('#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();})//28登陆$('.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);} }}//29登提示陆框$('.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();$('<li>'+name+'</li>').appendTo($('#hint_1'));}})});//30登陆框提示，鼠标离开$('#hint_1').hover(function(){$(this).show();},function(){$('#hint_1').hide();});//31登陆框提示 提示点击$('#hint_1').on('click','li',function(){var t=$(this).text();$('.add input').eq(0).val(t);$('#hint_1').hide();})//32退出登录$('#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;})//33退出登录隐藏$('#logIn_ul').hover(function(){$(this).show();},function(){$(this).hide();})//34历史纪录点击播放$('.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);});//35清空历史纪录$('#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=$('<li>'+t+'</li>');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);}});
