將之前搗騰的音樂頻譜效果加上一個播放列表就成了現在的喵喵播放器（Meow meow Player,額知道這名字很二很裝萌~），全HTML5打造的網頁程序，可本地運行也可以掛服務器上用。
在線Demo及源碼
你可以訪問下面的地址打開在線demo：
http://wayou.github.io/MeowmeowPlayer/
項目github地址：
https://github.com/Wayou/MeowmeowPlayer/
示例音樂下載，提供給硬盤里沒有Music的同學：http://pan.baidu.com/s/1eQqqSfS
歡迎喜歡的朋友前去星(star)我叉(fork)我或者下載代碼自己研究。
Note
- 支持文件拖拽上傳，同時你也可以點擊頁面上的'Add'來添加音樂文件
- 對文件大小做了限制，只處理30M以下的文件，這是為了防止內存上漲把瀏覽器爆掉
- 同時在對文件解碼時對頁面上可進行的操作進行了屏蔽，為是防止一些非法操作導致邏輯出錯
- 程序可能報bug，但娛樂基本夠用
- 目前，列表的打亂功能還沒做好，即'Shuffle'(Update:此功能已實現)
- 缺憾是沒有實現暫停功能，因為web audio api沒有提供相關接口
瀏覽器兼容性
工作於支持Web Audio API 的瀏覽器，開發測試的瀏覽器為Chrome 33, Firefox 28.
|
|
|
| Chrome |
Firefox |
技術點
基本上來說，用到了以下一些技術：
- Web Audio API
- HTML5 canvas繪圖
- HTML5 requstAnimation繪制動畫
- CSS3 anmation, transition, transform ,etc.
- FileReader JavaScript中用於文件獲取
其中，有些代碼參考甚至直接來自網上現成的代碼：
- 帶有漸變且半透明效果的遮罩用於頻譜圖的鏡像，參考了代碼引用1的代碼
- 用於播放列表的Win8 進度效果的CSS3實現來自codepen上的代碼，地址見引用2
問題及交流
歡迎技術愛好者，極客朋友，前端開發人員，喜歡搗騰新東西以及廣大喜歡炫酷新鮮玩意兒的用戶朋友們反饋問題或者提建議。
Reference
- http://hammerspace.co.uk/2012/02/css3-gradients-with-transparency
- http://codepen.io/jameswyse/pen/uisvk
- http://www.cnblogs.com/Wayou/p/html5_audio_api_visualizer.html