- GL~19′Life. - LRC.MP3.XML.FLASH.PLAYER.同步加载显示播放器.

LRC.MP3.XML.FLASH.PLAYER.同步加载显示播放器.

本篇文章永久链接：http://www.ll19.com/lrc-mp3-flash-xml-player.html

提供FLASH-LRC-XML-MP3-PLAYER同步加载显示播放器源文…

这里写下对播放器的建议和BUG^[!!]

Loading……

“MP3-LRC歌词同步加载并且显示的FLASH.LRC.MP3播放器”~GLLL~LRC.MP3.FLASH.PLAYER~

推荐另外一个一条可以置顶在页面上方的LRC LINE~：http://www.ll19.com/lrc-19line.html

更新了AS3歌词同步和波谱功能，访问这里：http://www.ll19.com/as3-lrc-mp3-wave-flash.html

仿PSP自带的播放器效果，访问这里：http://www.ll19.com/as3-lrc-mp3-wave-flash-psp.html

FLASH MP3的播放器非常多，不过同步加载歌词并且显示的FLASH MP3播放器就很少了，而且现有的这些效果都不是很好。心血来潮的找了些教程和手里以前一个例子自己做了一个LRC同步歌词播放器。继承了我之前FLV播放器的风格。-.-LRC格式的歌词满世界都是，随便搜索便可以找到。很多人也说过这个问题，我们一般用的播放器歌词都是上下滚动，我这里是左右滚动。因为毕竟这是个网络播放器，上下滚动要有太长的高度影响美观不说而且只是加一个FLASHMP3的播放器就要占掉页面很大的地方也绝对不好~并且为了让大家歌词看的更清楚，我在鼠标滑过歌词时加入了再显示当前播放歌词文本的效果。毕竟一个网络播放器要兼顾各种也只能这样了。

提供播放器源文：

http://code.google.com/p/glll/downloads/detail?name=gllllrc.rar

有时间会试试加上动态显示波形的效果（AS3中），找了些波形的例子试着做了一下不过太生硬，效果并不理想。

相关代码(具体参照提供的源文，可切换为全屏。):

AS我提供了4个文件….. -。－PlayerGLLLXML.as用来解析XML和生成列表，以及定义右键菜单等~注意改成你的XML地址也可以自己定义下右键菜单~

var playlist = "glll-lrc-list.xml";
Stage.scaleMode = "noScale";
function none() {
}
function glll() {
	getURL("http://www.ll19.com", "_blank");
}
var newmenu = new ContextMenu();
newmenu.hideBuiltInItems();
var $none = new ContextMenuItem("http://www.LL19.com/", none, false, false, true);
var $glll = new ContextMenuItem("GLLL.", glll);
newmenu.customItems.push($none, $glll);
newmenu.onSelect = menuHandler;
_root.menu = newmenu;

之后解析XML建立列表~

function loadData(success) {
	if (success) {
		picList = new Array();
		audioTracks = new Array();
		audioTracks = this.firstChild.childNodes;
		song_total = audioTracks.length;
		for (var i = 0; i<song_total; i++) {
			aPath.push(audioTracks[i].attributes.path);
			songTitel.push(audioTracks[i].attributes.title);
			lrcList.push(audioTracks[i].attributes.lrc);
			picList.push(audioTracks[i].attributes.pic);
			bot.listContentMc.playlist.btn.duplicateMovieClip("btn"+i, i);
			bot.listContentMc.playlist["btn"+i]._y = bot.listContentMc.playlist.btn._y+i*int(bot.listContentMc.playlist.btn._height)+i;
			bot.listContentMc.playlist["btn"+i].txt = checkDigits(i+1)+". "+songTitel[i];//checkDigits小于10前补0
			bot.listContentMc.playlist["btn"+i].playnow.txt = checkDigits(i+1)+". "+songTitel[i];
			bot.listContentMc.playlist["btn"+i].playnow._visible = false;
			loadMovie(picList[i], bot.listContentMc.playlist["btn"+i].glll);
			var no = checkDigits(i+1);
			bot.listContentMc.playlist["btn"+i].hit.onPress = function() {
				Command(this._parent.getDepth()+1);
				removeTip();
			}
			bot.listContentMc.playlist["btn"+i].hit.onRollOver = function() {
			showTip("No:"+(this._parent.getDepth()+1) + " - " + songTitel[(this._parent.getDepth())] + " -  ");
			};
			bot.listContentMc.playlist["btn"+i].hit.onRollOut =function () {
			removeTip();
			};
		}
		autoStart = this.firstChild.attributes.auto; //自动播放方法
		//顺序除yes和random auto中任何值都为不自动播放
		if (autoStart == "yes") {
			Command(1);
		} 
		//随即连续
		else if (autoStart == "random") {
			Command(random(song_total)+1);
		} 
	}
	delete data_xml;
}

PlayerGLLLLIST.as用来建立遮罩层和平滑显示列表~

