【dunhuangmi原创】这篇用HTML5做个循环播放歌曲的音频播放器。视频音频的控制方法差不多，因此做视频播放器时也可以参考本文。
为了省事，没有引用jquery，所有用到的元素都用id而不是class来控制，各id名字起的也不好，结构性比较差，你们看着有点晕，我写的也有点晕，呵呵。还有时间有限，鼠标事件控制尽量用最简单的方法来写，所以后面看到音量控制那里写的很不好，有bug。
UI模仿doubanfm.com做的，很简单的样子：

想省事的话，audio和vedio都可以用自带的播放控件，但在各个浏览器里显示的效果均不同，无法改变，为了好效果还是要自己做播放控件。

下面开始写代码。
一、HTML结构

	 <div class="songlistbox">
		<ul id="songlist">
		
		</ul>
	 </div>
     <div id="playerbox">
		<div class="picarea"><img src="" id="music-logo"/></div>
		<div class="infoarea">
			<audio id="music">
				<source src="" id="music-ogg" type="audio/ogg" />
				<source src="" id="music-mp3" type="audio/mpeg" />
				你的浏览器不支持HTML5播放器，请升级后再试
			</audio>
			<nav>	
				<h2 id="singer">Michael Jackson</h2>
				<h3 id="songname">&lt;The Essential Michael&gt; 2005</h3>
				<div id="buttons">
					<a id="playButton" class="play" href="javascript:;"></a>
				</div>
				<div id="defaultBar">
					<div id="progressBar"></div>
				</div>
				<div class="prenextbar">
					<a id="pre" href="javascript:;">上一首</a>|
					<a id="next" href="javascript:;">下一首</a>
				</div>
				<div id="volume">
					<a href="javascript:;" id="volume-icon"></a>
					<div id="volume-box">
						<div class="volume-max">
							<div id="volume-bar"></div>
						</div>
					</div>
				</div>
				<div style="clear:both"></div>
			</nav>
		</div>
     </div>

其中#playButton是play键和pause键，#volume-box是音量滑动条的外框，.volume-max是滑动条底色（深灰），#volume-bar是滑动条前色（浅灰），鼠标操作是通过控制#volume-bar的高度，露出不同的volume-max大小。
#defaultBar是播放时间进度条的背景底色（浅灰），#progressBar是进度条的浅色（绿色），鼠标直接通过改变#progressBar的长短控制当前播放的时间进度。

?

二、CSS部分

body,div,p,nav,audio,h1,h2,h3,img,a,ul,li,ol,dd,dt,dl,h1,h2,h3{margin:0;padding:0;font:12px/1.667 'Helvetica Neue','Tahoma','Arial';}
body{background:#e1e8e5;}
ul,li,ol{list-style:none;}
#playerbox{background:#fff;position:absolute;left:60px;top:100px;width:510px;-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 5px 3px  rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0, 0, 0, 0.2);font-size:12px}
audio{position:absolute;top:0;left:0}
.picarea{float:left;width:245px;padding:5px;}
.picarea img{width:245px;float:left}
.infoarea{float:left;width:225px;padding:20px 10px;}
h2{font-weight:normal;font-size:24px;line-height:30px;}
h3{font-weight:normal;font-size:12px;line-height:20px;margin-bottom:10px;}
nav{margin:5px 0px;}
#buttons{position:absolute;right:10px;top:0;}
#buttons .play{display:inline-block;height:26px;width:26px;background:url(icons.jpg) -71px 0 no-repeat;}
#buttons .play:hover{opacity:0.5}
#buttons .pause{display:inline-block;height:26px;width:26px;background:url(icons.jpg) 0 0 no-repeat;}
#buttons .pause:hover{opacity:0.5}
#defaultBar{position:relative;width:200px;height:8px;border:0;background:#e5e5e8;float:left;}
#defaultBar:hover{opacity:0.6}
/*progressBar在defaultBar内部*/
#progressBar{position:absolute;width:0px;height:8px;background:#9dd6c5;}
.prenextbar{position:absolute;bottom:20px;width:200px;height:20px}
.prenextbar a{padding:0 20px;color:rgba(0,0,0,0.5);text-decoration:none}
.prenextbar a:hover{color:#0