Flex播放器同步显示歌词

开发 后端
本文向大家介绍一下Flex播放器同步显示歌词,如果放歌曲时要同步显示歌词,首先必须要能解析出lrc格式的歌词文本。

本文和大家重点讨论一下如何让Flex播放器同步显示歌词,播放歌曲时要同步显示歌词,首先必须要能解析出lrc格式的歌词文本,lrc歌词其实就是一个文本格式的文件,在Flex里面我们可以使用URLLoader去加载。

Flex播放器同步显示歌词

播放歌曲时要同步显示歌词,首先必须要能解析出lrc格式的歌词文本,之前我还准备直接在网上匹配下载对应歌词,打开我机器的千千静音在线匹配歌词,然后用HTTPAnalyzerStdV监视所有的http请求,发现它是请求这个ttlrcct.qianqian.com网站下载歌词,本来还是直接套用千千静音服务器下载歌词,但是它的url参数全部加密了。后来又看了下酷狗音乐,它里面下载歌词我都监视不请求,考虑到就算我能在线找到下载歌词的url地址,flash里发送远程请求也会有安全杀箱问题,所以最终放弃直接在网络上下载歌词的办法,还是全部上传到我网站上去。lrc歌词其实就是一个文本格式的文件,在Flex播放器里面我们可以使用URLLoader去加载,代码如下:

Java代码

  1. 加载歌词varlrcUrl:String=xml.item[currIndex].lrc;  
  2. if(lrcUrl!=null&&lrcUrl!=""){varlrc:URLLoader=newURLLoader();//lrc.dataFormat=URLLoaderDataFormat.VARIABLES;  
  3. lrc.load(newURLRequest(lrcUrl));lrc.addEventListener(Event.COMPLETE,LRC_Complete);  
  4. lrc.addEventListener(IOErrorEvent.IO_ERROR,LRC_IOError);}lrcArr=null;  
  5. outPutLRCString="";startIndexOf=0;txtLrc.text="";  

然后在加载完成的事件里,我们能得到lrc文本字符串,这时候我们需要对字符串进行处理,把它转换成一个Array数组,函数方法如下:

  1. publicfunctiongetLRCArray(lrc:String):Array{varlrcArr:Array=newArray;lrc+="\r";for(vari:int=0;i<lrc.length;i++){vartime:Number=0;  
  2.  
  3. if(lrc.charAt(i)==":"){time=Number(lrc.slice(i-2,i))*60+Number(lrc.slice(i+1,i+3));  
  4.  
  5. if(String(time)!="NaN"){varj:uint=0;varstartIndex:uint=0;varendIndex:uint=0;  
  6.  
  7. do{j++;if(lrc.charAt(i+j)=="]"){startIndex=i+j+1;}}while(i+j<lrc.indexOf("\r",i))endIndex=lrc.indexOf("\r",i);  
  8.  
  9. if(startIndex!=0&&endIndex!=0){lrcArr.push([time,lrc.slice(startIndex,endIndex)]);}}}}returnlrcArr;}  

解析歌词返回的Array数组为多围数组,数组里的每一项是为一个二围数组,item[0]为当前秒数,item[1]为该秒显示的歌词(句),比如item[0]=歌曲名:你最近还好吗、item[5]=演唱:S.H.E,就是代表第0秒显示歌曲名:你最近还好吗,而从第5秒起则显示演唱:S.H.E,这样通过getLRCArray方法就能得到歌曲所有的时间段显示的歌词拉。本例中把所有歌词放在一个editable="false"不可修改的mx:TextArea文本域内。

歌词同步显示的问题

