PlayerHTML5 音樂(lè)播放器

Player 是 HTML5 版本音樂(lè)播放器，支持 iOS 設(shè)備，演示地址

功能說(shuō)明

• 支持iOS設(shè)備，但是iOS不支持自動(dòng)下一曲，這是iOS本身限制，支持touch事件

• 支持播放模式：循環(huán)，單曲循環(huán)

• 支持歌詞實(shí)時(shí)顯示，包括顯示到title

• 支持靜音，iOS不支持……

jQuery版本

withjQuery里面是jquery版本的播放器，之前只是想模仿下亦歌，于是就用jQ寫了，后來(lái)大家反映可以搞個(gè)純javascript的html5版本，于是出了最新的這個(gè)版本

簡(jiǎn)單說(shuō)下歌詞顯示算法

首先異步獲取lrc內(nèi)容（loadLrc），然后使用正則解析lrc（parseLrc），得到格式如下：

{
    words:[],//歌詞數(shù)組
    times:[],//時(shí)間數(shù)組
    data:{}//歌曲信息：作者、歌手、長(zhǎng)度；有些lrc不會(huì)包括此部分，或者不全
}

然后循環(huán)去除word（歌詞）和time（歌詞對(duì)應(yīng)時(shí)間），生成html，其中會(huì)計(jì)算出來(lái)marginTop位置：

<p data-lrctime="time" data-lrctop="top">word</p>

當(dāng)歌曲播放時(shí)，實(shí)時(shí)獲取當(dāng)前播放時(shí)間audio.currentTime（為了提高歌詞響應(yīng)速度會(huì)提前100ms），然后遍歷歌詞 nodelist，通過(guò)計(jì)算data-lrctime，取出當(dāng)前播放進(jìn)度對(duì)應(yīng)的P元素，根據(jù)此P元素data-lrctop設(shè)置marginTop，通過(guò) css3實(shí)現(xiàn)動(dòng)畫。

版本庫(kù)地址

支持三種訪問(wè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 。

克隆版本庫(kù)

操作示例：

$ git clone git://github.com/ksky521/player.git

聯(lián)系方式

作者博客：js8.in

作者新浪微博：@三水清

特別鳴謝

感謝@aricme哥們周末幫我設(shè)計(jì)html5操作界面