简易在线音乐播放器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>音乐播放器</title>
		<link rel="stylesheet" type="text/css" href="./index.css"/>
	</head>
	<body>
		<header>音乐播放器</header>
		<section>
			<ul>
				<li>Here We Are Again</li>
				<li>不谓侠</li>
				<li>多想在平庸的生活拥抱你</li>
				<li>浪子回头</li>
				<li>那个女孩</li>
				<li>那女孩对我说</li>
				<li>平胸女子</li>
				<li>情深深雨濛濛</li>
				<li>雅俗共赏</li>
				<li>野狼disco</li>
				<li>这一生关于你的风景</li>
			</ul>
		</section>
		<audio src="" id="ado" controls="controls"></audio>
		<footer>
			当前播放的是：<span id="con"></span>
		</footer>
	</body>
	<script src="./index.js" type="text/javascript" charset="utf-8"></script>
</html>

/* 写样式通常首先-清空所有标签的内外边距 */
*{
	margin: 0;
	padding: 0;
}

/*  */
body{
	width: 31.25rem;
	overflow: auto;		/* overflow 属性规定当内容溢出元素框时发生的事情 */
	margin: 20px auto;  /* 外边距 上下20 水平居中 */
}

/* 设置头部和底部样式 */
header,footer{
	height: 40px;
	line-height: 40px;  /* 与模块同高 可以字体上下居中显示 */
	background: #808080;
	text-align: center; /* 文本居中 */
}

/* 给音乐列表写样式 */
li{
	height: 50px;
	line-height: 50px;
	border: 1px solid red;  /* 添加边框属性 */
	border-top: none;  		/* 上下线条重合 so清空上线条 */
	font-size: 15px;		/* 字体大小设置 */
	text-indent: 20px;		/* text-indent 属性规定文本块中首行文本的缩进。 */
							/* 注释：允许使用负值。如果使用负值，那么首行会被缩进到左边 */
	list-style: none;		/* 清空一下列表的样式-列表前方的点或数字 */
}


/* 音频文件的样式设置 */
#ado{
	width: 100%;
	height: 20px;
	margin-top: 10px;
}

/* 设置控制列表的类名样式 */
.sty{
	background: #FF0000;
}

var lis = document.getElementsByTagName('li');   //获取dom元素
var ado = document.getElementById('ado');
var con = document.getElementById('con');
//创建数组存放音乐文件路径，通过下标找到相应文件
var arr = [ 'audio/Here We Are Again.mp3',
			'audio/不谓侠.mp3',
			'audio/多想在平庸的生活拥抱你.mp3',
			'audio/浪子回头.mp3',
			'audio/那个女孩.mp3',
			'audio/那女孩对我说.mp3',
			'audio/平胸女子.mp3',
			'audio/情深深雨濛濛.mp3',
			'audio/雅俗共赏.mp3',
			'audio/野狼disco.mp3',
			'audio/这一生关于你的风景.mp3']
//通过循环遍历的方式添加点击事件
for (var i = 0; i < lis.length; i++) {
	lis[i].onclick = function(){
		for (var i = 0; i < lis.length; i++) {
			if (this === lis[i]) {
				lis[i].className = 'sty';
				ado.src = arr[i];
				ado.play();
				con.innerHTML = lis[i].innerHTML;
				var a = i;
				//通过ended事件监听是否播放完毕
				ado.onended = function(){
					a++;
					if(a>lis.length-1){
						a = 0;
					}
					//通过for循环清空所有样式列表
					for (var j = 0; j < lis.length; j++) {
						lis[j].className = '';
					}
					//通过下标a给相应的列表进行样式的修饰和音乐的播放
					con.innerHTML = lis[a].innerHTML;
					ado.src = arr[a];
					ado.play();
					lis[a].className = 'sty';
				}
			} else{
				lis[i].className = '';
			}
		}
	}
}