HTML5音乐播放器(一):设计

最近在看 HTML5 的东西,觉得 audio 这个属性很有意思,自己动手设计个播放器,然后用代码实现出来,想想还挺让人兴奋的。
专辑列表

播放列表
下载PSD
设计稿主要参考 qq播放器的 web 版和 itunes,比较简约,没有什么花哨的东西,0.618真是个无敌的东西,笑而不语,哈哈。
网上讲解 HTML5 播放器的文章很多,但没有细的,都是直接把整个代码放上去,对于很多朋友来说学习起来很不方便。所以我会依照以下模块,在完成相应功能后写些教程之类的文章,并附上链接,方便查看:)
1.设计
2.基本的控制(播放,暂停,上一曲,下一曲)
3.播放进度,时间显示以及音量的调节
4.播放列表与播放方式(列表循环,单曲循环,随机播放,顺序播放)
5.同步显示歌词

发表评论

电子邮件地址不会被公开。 必填项已用*标注

18 thoughts on “HTML5音乐播放器(一):设计

  1. 用你的素材用jquery的实现了一下。有个问题想说,既然都用上了html5控件了,那有些背景图片为啥不用css3实现呢?另外建议,在珍珠港那个专辑里面,添加Attack这首曲子,很动听。

    1. 很好的建议,有时间了一定弄,这两天把歌词同步显示弄完了,找个时间更新上去,你也喜欢这个原声啊,哈哈,握个手:)

  2. 效果很好,但是为什么火狐,360都能打开http://www.feelcss.com/demo/html5-player/music-player.html,IE8就不行啊,HTML5不支持IE8,但是360不是也是IE内核吗,做开发的话,怎样让IE8也支持这个播放器啊

  3. 我想把你的这个播放器放到我网站上,具体要怎么做呢?我好像找不到你的json文件,搭建了一早上,还是没弄好。