如何做一个CSS3音乐播放器

1、在html中加入audio元素，并且去掉原有的样式。做好友好提示，当用户浏览器不支汤手刿怫持时，提示升级浏览器。

2、给新的播放器，添加html元素，按照播放的设计稿添加，如暂停/播放按钮、进度条、声音键、暂停键等等。

3、为播放器添加css样式，使得变成豆瓣播放器的样子，具体代码如下：

4、建立好框架后，就要给播放器添加实际功能。首先先引入各个亭盍誓叭JS文件。第一个是基本的jquery文件，网上下载最新版本即可。第二个是音乐列表，列名文件名称、哪纳紧萄地址、歌曲名称、歌手名字、封面图片和唱片，用于显示歌曲信息时用，具体如下图。第三个是实现播放功能的jquery代码。

5、实现播放功能的jquery代码，首先初始化代码，导入音乐文件，并且给音乐播放器添加第一首歌信息；

6、设置暂停、播放时间，并且设置时间变化。

7、继续添加时间条变化、时间标准显示和点击修改音量事件。

8、切换歌曲设置，上一首歌和下一首歌，并且能循环播放。

9、最后是歌曲音量的调整和歌曲播放结束事件。