音乐播放器

音乐播放器 袁德灿 •
文章标签: 音乐播放器
12 

body,dl,dt,dd{
	margin: 0px;
	padding: 0px;
	list-style: none;
	font-family: "隶书";
	font-size: 20px;
}
#overall{
	width: 600px;
	height: 600px;
	margin: 0px auto;
	background: url(../img/music-bg.jpg)-80px -150px no-repeat;
	position: relative;
}
#list{
	width: 200px;
	height: 85%;
	float: left;
}
#list-music{
	margin-top: 40px;
	margin-left: 30px;
}
#list-music dd{
	color: rgba(0,0,0,0);
	background: linear-gradient(to right,red,yellow,blue);
	-webkit-background-clip: text;
	margin-left: 10px;
}
#list dt,dd{
	cursor: pointer;
}
#content{
	float: right;
	width: 400px;
	height: 85%;
	text-align: center;
}
#content-txt{
	color: rgba(0,0,0,0);
	background: linear-gradient(to right,red,yellow,blue);
	-webkit-background-clip: text;
	padding: 100px 50px;
	margin: 200px 20px 0px 20px;
}
#music{
	color: white;
	font-size: 15px;
	width: 100%;
	height: 15%;
	position: absolute;
	bottom: 0px;
	padding-left: 20px;
}
#music-time{
	margin: 0px 20px;
}
#music-can{
	margin-left: 20px;
}
#volume span:first-child,span:last-child{
	cursor: pointer;
}
.control{
	float: left;
	line-height: 70px;
}
#ado{
	display: none;
}
#note{
	position: absolute;
	color: yellow;
	font-size: 30px;
	display: none;
}

<!DOCTYPE html>
<html manifest="../txt/music.appcache">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/music.css"/>
		<script src="../js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/music.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="overall">
			<div id="list">
				<dl id="list-music">
					<dt><canvas id="list-txt" width="120px" height="30px"></canvas></dt>
				</dl>
			</div>
			<div id="content">
				<div id="content-txt"></div>
			</div>
			<div id="music">
				<canvas id="top-music" class="control" width="50px" height="80px"></canvas>
				<canvas id="pause-key" class="control" width="50px" height="80px"></canvas>
				<canvas id="bottom-music" class="control" width="50px" height="80px"></canvas>
				<canvas id="music-can" class="control" width="200px" height="80px"></canvas>
				<div id="music-time" class="control">00:00/00:00</div>
				<div id="volume" class="control">
					<span id="volume-jian">-</span>
					<span id="volume-num">100</span>
					<span id="volume-jia">+</span>
				</div>
			</div>
		</div>
		<audio controls="controls" id="ado" autoplay="autoplay">
		</audio>
		<div id="note">♪</div>
	</body>
</html>

