JS控制网页lrc同步播放
这个是早就想写的，呵呵。不过是 IEonly的，没办法。
如果需要控制播放器的width，height等属性，可以使用lrcPlayer .getPlayer()获得实例。
************************************************
<html>
<title>lrc歌词实时播放</title>
<body>
<div id="show" style="background=black;font-size:38px;text-align:center;height:500px; line-height:50px;overflow:auto;font-family:华文新 魏;color:white;"></div>
<style>
.redLyric {font-size:38px;font-weight:bold;color:red;font-family:华文新魏;}
.normalLyric {font-size:38px;font-family:华文新魏;color:white;}
</style>
<script>
/*
=====================================================================
lrc歌词实时播放
非主流童话 2007-10-20 23:01
说明：本程序任何人都可以使用，对于使用程序造成一切后果作者概不负责。
转载或对本程序作任何修改，请您必须保留此段内容。
=====================================================================
*/
var lrcPlayer = {
_lrcUrl : "",
_lrcSong : "",
_lrcShower : "",
_songPlayer : "",
_songType : "",
_normalCss : "",
_currentCss : "" ,
_singer : "",
_songTitle : "",
_albumName : "",
_lrcMaker : "" ,
_offset : 0 ,
_timeList : new Array(),
_textList : new Array(),
_intTimeList : new Array(),
_textJoiner : "<br />",
_textLrc : "",
_currentKey : 0,
_interval : 100,
_errorMsg : {'not_ie':'不支持非IE浏览器' , 'can_not_get_lyric':"不能下载LRC歌词"},
_prevLine : "",
_prevKey : "",
showError : function (showMessage , isEnd){
alert(showMessage);
if (isEnd) exit(0);
},
isIe : function (){
return eval("false;/*@cc_on@if(@\x5fwin32)isMSIE=true@end@*/");
},
downloadLrc : function (){
document.body.addBehavior("#default#download");
try {
_this = this;
document.body.startDownload(this._lrcUrl , function(lrcString){_this.startPlay(lrcString)});
}
catch(exp){
this.showError(this._errorMsg["can_not_get_lyric"] , 1 );
}
},
startPlay : function (lrcString){
this.splitLrcString(lrcString);
this.sortLrcList();
this.joinLrcText();
this.showLrcText();
_this = this;
this._currentKey = 0;
setInterval(function(){_this.showCurrentLyric();},this._interval);
},
showCurrentLyric : function(){
currentTime = this.getCurrentTime() + parseInt(this._offset);
this.seekLrcText(currentTime);
if (this._currentKey != this._prevKey && this._currentKey >= -1){
currentKey = parseInt(this._currentKey);
fontSize = parseInt(this._lrcShower.style.fontSize.substr(0,this._lrcShower.style.fontSize.length-2));
lineHeight = parseInt(this._lrcShower.style.lineHeight.substr(0,this._lrcShower.style.lineHeight.length-2));
space = lineHeight - fontSize;
this._lrcShower.scrollTop = currentKey * fontSize + (currentKey - 1) * space ;
currentLine = document.getElementById("lyric"+currentKey);
currentLine.className = this._currentCss;
if ("" != this._prevLine){
this._prevLine.className = this._normalCss;
}
this._prevLine = currentLine;
this._prevKey = this._currentKey;
}
},
getCurrentTime : function (){
player = this.getPlayer();
return player.controls.currentPosition * 1000;
},
unsetList : function (list , n){
if( n < 0 ){
return list;
}
else{
return list.slice(0,n).concat(list.slice(n+1,list.length));
}
},
splitLrcString : function (lrcString){
var textList = lrcString.split(/\[.*?\]/);
var timeList = lrcString.split(/\][^\[]+/m);
var deleteList = new Array();
var item = "";
var tmp = "";
for (var i in timeList){
if (/\[ti:.*/.test(timeList[i])){
this._songTitle = timeList[i].substr(4,timeList[i].length-4);
deleteList.push(i);
}
else if (/\[ar:.*/.test(timeList[i])){
this._singer = timeList[i].substr(4,timeList[i].length-4);
deleteList.push(i);
}
else if (/\[al:.*/.test(timeList[i])){
this._albumName = timeList[i].substr(4,timeList[i].length-4);
deleteList.push(i);
}
else if (/\[by:.*/.test(timeList[i])){
this._lrcMaker = timeList[i].substr(4,timeList[i].length-4);
deleteList.push(i);
}
else if (/\[offset:.*/.test(timeList[i])){
this._offset = timeList[i].substr(8,timeList[i].length-4);
deleteList.push(i);
}
else{
item = timeList[i].substr(1,timeList[i].length-1);
tmp = item.split(/\]\w?\[/);
if (tmp.length > 1){
item = tmp[0];
for(j = 1 ; j < tmp.length ; ++j){
timeList.push(tmp[j]);
textList.push(textList[i]);
}
}
timeList[i] = item;
}
}
deleteList = deleteList.sort();
for ( i = 0 ; i < deleteList.length ; ++i){
timeList = this.unsetList(timeList , deleteList[i]-i);
textList = this.unsetList(textList , deleteList[i]-i);
}
this._timeList = timeList;
this._textList = textList;
},
sortLrcList : function (){
var intTimeList = new Array();
for( i = 0 ; i < this._timeList.length ; ++i ){
min = this._timeList[i].split(":");
second = min[1].split(".");
intTimeList.push(parseInt(min[0]*60000) + parseInt(second[0]*1000) + parseInt(second[1])*1);
}
for(i = 0 ; i < intTimeList.length - 1; ++i){
for( j = i + 1 ; j < intTimeList.length ; ++j){
if ( intTimeList[i] > intTimeList[j] ){
tmp = intTimeList[i];
intTimeList[i] = intTimeList[j];
intTimeList[j] = tmp;
tmp = this._timeList[i];
this._timeList[i] = this._timeList[j];
this._timeList[j] = tmp;
tmp = this._textList[i];
this._textList[i] = this._textList[j];
this._textList[j] = tmp;
}
}
}
this._intTimeList = intTimeList;
},
joinLrcText : function (){
for (i = -5 ; i < 0 ; ++ i){
this._textLrc += "<span id='lyric"+i+"'> </span>" + this._textJoiner ;
}
for (i = 0 ; i < this._textList.length ; ++i){
this._textLrc += "<span id='lyric"+i+"'>" + this._textList[i] + "</span>" + this._textJoiner ;
}
},
showLrcText : function (){
this._lrcShower.innerHTML = this._textLrc;
},
seekLrcText : function (seekTime){
this._currentKey = this.binarySearch(this._intTimeList , seekTime);
},
binarySearch : function (list , seekTime){
start = 0;
finish = list.length - 1;
mid = Math.floor( (start + length ) / 2) ;
while(start <= finish){
if (seekTime == list[mid] ){
return mid;
}
else if(seekTime > list[mid] ){
start = mid + 1;
}
else{
finish = mid - 1;
}
mid = Math.floor( (start + finish ) / 2) ;
}
return mid;
},
initSongPlayer : function (){
if (this._songType == "realplayer"){
return this.initRealplayer();
}
else{
return this.initMediaPlayer();
}
},
initRealplayer : function (){
return true; //暂时没有实现
},
initMediaPlayer : function () {
var playString = ' <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="mediaPlayer" width="250" height="60">';
playString += ' <param name="url" value="'+this._lrcSong+'">';
playString += ' <param name="rate" value="1">';
playString += ' <param name="balance" value="0">';
playString += ' <param name="currentPosition" value="0">';
playString += ' <param name="playCount" value="9999">';
playString += ' <param name="autoStart" value="1">';
playString += ' <param name="volume" value="100">';
playString += ' <param name="currentMarker" value="0">';
playString += ' <param name="invokeURLs" value="-1">';
playString += ' <param name="stretchToFit" value="-1">';
playString += ' <param name="windowlessVideo" value="0">';
playString += ' <param name="enabled" value="-1">';
playString += ' <param name="enableContextMenu" value="0">';
playString += ' <param name="fullScreen" value="0">';
playString += ' <param name="enableErrorDialogs" value="0">';
playString += ' <param name="AutoRewind" value="1">';
playString += ' </object>';
document.body.insertAdjacentHTML("beforeEnd", playString);
return document.getElementById("mediaPlayer");
},
init : function (lrcUrl , lrcSong , lrcShower , normalCss , currentCss ,songType){
if (!this.isIe()) this.showError(this._errorMsg["not_ie"] , 1 );
this._lrcUrl = lrcUrl;
this._lrcSong = lrcSong;
this._lrcShower = document.getElementById(lrcShower);
this._songType = songType;
this._normalCss = normalCss;
this._currentCss = currentCss;
this._songPlayer = this.initSongPlayer();
this.downloadLrc();
},
getPlayer : function (){
return this._songPlayer;
}
}
lrcPlayer.init("E:/音频/歌曲/快乐练习曲/周传雄 - 快乐练习曲.lrc" , "E:/音频/歌曲/快乐练习曲/01.快乐练习曲.mp3" , "show" , "normalLyric" , "redLyric");
</script>
</body>
</html>
