上图便是这个音频播放器的UI界面图，里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成，看上去有难度的地方就只有CD和打碟器的制作了，在歌曲播放时CD和打碟器都是具有动画交互效果的，这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~
因为这一期的教程主要是为了展示Html5新增的<audio>标签和audio元素的Dom API的使用，所以播放器UI的绘制在这里就不详细解释了，有疑问的可以自行查看案例的CSS文件的注释或者在下方留言。
主要功能：一、播放、暂停、上一首、下一首、音量增减
二、点击CD可以打开和关闭播放列表
三、可以拖动本地音乐文件到播放器进行播放
Html结构
audio标签
在上面的结构中我们可以发现这个html5新增的audio标签，它具有一个controls属性，顾名思义它是播放器的控制器，controls 属性规定浏览器为音频提供播放控件，例如在chrome浏览器下的audio标签中设置该属性，播放器就会以如下的形式出现，如果不设置该属性，则会是空白一片
但由于在不同浏览器下的对audio标签渲染效果不一，这种简易的方法并不适合在跨浏览器下的使用，并且浏览器默认的播放器控件所提供的功能实在是太少了。。所以我们一般通过不设置该属性的方法来隐藏浏览器的默认播放控件，并且手工加入额外的标签和样式来定制播放器的UI界面。
播放控制在播放器的UI界面绘制完成后，首先我们需要做的是为播放、上一首、下一首这三个主要的控制按钮添加对应的事件监听。
上述的按钮点击的事件监听中，我们通过调用原始的audio元素的play()和pause()方法来控制音频的播放和暂停。另外audio元素提供了currentSrc属性，该属性表示当前播放文件的文件源，我们通过设置该属性来控制当前播放的歌曲曲目。
音量控制接下来我们来对音量条两边的两个小喇叭添加事件监听，使得通过点击左右两个小喇叭可以减小和增加当前播放的音量。要设置播放器的音量，我们可以调用audio元素中所提供的volume属性。volume值最大为1，最小为0，在这里我们通过每次点击喇叭增减0.1的音量来实现音量的控制。当然你也可以使用别的值。但要注意的是javascript语言不能对小数提供精准的控制，所以每次减少0.1的音量时实际上减少的音量是稍微地大于0.1的，这导致当连续点击9次音量减少的按钮时剩下0.09xxxx的音量，然后你会发现播放器怎么无法静音了。。。当然这个问题是很容易解决的（如下所示），只是稍作提醒。
volume < 0 && (volume = 0)