bot.listContentMc.playlist.setMask(bot.listContentMc.list_bg);
//滑动显示
MovieClip.prototype.easeY = function(t) {
	this.onEnterFrame = function() {
		this._y = int(t-(t-this._y)/1.5);
		if (this._y>t-1 && this._y<t+1) {
			delete this.onEnterFrame;
		}
	};
};
bot.listContentMc.list_bg.onEnterFrame = function() {
	if (this.hitTest(_root._xmouse, _root._ymouse) == true && this._parent.playlist._height>this._height) {
		ymin = this._y+this._height-this._parent.playlist._height-66;//下移
		ymax = this._y+3;//上移
		conv = (this._ymouse-15)*1.3/this._height;
		conv>1 ? conv=1 : null;
		conv<0 ? conv=0 : null;
		this._parent.playlist.easeY(ymax-conv*(ymax-ymin));
	}
};

PlayerGLLLLRC.as用来显示歌词~

 
var lyricsText = new Array();
var timeString = new Array();
var timeValue = new Array();
var pos = 0;
function loadLyrics(lyrics,prm) {
	delete lrc;
	var lrc = new XML();
	lrc.ignoreWhite = true;
	lrc.onLoad = loadData;
	lrc.load(lyrics);
	function loadData(success) {
		if (success) {
		var originLyrics = new Array();
		var originLyricsBreak = new Array();
		originLyrics = lrc.toString().split(chr(10)); //取得LRC的队列
		for (var j in originLyrics) {
			originLyricsUnit = originLyrics[j].split("]");
			for (i=0; i<=originLyricsUnit.length-2; i++) {
			originLyricsBreak.push(originLyricsUnit[i]+"]"+originLyricsUnit[originLyricsUnit.length-1]); //push到队列结尾unshift到开头
			}
		}
		originLyricsBreak.sort();
		for (k = originLyricsBreak.length-1; k>=0; k--) {
			var tempText = originLyricsBreak[k].split("]")[1]; //歌词
			_root.Lyricsitems.convertText = tempText;
			tempText = _root.Lyricsitems.convertBox.text; //转换符号
			lyricsText.unshift(tempText);
			var tempTimeString = originLyricsBreak[k].split("]")[0].slice(1); //时间
			timeString.unshift(tempTimeString);
			timeValue.unshift(convertToTime(tempTimeString)); //将时间转成秒
		}
	_root.Lyricsitems.onEnterFrame = function() {
	moveUp();
	}
	}
	}
	_root.song.stop();
	Commandmp3(prm);
}
function convertToTime(str) {
	var times = str.split(":");
	return parseInt(times[0])*60+parseFloat(times[1]);
}
Lyricsitems.lrclist.setMask(Lyricsitems.listbg); //遮罩
var startpoint = 0;
var shownum = 3;
var initx = _root.Lyricsitems.lrclist._x;
function refreshglll() {
	for (i=0; i<=shownum-1; i++) {
	setCaption("itembutton"+i, lyricsText[i+startpoint]);
	}
}
var x0 = 0;
var x1:Number;
var x2:Number;
_root.Lyricsitems.lrclist.itembutton0.buttonbg._alpha = 0;
_root.Lyricsitems.lrclist.itembutton1.buttonbg._alpha = 0;
_root.Lyricsitems.lrclist.itembutton2.buttonbg._alpha = 0;
_root.Lyricsitems.lrclist.itembutton0.captiontxt.autoSize = true;
_root.Lyricsitems.lrclist.itembutton1.captiontxt.autoSize = true;
_root.Lyricsitems.lrclist.itembutton2.captiontxt.autoSize = true;
function setCaption(name, capt) {
	if (capt == null){
		capt = "GLLL.Lrc.Mp3.Players~http://www.LL19.com/";
		}
	_root.Lyricsitems.lrclist[name].buttonlrc._width = _root.Lyricsitems.lrclist[name].captiontxt._width;
	_root.Lyricsitems.lrclist[name].buttonbg._width = _root.Lyricsitems.lrclist[name].captiontxt._width;
	x1= _root.Lyricsitems.lrclist.itembutton0.captiontxt._width ;
	x2= _root.Lyricsitems.lrclist.itembutton1.captiontxt._width ;
	_root.Lyricsitems.lrclist.itembutton0._x = x0;
	_root.Lyricsitems.lrclist.itembutton1._x = x1;
	_root.Lyricsitems.lrclist.itembutton2._x = x1 + x2  ;
	_root.Lyricsitems.lrclist[name].caption1 = " - " + capt + " - "; //滚动显示
	_root.Lyricsitems.lrclist[name].buttonlrc.onRollOver = function() { //鼠标滑过显示
			showTip1(capt);
		};
	_root.Lyricsitems.lrclist[name].buttonlrc.onRollOut = _root.Lyricsitems.lrclist[name].buttonlrc.onPress=function () {
			removeTip1();
		};
}
function moveUp() {
	pos = _root.song.position; //当前播放时间
	var temppos = 0;
	var ending;
	for (i=timeValue.length-1; i>=0; i--) {
		if (!isNaN(timeValue[i])) {
			ending = i;
			break;
		}
	}
	for (i=0; i<=ending; i++) {
		if (i == ending || pos<=timeValue[i+1]*1000) {
			temppos = i;
			break;
		}
	}
	startpoint = temppos-Math.floor(shownum/2);
	var timet = timeValue[temppos+1] - timeValue[temppos];
	var timen = timeValue[temppos+1] - pos/1000;
	var alpha = 100 - 100*timen/timet
	_root.Lyricsitems.lrclist.itembutton0.buttonbg._alpha = alpha;
	//trace (alpha);
	var alpha2 = 100*timen/timet
	//trace (alpha2);
	_root.Lyricsitems.lrclist.itembutton2.buttonbg._alpha = alpha2;
	refreshglll();
	var s = _root.Lyricsitems.lrclist.itembutton0.captiontxt._width;
	var percentage = Math.min(1,(pos/1000-timeValue[temppos])/((isNaN(timeValue[temppos+1]) ? (timeValue[temppos]+1) : (timeValue[temppos+1]))-timeValue[temppos]));
	_root.Lyricsitems.lrclist._x = initx-s*percentage;
}