歌词能全部加载显示了,问题是怎么随着Flex播放器歌曲的播放而高亮显示当前行歌词呢?不过还好Flex提供一个TextRange能对TextArea内文本进行选择性的处理,你只需要设置beginIndex和endIndex就能自动匹配到TextArea中间区域的文本,我这里只是简单的改变了一下颜色,不过我们从TextArea中找某一个句歌词索引的时候需要注意歌词有很多是重复的,所以我们需要用一个变量保存当前歌词播放位置索引startIndexOf,以确保我们高亮选择到的歌词是正确的。同时将TextArea滚动条设置到对应的高度,主要的代码如下:

  1. //同步显示歌词if(lrcArr!=null&&lrcArr.length>0){varsec:Number=int(channel.position/1000);  
  2. for(varj:int=0;j<lrcArr.length;j++){if(lrcArr[j][0]==sec){varcurrentLrc:String=lrcArr[j][1];  
  3. if(currentLrc!=this.currLrc.text){currLrc.text=currentLrc;  
  4. //高亮显示,先清空之前高亮部分vartr:TextRange=newTextRange(txtLrc);tr.color=this.getStyle("color");  
  5. varbeginIndex:int=this.outPutLRCString.indexOf(currentLrc,startIndexOf);startIndexOf+=currentLrc.length;  
  6. varendIndex:int=beginIndex+currentLrc.length;  
  7. tr.beginIndex=beginIndex;tr.endIndex=endIndex;if(tr.text!=""){tr.color="yellow";}
  8. //设置滚动条位置this.txtLrc.verticalScrollPosition=j*this.txtLrc.maxVerticalScrollPosition/lrcArr.length;if(lrcArr.length-j<=5)
  9. thisthis.txtLrc.verticalScrollPosition=this.txtLrc.maxVerticalScrollPosition;}break;}}}  
  10.  
  11. /加载歌词varlrcUrl:String=xml.item[currIndex].lrc;if(lrcUrl!=null&&lrcUrl!=""){varlrc:URLLoader=newURLLoader();  
  12. //lrc.dataFormat=URLLoaderDataFormat.VARIABLES;lrc.load(newURLRequest(lrcUrl));  
  13. lrc.addEventListener(Event.COMPLETE,LRC_Complete);  
  14. lrc.addEventListener(IOErrorEvent.IO_ERROR,LRC_IOError);}lrcArr=null;outPutLRCString="";startIndexOf=0;txtLrc.text="";  


然后在加载完成的事件里,我们能得到lrc文本字符串,这时候我们需要对字符串进行处理,把它转换成一个Array数组,函数方法如下:

  1. publicfunctiongetLRCArray(lrc:String):Array{varlrcArr:Array=newArray;lrc+="\r";  
  2. for(vari:int=0;i<lrc.length;i++){vartime:Number=0;  
  3. if(lrc.charAt(i)==":"){time=Number(lrc.slice(i-2,i))*60+Number(lrc.slice(i+1,i+3));  
  4. if(String(time)!="NaN"){varj:uint=0;varstartIndex:uint=0;varendIndex:uint=0;  
  5. do{j++;if(lrc.charAt(i+j)=="]"){startIndex=i+j+1;}}while(i+j<lrc.indexOf("\r",i))endIndex=lrc.indexOf("\r",i);  
  6. if(startIndex!=0&&endIndex!=0){lrcArr.push([time,lrc.slice(startIndex,endIndex)]);}}}}returnlrcArr;} 

解析歌词返回的Array数组为多围数组,数组里的每一项是为一个二围数组,item[0]为当前秒数,item[1]为该秒显示的歌词(句),比如item[0]=歌曲名:你最近还好吗、item[5]=演唱:S.H.E,就是代表第0秒显示歌曲名:你最近还好吗,而从第5秒起则显示演唱:S.H.E,这样通过getLRCArray方法就能得到歌曲所有的时间段显示的歌词拉。本例中把所有歌词放在一个editable="false"不可修改的mx:TextArea文本域内。

【编辑推荐】

  1. Flex样式的添加和卸载
  2. Flex安全沙箱问题解决方法
  3. 技术前沿 看Flex客户端缓存技术如何使用
  4. 解析Flex全屏模式设置方法
  5. Flex内存泄露解决方法和内存释放优化原则


 

责任编辑:佚名 来源: javaeye.com
相关推荐

2010-07-30 09:50:36

Flex播放器

2010-07-30 09:42:37

Flex播放器

2011-06-13 09:33:04

2022-08-16 17:37:06

视频播放器鸿蒙

2011-06-27 11:23:21

Qt 音乐播放器

2010-08-11 13:39:16

Flex3.0Flv播放器

2011-07-20 16:21:20

iPhone 视频 播放器

2011-09-09 11:28:35

Android Mus

2011-09-05 18:08:01

MTK音频播放器

2015-05-21 15:25:42

VLC播放器

2022-08-17 17:18:02

Sunamu开源

2014-12-31 16:52:53

音乐播放器源码

2012-05-03 09:51:09

HTML5

2018-05-25 14:37:58

2010-06-11 12:53:56

openSUSE播放器

2022-06-21 14:41:38

播放器适配西瓜视频

2009-12-17 15:10:31

Linux音乐播放器

2009-07-16 15:27:13

Windows Emb

2021-10-21 16:00:07

鸿蒙HarmonyOS应用

2021-10-19 14:27:07

鸿蒙HarmonyOS应用
点赞
收藏

51CTO技术栈公众号