实现简易网易云音乐播放器

最新推荐文章于 2024-02-02 01:31:32 发布
最新推荐文章于 2024-02-02 01:31:32 发布
阅读量1.7k 收藏 25
点赞数 7
分类专栏： 前端学习 文章标签： javascript jquery css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52440306/article/details/115528360
版权

实现简易网易云音乐播放器

文章目录

前言

该功能实现了单机版，可以在浏览器上运行，满足了音乐播放器应有核心功能

一、需要材料

  1. HBuilder编辑器
  2. jQuery库
  3. 图标素材，音乐素材

二、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%;
/* 	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=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);
		}
		// 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);
	    }
});

五、效果图

在这里插入图片描述

妙团团
关注
  • 7
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
python实现简易云音乐播放器
09-20
主要介绍了python实现简易云音乐播放器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
千峰商城-springboot项目搭建-32-vue案例练习-音乐播放器
LYly_B的博客
07-10 275
找到music-1.0.0.jar所在的文件夹，在地址栏直接输入cmd，回车。 在cmd中输入： "java -jarmusic-1.0.0.jar"，回车，启动项目。 在浏览器地址栏输入："http://localhost:9999/music/search?s=张杰"，测试是否启动成功。 在HBuilder中编写音乐播放器显示效果。 音乐搜索： <!DOCTYPE html...
移动应用开发——uni-app跨平台开发 UAMusic学习心得
m0_71821376的博客
05-22 290
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages"style": {,{"style" :,{"style" :,{"style" :],},最后的最后，不知道咋结尾，文章有诸多不足，下篇文章见~
基于H5+js开发一款音乐播放器
热门推荐
凭时间赢来的东西，时间肯定会为之作证
09-28 11万+
前言：当下音乐播放器不胜其数，为了更好的掌握一些东西，我们来自己制作一个音乐播放器。 文章目录：一.开发环境：二.页面视图：1.主文件入口（首页）：2.音乐播放界面：三.功能实现（1）、index.html：（2）、播放音乐（music.html）：（3）、样式文件（index.css）：四.项目地址： 一.开发环境： 开发工具：HbuliderX； 框架：Vant，Mui，Vue 后端：Node 二.页面视图： 正常情况下我们的开发都会有构思图以及模块规划等过程，我们先来看看大致的页面构图： 1
HBuilder：微信h5实现音乐图标旋转播放，停止暂停
qq_41613496的博客
01-15 2486
效果 代码实现 html <!-- 右上角音乐及图标--> <section class="u-audio"> <audio src="img/111.mp3" autoplay="autoplay" id="music" preload loop="loop"></audio> <div id="page1"&...
简易版音乐播放器
12-27
自己没事写的一个简易版音乐播放器，希望一起学习，也希望大家多提提意见，联系方式QQ1113241788
一个简易的音乐播放器
这是要成为全栈的节奏么
10-26 117
经过几天的实践这个丑陋的音乐播放器终于出来了，它作为版本1.0在今天发布。犹豫用的是音乐文件搜索，还没有用到数据库的音乐搜索，所以刚打开时的加载时间会长一点。在版本2.0会有更多的改进。谢谢支持！！！！           附件里是apk安装包,代码会在以后的总结中公开。 ...
简易音乐播放器MusicPlayer
qq_39801871的博客
12-08 330
工具类 package com.qjtc.magicalar.musicplayer.utils; import android.media.MediaPlayer; import com.qjtc.magicalar.musicplayer.view.IMusicContract; import java.io.IOException; import java.util.Timer; ...
简易音乐播放器（Android Studio）
slyarh的博客
08-06 1万+
Android期末作业，临时抱佛脚（手动滑稽 分享下音乐播放的源码吧。（只能播放内嵌音乐 PS：完整工程下载及相关说明：https://download.csdn.net/download/weixin_41918712/10586908 注意事项 卫星式菜单参考：https://www.cnblogs.com/tianhengblogs/p/5265195.html 接下来是音乐播放器...
简易音乐播放器。
stovd
09-20 243
&lt;template&gt; &lt;div class="player-box" :style="{height: `${height}px`}"&gt; &lt;div class="palyer-cover"&gt; &lt;mt-swipe :auto="3000" :showIndicators="false"&gt;
最简单的音乐播放器
11-16
最简单的本地音乐播放器 1、左键单击播放、再单击暂停 2、双击下一曲 3、ctrl 单击 添加到收藏 4 、右键编辑或播放收藏
一个简易音乐播放器(android)
03-24
NULL 博文链接：https://xiaolongque.iteye.com/blog/1108795
Android Studio 简易音乐播放器
12-02
Android Studio开发的简易音乐播放器app，读取本地SD卡指定路径的mp3文件进行播放，实现以下功能： 1. 播放、暂停，停止，退出功能； 2. 后台播放功能；（service） 3. 进度条显示播放进度、拖动进度条改变进度功能；（多线程handler） 4. 播放时图片旋转，显示当前播放时间功能；
Android简单的音乐播放器
03-11
Android，简单的播放器，利用了ObjectBox数据库，EventBus通讯，开了后台Service播放Mediaplayer
基于hbuilder开发的微信小程序音乐播放系统，可添加本地音乐（含源码）
10-19
可用hbuilder开发工具直接打开微信小程序，可直接运行，不需要调试，可直接使用。播放设置、下一首、上一首、暂停按键、播放列表等功能
C#实现基于VLC实现的简易音乐播放器.zip
07-06
C#实现基于VLC实现的简易音乐播放器，可作为毕业设计、课程设计、期末大作业等。C#实现基于VLC实现的简易音乐播放器，可作为毕业设计、课程设计、期末大作业等。C#实现基于VLC实现的简易音乐播放器，可作为毕业设计...
wav简易音乐播放器java实现
03-30
用Java简单实现了WAV音乐播放器的功能，比如添加歌曲，添加歌词，上一首，下一首，随机播放，暂停，顺序播放，进度条，控制音量等简单功能。
javaScript的序列化与反序列化
最新发布
qq_52440306的博客
02-02 1294
总的来说，javaScript对的序列化过程是对象的解析，以字符串形式存储对象结构。反序列化是解析字符串，还原成对象。理解这个过程，有助于我们解决复杂问题。
用madplay实现一个简易的音乐播放器
05-25
下面是使用Madplay实现简易音乐播放器的步骤： 1. 安装Madplay 在Linux系统中，使用以下命令安装Madplay： ``` sudo apt-get install madplay ``` 2. 创建播放列表 将需要播放的音乐文件存放在同一个目录下，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值