PlayerGLLL.as用来定义播放器的功能方法~这个就不说了,大家看提供的源文件吧~

+ 关于XML配置：只需在XML中配置好MP3和对应的LRC歌词地址便可以实现同步播放了~添加多个节点播放多个曲目。

<player auto="yes">
<mp3 path="http://www.ll19.com/up/ll19lrc/mp3/sofar.mp3" 
title="SoFar." 
lrc="http://www.ll19.com/up/ll19lrc/lrc/sofar.xml" 
pic="http://www.ll19.com/up/ll19lrc/pic/12.jpg" />

path是要加载的MP3地址

title列表显示的歌曲标题

lrc歌曲的歌词文件lrc地址
pic列表前显示的图片或FLASH地址

+ 一些问题：

1.可能会有这样的问题，比如我的LRC上传到空间居然不能访问…遇到这样的问题把LRC改扩展名成XML（先用HTTP访问一下确定是否能访问）。

2.歌曲列表前的图片或FLASH以102*29最佳。

3.跨域不能访问XML的问题：当你的swf文件不在本机而传到服务器上后，它只能加载和它在同一服务器下的XML文件，即XML文件前的域名要相同，所以你加载的XML和XML里配置的LRC歌词文件（歌词也是通过解析的方法进一步实现同步的）都应该是同一域下的。比如我的是www.LL19.com，那我加载的XML也必须是www.LL19.com下的XML，XML中配置的LRC歌词地址也必须是www.LL19.com下的，不过毕竟这些文件都非常小，对空间没什么影响。MP3和列表前的图片可以加载本地以外的。

别的问题陆续发现会说明。

+ 提供一个MP3压缩软件：DietMP3：http://www.onlinedown.net/soft/3561.htm

飞影的经典

送给世界上所有坚强的男子汉~

GLLL~Just for fun~

49 Responses to “LRC.MP3.XML.FLASH.PLAYER.同步加载显示播放器.”

匿名说： ( Stranger commented in LL19.com )

二月 22, 2009于2:36 下午

LASH 播放器。
呵呵，竟然是以开源的形式提供的，非常感谢，之前都是把SWF文件导出后进行需要的修改才能达到自己的要求。

非常感谢。

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  二月 23, 2009于9:06 上午
  
  - 。-
  以后最好把留言写在一起~
  
  回复 | 回复并邮件
匿名说： ( Stranger commented in LL19.com )

二月 22, 2009于2:35 下午

无意中找到了这个blog。
怎么说呢，非常喜欢博主的这块地方。
特别是看到寻找的XML F

回复 | 回复并邮件
GLLL. 说： ( Admin commented )

八月 24, 2008于1:18 下午

如果有上一首下一首的按扭,就更完美些!

：建议下载下方提供的AS3版本~你说的这些AS3的播放器全有。

回复 | 回复并邮件
水中月说： ( Stranger commented in LL19.com )

八月 24, 2008于9:42 上午

如果有上一首下一首的按扭,就更完美些!

回复 | 回复并邮件
水中月说： ( Stranger commented in LL19.com )

八月 24, 2008于9:37 上午

我发现一个问题,
当跳到一首没法加载的歌曲时,就会停止了播放,可否自动跳到下一首可以加载的歌曲?

回复 | 回复并邮件
SiArg 说： ( Has commented 1 times in LL19.com )

八月 6, 2008于8:59 上午

果然很强啊！~~

对于国内的blog可以算的上顶尖的了！~

回复 | 回复并邮件
GLLL. 说： ( Admin commented )

七月 26, 2008于12:48 下午

你好,这个默认音量怎样调到100%呢,看了那些源文件,还是找不到,请求博主帮忙指点一下,谢谢

：PlayerGLLL.as里的_root.song.setVolume(50);50改成100，建议下载AS3的播放器。

回复 | 回复并邮件
VICOR 说： ( Has commented 1 times in LL19.com )

七月 26, 2008于12:02 下午

你好,这个默认音量怎样调到100%呢,看了那些源文件,还是找不到,请求博主帮忙指点一下,谢谢

回复 | 回复并邮件