By19.Published on2007-06-20.
提供FLASH-LRC-XML-MP3-PLAYER同步加载显示播放器源文…
“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的播放器就要占掉页面很大的地方也绝对不好~并且为了让大家歌词看的更清楚,我在鼠标滑过歌词时加入了再显示当前播放歌词文本的效果。毕竟一个网络播放器要兼顾各种也只能这样了。
有时间会试试加上动态显示波形的效果(AS3中),找了些波形的例子试着做了一下不过太生硬,效果并不理想。

相关代码(具体参照提供的源文,可切换为全屏。):
AS我提供了4个文件….. -。-PlayerGLLLXML.as用来解析XML和生成列表,以及定义右键菜单等~注意改成你的XML地址也可以自己定义下右键菜单~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 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建立列表~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| 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用来建立遮罩层和平滑显示列表~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| 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用来显示歌词~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
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歌词地址便可以实现同步播放了~添加多个节点播放多个曲目。
1
2
3
4
5
| <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~