在移动互联网的年代，html5和css3已经越来越受到欢迎。那怎么利用css3做一个有特色的播放器呢？下面就按照豆瓣的音乐播放器为例子。
在html中加入audio元素，并且去掉原有的样式。做好友好提示，当用户浏览器不支持时，提示升级浏览器。
给新的播放器，添加html元素，按照播放的设计稿添加，如暂停/播放按钮、进度条、声音键、暂停键等等。
为播放器添加css样式，使得变成豆瓣播放器的样子，具体代码如下：
建立好框架后，就要给播放器添加实际功能。首先先引入各个JS文件。第一个是基本的jquery文件，网上下载最新版本即可。第二个是音乐列表，列名文件名称、地址、歌曲名称、歌手名字、封面图片和唱片，用于显示歌曲信息时用，具体如下图。第三个是实现播放功能的jquery代码。
实现播放功能的jquery代码，首先初始化代码，导入音乐文件，并且给音乐播放器添加第一首歌信息；
设置暂停、播放时间，并且设置时间变化。
继续添加时间条变化、时间标准显示和点击修改音量事件。
切换歌曲设置，上一首歌和下一首歌，并且能循环播放。
最后是歌曲音量的调整和歌曲播放结束事件。