Share Your Music，是我最近做的一个音乐应用，在了解了一些Web Audio API的知识之后，显示闲的蛋疼的做了一个这个。就手痒的做了一个Web的音乐播放和分享应用。大概是这个样子。
这次的应用专门适应于PC端，固定宽度1000px，绝对布局。是不是很low。。。
虽然这次前端来说没用库，CSS除了引用了淘宝的Reset.css之外没有用css框架，但也是参考了众多博客，使用了许多开源项目。一一列举如下：
- 阿里的iconfont，下载字体文件的时候里里面有玉伯维护的reset css，我就直接用了。
- 设计图，来自网上的一张图，链接找不到了。。找到后一定加上。
- getID3，一个解析媒体文件的php库，很强大。
下面是参考文章和博客：
- XMLHttpRequest2 新技巧
- 探索 FileSystem API
- 用CSS创建跨浏览器的range input
- HTML5 progress元素的样式控制、兼容与实例
- Creating & Styling Progress Bar With HTML5
- The HTML5 progress Element
- 开大你的音响，感受HTML5 Audio API带来的视听盛宴
- 通过Web Audio API可视化输出MP3音乐频率波形 - OurJS
- Getting Started with Web Audio API - HTML5 Rocks
- Exploring the HTML5 Web Audio: visualizing sound | Smartjava.org
- 解决GetID3库解析中文ID3v2乱码问题
在此一一感谢。
当然坑又是踩了不少。简单说一下：
- input和span在一起的时候，设置line-height之后，两人不在一条水平线上，给每个加上个
vertical-align: middle;就行了 - 最开始的时候，没有想做后端，直接简简单的前端做了就完事了。第一种想法是使用dataurl来标识音乐，可是火狐不支持。使用web audio api的decodeAudioData倒是可以，但是就不能方便的使用audio元素控制音乐了。最后还是上传吧，这样从单一的音乐播放变成了音乐分享。后端还需要继续完善。
- 使用xhr2的时候，xhr.responseType需要在xhr.open之后，否则会报错，也是在firefox下的问题。
- chrome下，一个audio不支持多个source，所以个人觉得稳妥的做法是全部置为null重新new一个。我自己整了一个音乐的库。visual-audio.js
想起问题再补充，代码在github上，Share Your Music。
新博客地址：http://zjzhome.sinaapp.com/#/blog/article/share-your-music
时间： 2024-10-09 22:52:54