<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网易云音乐</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css"/>
<script src="js/00-data.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul li{
list-style: none;
float: left;
}
header{
width: 1350px;
height: 60px;
background-color: red;
margin: 0px auto;
}
section{
width: 1350px;
height: 500px;
margin: 0px auto;
background-color: darkgrey;
display: flex;
justify-content: flex-end;
overflow: scroll;
}
footer{
width: 1350px;
height: 50px;
background-color: #FF0000;
margin: 0px auto;
display: flex;
justify-content: space-around;
}
nav{
width: 1350px;
height: 60px;
display: flex;
justify-content: space-around;
}
#logo ul li{
padding-left: 10px;
font-size: 20px;
color: #FFFFFF;
}
#logo ul li:last-child{
line-height: 45px;
}
#search input{
width: 200px;
border-radius:32px ;
line-height: 20px;
}
#search{
line-height: 45px;
}
a{
text-decoration: none;
color: black;
font-size: 25px;
}
#loginBox{
width: 400px;
height:250px ;
background-color: skyblue;
opacity: 0.9;
position: absolute;
top: 90px;
left: 1000px;
display: none;
z-index: 1;
}
#user,#psw{
width: 300px;
height: 30px;
}
#login2{
display: block;
margin: 0px auto;
width: 300px;
height: 30px;
background-color: mediumpurple;
text-align: center;
line-height: 30px;
}
.begin span{
font-size: 20px;
line-height: 50px;
}
.slide{
line-height: 60px;
}
#slideTwip{
width: 200px;
}
.over{
line-height: 50px;
font-size: 20px;
}
.sound input{
width: 50px;
}
#entry{
position: relative;
}
.musicList{
width: 400px;
height: 250px;
position: absolute;
bottom: 50px;
right: 1px;
}
li{
cursor: pointer;
}
.left{
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.aa{
width: 850px;
height: 800px;
}
#songList li{
clear: both;
}
.aa{
height: 500px;
overflow: scroll;
position: relative;
}
.leftPicture img{
width: 200px;
height: 200px;
border: 50px solid #000000;
border-radius: 50%;
}
@keyframes imgRotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.leftrotate{
animation: imgRotate 20s linear infinite;
}
.musiclist{
position: relative;
}
.m{
position: absolute;
}
.history{
position: absolute;
}
#HistoryList{
display: none;
position: absolute;
top: 50px;
}
#HistoryList li{
width: 200px;
}
.m{
display: none;
}
.HistoryList{
display: none;
}
.c{
width: 1350px;
height: 500px;
overflow: scroll;
margin: 0px auto;
}
#commtent{
width: 1350px;
background-color: gray;
}
.picture{
width: 1350px;
height: 100px;
display: flex;
}
.picture img{
width: 100px;
height: 100px;
border-radius: 50%;
}
.picture1{
width: 1350px;
height: 100px;
display: flex;
}
.picture1 img{
width: 100px;
height: 100px;
border-radius: 50%;
}
.picture3{
width: 1350px;
height: 100px;
display: flex;
}
.picture3 img{
width: 100px;
height: 100px;
border-radius: 50%;
}
.active{
color: red;
}
.sing{
display: none;
}
</style>
</head>
<body>
<header>
<nav>
<div id="logo">
<ul>
<li><img src="img/网易云音乐logo.jpg" ></li>
<li>网易云音乐</li>
</ul>
</div>
<div id="search">
<input type="search" name="mysearch" id="" value="" placeholder="搜索音乐" />
</div>
<div style="line-height: 55px;">
<span id="showUser"></span><span class="fa fa-user-circle-o fa-2x" id="login">登录</span>
</div>
<div id="loginBox">
<h1 align="center" style="margin-top: 20px;">用户登录</h1>
<input type="text" id="username" placeholder="用户名" style=" display:block;margin:0px auto;"/>
<br/>
<input type="password" id="password" placeholder="密码" style=" display:block;margin:0px auto;"/>
<br/>
<span style="float: right;display: block; margin-right: 50px; margin-top: -10px;"><input id="remmberPw" type="checkbox"/>记住密码</span>
<br/>
<div id="login2">登录</div>
</div>
<div style="line-height: 55px;">
<span class="fa fa-adjust fa-1g color_skin fa-2x" id="skin">皮肤</span>
<input type="color" name="mycolor" id="mycolor" />
</div>
</nav>
</header>
<div class="c">
<section>
<div class="left">
<div class="leftPicture">
</div>
</div>
<div class="aa">
<h1 class="dgqm"></h1>
<h3 class="gqm"></h3>
<ul id="songList">
</ul>
</div>
</section>
<div id="commtent">
<div>
<hr style="height: 10px;">
<br>
<span style="font-size: 30px;">听友评论</span>
<br>
<input type="text" name="" id="s" value="" placeholder="发表评论" style="width: 1350px; height: 50px;"/>
<input type="submit" name="" id="p" value="评论" style="float: right; width: 200px;" />
</div>
<br>
<div class="picture">
<div class="lp">
</div>
<div class="rw"></div>
</div>
<div class="picture1">
<div class="lp1"></div>
<div class="rw1"></div>
</div>
</div>
</div>
<footer>
<div class="fa fa-caret-square-o-left fa-3x" id="prev">
</div>
<div id="stop">
<span class="fa fa-pause-circle-o fa-3x"></span>
</div>
<div class="fa fa-caret-square-o-right fa-3x" id="next" >
</div>
<div class="begin">
<span id="begin">00:00</span>
</div>
<div class="slide">
<input type="range" id="slideTwip" min='0' value=""/>
</div>
<div class="over">
<span id="over"></span>
</div>
<div class="sound">
<span class=" fa fa-bell fa-3x" id="vol"></span>
<input type="range" name="" id="volRange" value="" min=0 max=100/>
</div>
<div class="fa fa-align-justify fa-3x" id="boardcast">
<div class="change">
</div>
</div>
<div id="song" class="fa fa-eye fa-3x">
</div>
<div id="entry" class="fa fa-square fa-3x">
<div class="musicList">
<div class="m">
<h3>歌曲列表</h3>
<ol id="musicList">
</ol>
</div>
<div class="history">
<h3 style="position: absolute;left: 360px;" class="HistoryList">历史记录</h3>
<ol id="HistoryList">
</ol>
</div>
</div>
</div>
<audio src="" autoplay="autoplay" id="msc">
当前浏览器不支持audio
</audio>
<div id="qq">
</div>
</footer>
<div class="sing" style="width: 200px; height: 50px; background-color: #CC66FF; margin: 0px auto;" >
</div>
</body>
<script type="text/javascript">
// header、nav、aside、section、article
//首页 导航条 登录
$("#login").click(function(){
$("#loginBox").css('display','block');
//查看本地是否存储了用户名和密码
var username=window.localStorage.getItem('username');
var pw=window.localStorage.getItem('password');
//如果本地有用户名和密码则直接填入文本框中
//记住密码复选框状态为选中
if(username){
$("#username").val(username);
$("#password").val(pw);
$("#remmberPw").prop('checked',true);
}
});
$("#login2").click(function(){
var username=$('#username').val();
var pw=$("#password").val();
var isRemmber=$("#remmberPw").prop('checked');
//实现本地储存
if(isRemmber){
window.localStorage.setItem('username',username);
window.localStorage.setItem('password',pw);
}
//删除以前记住的用户名和密码,由需求决定
else{
window.localStorage.removeItem('username');
window.localStorage.removeItem('password');
}
//登录验证
var status=0;//0用户和密码都不正确 1是用户名不存在 2登录成功
for(var i=0;i<users.length;i++){
if(users[i].name===username){
status=1;
if(users[i].pwd===pw){
status=2;
alert('登录成功');
$("#login").text(username);
}
}
}
var errorStr= status == 1 ?"密码错误":(status==0?"用户名不存在":"");
status == 2 || alert(errorStr+',登录失败!!');
$("#loginBox").css('display','none');
});
$("#skin").click(function(){
var color=$('#mycolor').val();
$('header').css('background',color);
$('footer').css('background',color);
});
$("#mycolor").on('change',function(){
var color=$('#mycolor').val();
$('header').css('background',color);
$('footer').css('background',color);
});
//底部
$('#msc').on('loadedmetadata',function(){
var overTime=this.duration;
var overTimemin=Math.round((overTime/60)*100)/100;
//console.log(overTimemin);
$('#over').text(overTimemin);
});
//生成歌曲列表
data.forEach(v =>{
$('#musicList')[0].innerHTML+=`<li>${v.song} ${v.singer}</li>`;
});
//单击每一首歌名 （使用事件代理函数）
$('#musicList').click(function(e){
e=e || event;
console.log(e);
//评论
$('.lp')[0].innerHTML=`<img src="${imgArr[index]}">`;
var wzarr=[];
var dateArr=[];
console.log($(this).index());
data[$(this).index()].msg.forEach(function(item,index){
console.log(item);
wzarr.push(item.megCon);
dateArr.push(item.date);
console.log(wzarr);
$('.rw')[0].innerHTML=`${wzarr[0]}<br>${dateArr[0]}`;
});
$('.lp1')[0].innerHTML=`<img src="${imgArr[index]}">`;
$('.rw1')[0].innerHTML=`${wzarr[wzarr.length-1]}<br>${dateArr[dateArr.length-1]}`;
//隐藏
$('.m').css('display','none');
$('.HistoryList').css('display','none');
var songName=e.target.innerText.split(" ")[0];
//var songName=e.target.innerText.split("")[0];
//console.log(e.target);
//console.log(songName);
console.log(this);
//历史记录
if($("#HistoryList").text().indexOf($(this).text())==-1){
$("#HistoryList").append('<li>'+ songName+'</li>');
}
var songObj=data.find(
v => v.song == songName
);
//console.log(songObj.url);
$('#msc')[0].src = songObj.url;
$('.dgqm').html(songName);
$(".gqm").html(`专辑:${songObj.album} 歌手:${songObj.singer} 专辑:${songObj.source}`);
//显示歌词
var songList=$('#songList')[0];
songList.innerHTML='';
var songListli=lrcs.find(
v=>v.song == songObj.lyric
);
var songListArr=songListli.lyric;
songListArr.forEach( v=>{
songList.innerHTML+='<li>'+v.lineLyric+'</li>'
}
);
//歌词轮播
var provLineIndex=0;
//时间线
$('#msc')[0].οntimeupdate=function(){
$('#begin').text(formatTime(myaudio.currentTime));
$('#slideTwip')[0].value=myaudio.currentTime;
var time=parseInt(this.currentTime);
var j=songListArr.findIndex(v=>v.time==time);
if(j!=-1){
var lis=songList.getElementsByTagName('li');
lis[provLineIndex].style.color='black';//把上一次颜色换成黑色
lis[j].style.color='red';
provLineIndex=j;
$('.aa')[0].scrollTop=(j-4)*30;
$('.sing').html($('#songList li').eq(i).text());
}
}
$('.leftPicture')[0].innerHTML=`<img src="${songObj.cover}" >`;
$('.leftPicture>img').addClass('leftrotate');
});
//停止按钮
$('#stop>span').click(function(){
if($(this).hasClass('fa fa-pause-circle-o fa-3x')){
$('.leftPicture>img')[0].style.animationPlayState='paused';
$('#msc')[0].pause();
$(this).removeClass('fa fa-pause-circle-o fa-3x')
$(this).attr('class','fa fa-stop-circle fa-3x');
}else if($(this).hasClass('fa fa-stop-circle fa-3x')){
$('.leftPicture>img')[0].style.animationPlayState='running';
$('#msc')[0].play();
$(this).removeClass('fa fa-stop-circle-o fa-3x')
$(this).attr('class','fa fa-pause-circle-o fa-3x');
}
});
/*$('#next').click(function(num){
var num=data.forEach()
});*/
//下一曲
var Arrindex=[];
var imgArr=[];
var musicArr=[];
var SpecialArr=[];
var SingerArr=[];
var Special=[];
data.forEach(function(item,index,array){
Arrindex.push(item.url);
imgArr.push(item.cover);
musicArr.push(item.song);
SpecialArr.push(item.album);
SingerArr.push(item.singer);
Special.push(item.source);
});
var lrcsArr=[];
lrcs.forEach(function(item,index,array){
lrcsArr.push(item);
});
//console.log(lrcsArr);
var index=0;
$('#next').click(function(){
nextMusic();
});
$('#prev').click(function(){
prevMusic();
})
function nextMusic(){
index++;
if(index > Arrindex.length-1 ){
index=0;
}
$('#msc')[0].src=Arrindex[index];
$('#msc')[0].play();
$('.leftPicture')[0].innerHTML=`<img src="${imgArr[index]}">`;
$('.leftPicture>img').addClass('leftrotate');
$('.dgqm')[0].innerHTML=`${musicArr[index]}`;
$('#songList')[0].innerHTML='';
$('.gqm')[0].innerHTML=`专辑:${SpecialArr[index]} 歌手:${SingerArr[index]} 专辑:${Special[index]}`;
lrcsArr[index].lyric.forEach(function(item,index,array){
$('#songList')[0].innerHTML += `<li startplaytime=${item.time}>${item.lineLyric}</li>`;
});
$('#stop>span').removeClass('fa fa-stop-circle-o fa-3x');
$('#stop>span').attr('class','fa fa-pause-circle-o fa-3x');
var prevIndex=0;
$('#msc')[0].οntimeupdate=function(){
$('#begin').text(formatTime(myaudio.currentTime));
$('#slideTwip')[0].value=myaudio.currentTime;
var currentTime=Math.floor(myaudio.currentTime);
for (var i = 0; i < $('#songList li').length; i++) {
if($('#songList li').eq(i).attr('startplaytime') == currentTime)
{
$('#songList li').eq(prevIndex).removeClass('active');
$('#songList li').eq(i).addClass('active');
prevIndex = i;
//同步滚动
document.getElementsByClassName("aa").scrollTop = (i-4)*30;
$('.sing').html($('#songList li').eq(i).text());
break;
}
}
}
}
function prevMusic(){
index--;
if(index < 0){
index=Arrindex.length-1;
}
$('#msc')[0].src=Arrindex[index];
$('#msc')[0].play();
$('.leftPicture')[0].innerHTML=`<img src="${imgArr[index]}">`;
$('.leftPicture>img').addClass('leftrotate');
$('.dgqm')[0].innerHTML=`${musicArr[index]}`;
$('#songList')[0].innerHTML='';
$('.gqm')[0].innerHTML=`专辑:${SpecialArr[index]} 歌手:${SingerArr[index]} 专辑:${Special[index]}`;
lrcsArr[index].lyric.forEach(function(item,index,array){
$('#songList')[0].innerHTML += `<li startplaytime=${item.time}>${item.lineLyric}</li>`;
});
$('#stop>span').removeClass('fa fa-stop-circle-o fa-3x');
$('#stop>span').attr('class','fa fa-pause-circle-o fa-3x');
var prevIndex=0;
$('#msc')[0].οntimeupdate=function(){
$('#begin').text(formatTime(myaudio.currentTime));
$('#slideTwip')[0].value=myaudio.currentTime;
var currentTime=Math.floor(myaudio.currentTime);
for (var i = 0; i < $('#songList li').length; i++) {
if($('#songList li').eq(i).attr('startplaytime') == currentTime)
{
$('#songList li').eq(prevIndex).removeClass('active');
$('#songList li').eq(i).addClass('active');
prevIndex = i;
//同步滚动
document.getElementsByClassName("aa").scrollTop = (i-4)*30;
$('.sing').html($('#songList li').eq(i).text());
break;
}
}
}
}
var myaudio=document.getElementById('msc');
$('#msc')[0].onloadedmetadata=function(){
$('#slideTwip').attr('max',myaudio.duration);
$('#over').text(formatTime(myaudio.duration));
}
$('#slideTwip').on('input',function(){
var t=$(this).val();
$('#begin').text(formatTime(t));
});
$('#slideTwip').on('change',function(){
myaudio.currentTime=$(this).val();
});
$('#volRange').on('input',function(){
myaudio.volume=$(this).val()/100;
if(myaudio.volume==0){
$('#vol').removeClass('fa-bell fa-3x');
$('#vol').addClass('fa-bell-slash fa-3x');
}else{
$('#vol').removeClass('fa-bell-slash fa-3x');
$('#vol').addClass('fa-bell fa-3x');
}
});
$('#vol').click(function(){
if($(this).hasClass() ==' fa-bell-slash fa-3x'){
$('#volRange').val(20);
$(this).removeClass('fa-bell-slash fa-3x');
$(this).addClass('fa-bell fa-3x');
myaudio.volume=0.2;
}else{
$('#volRange').val(0);
$(this).removeClass('fa-bell fa-3x');
$(this).addClass('fa-bell-slash fa-3x');
myaudio.volume=0;
}
});
function formatTime(s){
var s = Math.floor(s);//s=2030
var h1 = Math.floor(s/3600);
var m1 = Math.floor(s%3600/60)
var s1 = s%60;
return (h1>0?(h1+":"):"")+m1+":"+(s1<10?('0'+s1):s1);
}
$('.HistoryList').click(function(){
$('#musicList').css('display','none');
$('#HistoryList').css('display','block');
})
$('.m>h3').click(function(){
$('#musicList').css('display','block');
$('#HistoryList').css('display','none');
});
$('#song').click(function(){
$('.m').css('display','block');
$('.HistoryList').css('display','block');
});
var playMode=3;//3单曲播放 4顺序播放 5随机播放
$('#boardcast').click(function(){
if($(this).hasClass('fa fa-align-justify fa-3x')){
$('#slideTwip')[0].value=0;
$('#boardcast').removeClass('fa fa-align-justify fa-3x');
$('#boardcast').addClass('fa fa-circle-o fa-3x');
myaudio.src=Arrindex[index];
myaudio.play();
}
else if($(this).hasClass('fa fa-circle-o fa-3x')){
$('#slideTwip')[0].value=0;
$('#boardcast').removeClass('fa fa-circle-o fa-3x');
$('#boardcast').addClass('fa fa-circle-o-notch fa-3x');
nextMusic();
}
else if($(this).hasClass('fa fa-circle-o-notch fa-3x')){
$('#slideTwip')[0].value=0;
$('#boardcast').removeClass('fa fa-circle-o-notch fa-3x');
$('#boardcast').addClass('fa fa-align-justify fa-3x');
index=Math.floor(Math.random()*Arrindex.length);
myaudio.src=Arrindex[index];
myaudio.play();
}
//fa-circle-o
//fa-circle-o-notch
});
function words(){
index=Math.floor(Math.random()*Arrindex.length);
$('.leftPicture')[0].innerHTML=`<img src="${imgArr[index]}">`;
$('.gqm')[0].innerHTML=`专辑:${SpecialArr[index]} 歌手:${SingerArr[index]} 专辑:${Special[index]}`;
$('.dgqm')[0].innerHTML=`${musicArr[index]}`;
lrcsArr[index].lyric.forEach(function(item,index,array){
$('#songList')[0].innerHTML += `<li startplaytime=${item.time}>${item.lineLyric}</li>`;
});
myaudio.src=Arrindex[index];
myaudio.onloadedmetadata=function(){
$('#begin').text(formatTime(myaudio.currentTime));
$('#slideTwip')[0].value=myaudio.currentTime;
}
var prevIndex = 0;
myaudio.ontimeupdate = function(){
$('#begin').text(formatTime(myaudio.currentTime));
$('#slideTwip')[0].value=myaudio.currentTime;
//console.log( myaudio.currentTime);
var currentTime =Math.floor(myaudio.currentTime);//向下
var lyricLiArr = $("#songList li");
for (var i = 0; i < lyricLiArr.length; i++) {
if(lyricLiArr.eq(i).attr('startplaytime') == currentTime)
{
lyricLiArr.eq(prevIndex).removeClass('active');
lyricLiArr.eq(i).addClass('active');
prevIndex = i;
//同步滚动
document.getElementsByClassName("aa").scrollTop = (i-4)*30;
$('.sing').html(lyricLiArr.eq(i).text());
}
}
}
$('.leftPicture>img').addClass('leftrotate');
//歌曲评论
$('.lp')[0].innerHTML=`<img src="${imgArr[index]}">`;
var wzarr=[];
var dateArr=[]
data[index].msg.forEach(function(item,index){
console.log(item);
wzarr.push(item.megCon);
dateArr.push(item.date);
console.log(wzarr);
$('.rw')[0].innerHTML=`${wzarr[0]}<br>${dateArr[0]}`;
});
$('.lp1')[0].innerHTML=`<img src="${imgArr[index]}">`;
$('.rw1')[0].innerHTML=`${wzarr[wzarr.length-1]}<br>${dateArr[dateArr.length-1]}`;
}
words();
$('#p').click(function(){
if($("#login").text()!="登录"){
var div=$('<div class="picture3"></div>')
$('#commtent').append(div);
$('.picture3')[0].innerHTML=`<img src="${imgArr[index]}"> ${$('#s').val()}`;
}else{
alert("未登录,请先登录");
}
});
$("#entry").click(function(){
$('.sing').css('display','block');
})
</script>
</html>
小项目：网易云音乐播放器
猜你喜欢
转载自blog.csdn.net/aa67567456/article/details/110728638
今日推荐
周排行