HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素，就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器，制作一些效果很不错的应用。
无论是视屏还是音频，都是一个容器文件，包含了一些音频轨道，视频轨道和一些元数据，这些是和你的视频或者音频控件绑定到一块的，这样才形成了一个完整的播放组件。
浏览器支持情况：
|
浏览器 |
支持情况 |
编解码器 |
|
Chrome |
3.0 |
Theora 、 Vorbis 、Ogg H.264 、 AAC 、MPEG4 |
|
FireFox |
3.5 |
Theora 、 Vorbis 、Ogg |
|
IE |
不支持 |
无 |
|
Opera |
10.5 |
Theora 、 Vorbis 、Ogg（10.5） VP8、Vorbis 、 WebM（10.6） |
|
Safari |
3.2 |
H.264 、 ACC 、MPEG4 |
常用的控制函数：
|
函数 |
动作 |
|
load() |
加载音频、视频软件 |
|
play() |
加载并播放音频、视频文件或重新播放暂停的的音频、视频 |
|
pause() |
暂停出于播放状态的音频、视频文件 |
|
canPlayType(obj) |
测试是否支持给定的Mini类型的文件 |
只读的媒体属性：
|
只读属性 |
值 |
|
duration |
获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN |
|
paused |
如果媒体文件被暂停，则返回true，否则返回false |
|
ended |
如果媒体文件播放完毕，则返回true |
|
startTime |
返回起始播放时间 |
|
error |
返回错误代码 |
|
currentSrc |
以字符串形式返回正在播放或已加载的文件 |
可脚本控制的属性值：
|
属性 |
值 |
|
autoplay |
自动播放已经加载的的媒体文件 |
|
loop |
为true的时候则设定为自动播放 |
|
currentTime |
以s为单位返回从开始播放到目前所花的时间 |
|
controls |
显示或者隐藏用户控制界面 |
|
volume |
音量值,从0.0至1.0之间 |
|
muted |
设置是否静音 |
|
autobuffer |
是否进行缓冲加载 |
首先,我们在页面中添加一个音频元素：
<audio src="../Media/The sound of silence.mp3" controls="controls" autoplay="autoplay"></audio>
在谷歌Chrome浏览器中的效果如下：
controls指的是用户控制界面,所以我们可以在Web页面中看到上面这个操作面板，包括播放和暂停，播放进度条，音量进度条，和进度时间显示等。autoplay 指的是自动播发已加载的媒体文件，所以我们一打开页面就可以直接播放了
HTML5 Audio API 的界面很强大，功能也很完善，但是我们的Web应用会根据不同的需求、设计风格和界面颜色来要求不同的播放器样式和功能，这就要求我们能基于他们的API 设计出灵活的应用。
接下来，我们设计一款适合我们离线工作系统需要的播放器：
1 //在页面放置一个audio元素，因为我们使用自己设计的播放界面，所以这边不用他们的controls。 2 <audio id="myMusic" > </audio> 3 4 //这边放置一个隐藏域，他的作用是存放媒体文件暂停的时间点 5 <input id="PauseTime" type="hidden" /> 6 7 //编写音乐盒的界面 8 <div class="MusicBox" > 9 10 <div class="LeftControl" ></div> //上一个媒体文件的控制图标 11 <div id="MainControl" class="MainControl" ></div> //开始和暂停的控制图标 12 <div class="RightControl" ></div> //下一个媒体文件的控制图标 13 14 <div class="ProcessControl">//进度条 15 <div class="SongName">Ben's Music Box!</div> //媒体文件标题 16 <div class="SongTime">00:00 | 00:00</div> //时间进度 17 <div class="Process" ></div> //全部时长的进度条 18 <div class="ProcessYet"></div> //已播放时长的进度条 19 </div> 20 21 <div class="VoiceEmp"></div> //静音图标 22 <div class="VoidProcess" ></div> //全音量进度条 23 <div class="VoidProcessYet" ></div> //当前音量进度条 24 <div class="VoiceFull" ></div>//全音量图标 25 <div class="ShowMusicList" ></div> //显示或隐藏媒体文件列表图标 26 27 </div> 28 29 30 <div class="MusicList"> //媒体文件列表区域 31 <div class="Author"></div> //当前媒体文件的 32 <div class="List"> //媒体文件列表 33 34 <div class="Single" > //单个媒体文件 35 <span class="SongName" KV="Fate" >01.Fate</span> 36 </div> 37 38 </div> 39 </div>
画好这个结构之后，我们就来写相应的CSS样式了：
View Code
页面的元素和CSS样式写完之后，就可以看到一个漂亮的音乐播放器的模型了，如图：
只是现在的播放器上面的按钮都是空壳，没有任何功能。所以，现在我们就来添加这些功能 ， 脚本的顶层框架就用Jquery。
View Code
至此，一款播放器做完了，默认执行的是列表循环播放，包含了上一首，下一首，播放，暂停，播放进度条调整，音量调进度条整，列表选择等功能。播放的歌曲是固定的写在列表里面的，我喜欢的ESON的照片也是贴上去的，这些都可以做成动态获取或则与服务器交互，有兴趣的可以去试一下，扩展一下。
本来准备在我们的离线工作系统中添加音频播放器，后来需求变更，放弃了，所以这个版本不是完善的版本。视频播放器的功能大同小异，也可以自己试试。
本文源码下载：CRX_Mail_Audio
