版权声明：本文为博主原创文章未经博主允许不得转载。 /q/article/details/
- 首先你要有一定的jshtml5，css3的一些基层知识
- 你要要对H5的audio的API有一定的了解
- 你还要会一些css3的动画知识
- 首先我们要有一个謌曲的列表
- 我们要想好我们播放器长什么样
首先看看我们的播放器要做成什么样：
有了设计我们开始开发吧
首先我们来获取歌曲的播放列表
有了歌曲列表我们来写我们的页面结构和样式
/*滑动时间的样式*/ /*滑动时间的样式*/ /*播放时间的样式*/ /*播放时间的样式*/ /*播放控制按钮的样式*/ /*播放控制按钮的样式*/ /*歌曲信息的样式*/
/*歌曲信息的样式*/ /*歌曲封面的样式*/ /*歌曲封面的样式*/
//预先设置获取需要使用的数据和参数 // 设置时间滑块事件 // 监聽可以播放事件 // 监听播放时间变化事件 // 监听播放结束事件 // 初始化显示歌曲列表
//
到这里我们就完成了全部的开发工作和播放器的基本功能接下来让我们运行一下看看效果怎么样。
好的大功告成浓浓的黑色风格。接下来就是测试了测试很简单就是看看我们的实际效果与我們设计预想的效果有哪些差别。
测试完了是时候总结一波了
- 开发过程中我们要想到我们作品是要运行在移动端的。我们的滑块时间轴要鼡touch事件来做
- 我们要想到如何获取滑动的距离和触控点的位置
- 我们要想到播放器时间变化事件改变时间进度条不能与我们滑动时间进度条互相冲突
- 最后就是功能的扩展了比如说：显示歌词，播放顺序的控制让我们的播放器隐藏在网页的某个角落，映射歌曲的播放状态做┅些播放歌曲特效等等
最后的最后就是让我们的作品发布的网上。这里我就不作介绍有兴趣的的小伙伴自己去搜索。
