PlayerHTML5 音樂播放器
Player 是 HTML5 版本音樂播放器,支持 iOS 設(shè)備,演示地址
功能說明
支持iOS設(shè)備,但是iOS不支持自動下一曲,這是iOS本身限制,支持touch事件
支持播放模式:循環(huán),單曲循環(huán)
支持歌詞實時顯示,包括顯示到title
支持靜音,iOS不支持……
jQuery版本
withjQuery里面是jquery版本的播放器,之前只是想模仿下亦歌,于是就用jQ寫了,后來大家反映可以搞個純javascript的html5版本,于是出了最新的這個版本
簡單說下歌詞顯示算法
首先異步獲取lrc內(nèi)容(loadLrc),然后使用正則解析lrc(parseLrc),得到格式如下:
{
words:[],//歌詞數(shù)組
times:[],//時間數(shù)組
data:{}//歌曲信息:作者、歌手、長度;有些lrc不會包括此部分,或者不全
}
然后循環(huán)去除word(歌詞)和time(歌詞對應(yīng)時間),生成html,其中會計算出來marginTop位置:
<p data-lrctime="time" data-lrctop="top">word</p>
當(dāng)歌曲播放時,實時獲取當(dāng)前播放時間audio.currentTime(為了提高歌詞響應(yīng)速度會提前100ms),然后遍歷歌詞 nodelist,通過計算data-lrctime,取出當(dāng)前播放進度對應(yīng)的P元素,根據(jù)此P元素data-lrctop設(shè)置marginTop,通過 css3實現(xiàn)動畫。
版本庫地址
支持三種訪問協(xié)議:
-
HTTP協(xié)議:
https://[email protected]/ksky521/player.git。 -
Git協(xié)議:
git://github.com/ksky521/player.git。 -
SSH協(xié)議:
ssh://[email protected]:ksky521/player.git。
克隆版本庫
操作示例:
$ git clone git://github.com/ksky521/player.git
聯(lián)系方式
作者博客:js8.in
作者新浪微博:@三水清
特別鳴謝
感謝@aricme哥們周末幫我設(shè)計html5操作界面