$(function(){
	var div1 = document.getElementById("overall");
	$("#music-can").click(function(e){ //点击改变歌曲进度
	    div2 = document.getElementById("music-can");
	    //获取左边与父元素的距离
	    gaogu = div1.offsetLeft+div2.offsetLeft;
	    //赋值
	    time.currentTime=((e.pageX-gaogu)/can.width)*time.duration;
	});
	var time = document.getElementById("ado");//音频
	//总长度
	var can = document.getElementById("music-can");
	var ctx = can.getContext("2d");
	canLength();
	//上一首按钮
	var canTop = document.getElementById("top-music");
	var ctxTop = canTop.getContext("2d");
	ctxTop.beginPath();
	ctxTop.moveTo(10,35);
	ctxTop.lineTo(25,25);
	ctxTop.lineTo(25,45);
	ctxTop.lineTo(10,35);
	ctxTop.closePath();
	ctxTop.fillStyle = "white";
	ctxTop.fill();
	//暂停播放按钮
	var cankey = document.getElementById("pause-key");
	var ctxkey = cankey.getContext("2d");
	canPauseKey();
	//下一首按钮
	var canbt = document.getElementById("bottom-music");
	var ctxbt = canbt.getContext("2d");
	ctxbt.beginPath();
	ctxbt.moveTo(10,25);
	ctxbt.lineTo(25,35);
	ctxbt.lineTo(10,45);
	ctxbt.lineTo(10,25);
	ctxbt.closePath();
	ctxbt.fillStyle = "white";
	ctxbt.fill();
	//绘制歌单文本
	var canTxt = document.getElementById("list-txt");
	var ctxTxt = canTxt.getContext("2d");
	ctxTxt.font = "28px 隶书";
	ctxTxt.strokeStyle = "#444";
	ctxTxt.strokeText("我的歌单",0,20);
	//歌单点击隐藏和显示
	$("#list-music dt").click(function(){
		$("#list-music dd").toggle();
	});
	//获取歌曲
	var ajax = new XMLHttpRequest;
	ajax.open("GET","../txt/music.txt",true);
	ajax.send(null);
	var ado = document.getElementById("ado");
	var music = document.getElementById("list-music");
	var div3 = document.getElementById("pause-key");
	var not = $("#note");
	ajax.onreadystatechange = function(){
		if(ajax.status==200 && ajax.readyState==4){
			var stuMusic = ajax.responseText;
			js = eval("("+stuMusic+")");
			for (var i in js) {
				var dd = document.createElement("dd");
				dd.innerHTML = i;
				music.appendChild(dd);
			}
			$("#list-music dd").click(function(e){ //歌单点击事件
				for (var i in js) { //循环所有歌曲
					if(this.innerText == i){ //判断点击的歌曲
						ado.src = js[i];
					}
				}
				show();//调用进度条和时间重绘函数
				redraw();
				not.css({"left":e.pageX+"px","top":e.pageY+"px","display":"block"});//音符起点定位
				lf = div1.offsetLeft+div3.offsetLeft+10;//获取左边的距离
				not.stop().animate({"left":""+lf+"px","top":"520px"},800,function(){ //音符终点定位
					not.css("display","none");
				});
			});
		}
	};
	//上一首
	$("#top-music").click(function(){
		prevMusic();
	});
	function prevMusic(){
		currentMusic();//获取当前播放歌曲
		for (var k=0; k<d.length; k++) {
			if(cm == d[k].innerHTML){
				if(k==0){
					ado.src = js[d[d.length-1].innerHTML];
				}else{
					ado.src = js[d[k-1].innerHTML];
				}
				show();//调用进度条和时间重绘函数
				redraw();
				return;
			}
		}
	}
	//下一首
	$("#bottom-music").click(function(){
		nextMusic();
		redraw();
	});
	time.onended = function(){
		nextMusic();
	}
	//键盘控制音量和切歌
	$("body").keydown(function(){
		var value= event.keyCode;
		if(value==37){
			prevMusic();
		}
		if(value==39){
			nextMusic();
			redraw();
		}
		if(value==38){
			if(vol<100){
				vol+=10;
				time.volume = time.volume+0.1;
			}else{
				alert("已经是最大声了！");
			}
			$("#volume span:eq(1)").html(vol);
		}
		if(value==40){
			if(vol>0){
				vol-=10;
				time.volume = time.volume-0.1;
			}else{
				alert("已经是最小声了！");
			}
			$("#volume span:eq(1)").html(vol);
		}
		if(value==32){
			if(ado.src==""){
				ado.src = js[$("dd:eq(0)").html()];
				show();//调用进度条和时间重绘函数
			}
			cankey.height = cankey.height;
			if(time.paused){
				time.play();//播放
				canPlayKey();//调用绘制播放按钮函数
			}else{
				time.pause();//暂停
				canPauseKey();//调用绘制暂停按钮函数
			}
		}
	});
	//音量控制事件
	var vol = 100;//总音量
	$("#volume span:eq(0),span:last").click(function(){
		if(this.innerHTML == "-"){
			if(vol>0){
				vol-=10;
				time.volume = time.volume-0.1;
			}else{
				alert("已经是最小声了！");
			}
		}else{
			if(vol<100){
				vol+=10;
				time.volume = time.volume+0.1;
			}else{
				alert("已经是最大声了！");
			}
		}
		$("#volume span:eq(1)").html(vol);
	});
	//暂停播放按钮点击事件
	$("#pause-key").click(function(){
		if(ado.src==""){
			ado.src = js[$("dd:eq(0)").html()];
			show();//调用进度条和时间重绘函数
		}
		cankey.height = cankey.height;
		if(time.paused){
			time.play();//播放
			canPlayKey();//调用绘制播放按钮函数
		}else{
			time.pause();//暂停
			canPauseKey();//调用绘制暂停按钮函数
		}
	});
	var d = document.getElementsByTagName("dd");
	var cm;
	function nextMusic(){ //播放下一首
		currentMusic();//获取当前播放歌曲
		for (var k=0; k<d.length; k++) {
			if(cm == d[k].innerHTML){
				if(k==d.length-1){
					ado.src = js[d[0].innerHTML];
				}else{
					ado.src = js[d[k+1].innerHTML];
				}
				show();//调用进度条和时间重绘函数
				return;
			}
		}
	}
	function currentMusic(){ //获取当前播放歌曲
		for (var i in js) {
			if(js[i]==time.attributes.src.nodeValue){
				cm = i;
			}
		}
	}
	function redraw(){
		cankey.height = cankey.height;
		if(time.paused){//播放
			canPlayKey();//调用绘制播放按钮函数
		}else{//暂停
			canPauseKey();//调用绘制暂停按钮函数
		}
	}
	function canPlayKey(){ //播放按钮
		ctxkey.beginPath();
		ctxkey.moveTo(13,25);
		ctxkey.lineTo(13,45);
		ctxkey.closePath();
		ctxkey.moveTo(27,25);
		ctxkey.lineTo(27,45);
		ctxkey.closePath();
		ctxkey.strokeStyle = "white";
		ctxkey.stroke();
	}
	function canPauseKey(){ //暂停按钮
		ctxkey.beginPath();
		ctxkey.moveTo(15,25);
		ctxkey.lineTo(30,35);
		ctxkey.lineTo(15,45);
		ctxkey.lineTo(15,25);
		ctxkey.closePath();
		ctxkey.fillStyle = "white";
		ctxkey.fill();
	}
	function show(){ //时间显示和进度条
		var curr = 0;//秒
		var minute = 0;//分钟
		var dura = 0;//总时长分钟
		var duras = 0;//总时长秒钟
		var plan = 0;//进度条
		time.ontimeupdate=function(){ //总时长和播放时长
			curr = time.currentTime.toFixed(0);//获取当前播放进度
			minute=parseInt(time.currentTime.toFixed(0)/60);//获取当前播放分钟
			curr=time.currentTime.toFixed(0)-(minute*60);//获取当前播放秒数
			dura = (time.duration/60).toFixed(0);//获取总时长分钟数
			duras = (time.duration%60).toFixed(0);//获取总时长秒数
			if(minute<10)
				minute="0"+minute;
			if(curr<10)
				curr="0"+curr;
			if(dura<10)
				dura="0"+dura;
			if(duras<10)
				duras="0"+duras;
			if(isNaN(dura))
				dura = "00";
			if(isNaN(duras))
				duras = "00";
			$("#music-time").html(minute+":"+curr+"/"+dura+":"+duras);
			can.height = can.height;//通过改变Canvas高度达到重绘
			canLength();//调用绘制进度条总长度函数
			plan = ((time.currentTime/time.duration)*can.width).toFixed(0);//获取当前进度的位置
			ctx.beginPath();//开始绘制当前进度条
			ctx.moveTo(0,35);//起点
			ctx.lineTo(plan,35);//终点
			ctx.closePath();
			ctx.strokeStyle = "red";//填充颜色
			ctx.stroke();
			ctx.arc(plan,35,5,0,2*Math.PI);
			ctx.fillStyle = "red";
			ctx.fill();
		}
		currentMusic();
		$("#content-txt").html("当前播放歌曲<br />"+cm).css("background-color","rgba(100,100,100,0.2)");
	}
	function canLength(){ //绘制进度条总长度
		ctx.beginPath();
		ctx.moveTo(0,35);
		ctx.lineTo(200,35);
		ctx.strokeStyle = "#ddd";
		ctx.closePath();
		ctx.stroke();
	}
});

转载@何求龙

({{handupNumber}}) ({{favoriteNumber}})
还能输出{{restrictNumber}}个字符  

  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :