本篇教程探讨了如何使用Audio API设计绚丽的HTML5音乐播放器，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

HTML5 有两个很炫的元素，就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器，制作一些效果很不错的应用。

无论是视屏还是音频，都是一个容器文件，包含了一些音频轨道，视频轨道和一些元数据，这些是和你的视频或者音频控件绑定到一块的，这样才形成了一个完整的播放组件。




 常用的控制函数：

函数
 

动作

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 设计出灵活的应用。

 

接下来，我们设计一款适合我们离线工作系统需要的播放器：
View Code

 

画好这个结构之后，我们就来写相应的CSS样式了： 
View Code

 

页面的元素和CSS样式写完之后，就可以看到一个漂亮的音乐播放器的模型了，如图：



   

 

只是现在的播放器上面的按钮都是空壳，没有任何功能。所以，现在我们就来添加这些功能 ， 脚本的顶层框架就用Jquery。 
View Code

  

至此，一款播放器做完了，默认执行的是列表循环播放，包含了上一首，下一首，播放，暂停，播放进度条调整，音量调进度条整，列表选择等功能。播放的歌曲是固定的写在列表里面的，我喜欢的ESON的照片也是贴上去的，这些都可以做成动态获取或则与服务器交互，有兴趣的可以去试一下，扩展一下。

本来准备在我们的离线工作系统中添加音频播放器，后来需求变更，放弃了，所以这个版本不是完善的版本。视频播放器的功能大同小异，也可以自己试试。    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！