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操作界面