上图便是这个音频播放器的UI界面图，里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成，看上去有难度的地方就只有CD和打碟器的制作了，在歌曲播放时CD和打碟器都是具有动画交互效果的，这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~
因为这一期的教程主要是为了展示Html5新增的<audio>标签和audio元素的Dom API的使用，所以播放器UI的绘制在这里就不详细解释了，有疑问的可以自行查看案例的CSS文件的注释或者在下方留言。
主要功能：
一、播放、暂停、上一首、下一首、音量增减
二、点击CD可以打开和关闭播放列表
三、可以拖动本地音乐文件到播放器进行播放
Html结构
复制代码
<div id=”myAudio” style=”margin:0 auto;”>
<audio>
<source title=”王若琳 – Wild World.mp3″ src=”<a%20href=”http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3″>http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3</a>” />
<source title=”韦礼安 – 还是会.mp3″ src=”<a%20href=”http://stream18.qqmusic.qq.com/31005070.mp3″>http://stream18.qqmusic.qq.com/31005070.mp3</a>” />
<source title=”王若琳 – Lost in paradise.mp3″ src=”<a%20href=”http://stream12.qqmusic.qq.com/30416842.mp3″>http://stream12.qqmusic.qq.com/30416842.mp3</a>” />
</audio>
<div class=”music_info clearfix”>
<div class=”cd_holder”><span class=”stick”></span><div class=”cd”></div></div>
<div class=”meta_data”>
<span class=”title”></span>
<div class=”rating”>
<div class=”starbar”>
<ul class=”current-rating” data-score=”85″>
<li class=”star5″></li>
<li class=”star4″></li>
<li class=”star3″></li>
<li class=”star2″></li>
<li class=”star1″></li>
</ul>
</div>
</div>
<div class=”volume_control”>
<a class=”decrease”>a</a>
<span class=”base_bar”>
<span class=”progress_bar”></span>
<a class=”slider”></a>
</span>
<a class=”increase”>b</a>
