Flex播放器同步显示歌词

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

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的沙湾网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

Flex播放器同步显示歌词

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

Java代码

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

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

 
 
 
  
  
  publicfunctiongetLRCArray(lrc:String):Array{varlrcArr:Array=newArray;lrc+="\r";for(vari:int=0;i
  
  
  

  
  
  if(lrc.charAt(i)==":"){time=Number(lrc.slice(i-2,i))*60+Number(lrc.slice(i+1,i+3)); 
  
  
  
  
  
  if(String(time)!="NaN"){varj:uint=0;varstartIndex:uint=0;varendIndex:uint=0; 
  
  
  
  
  
  do{j++;if(lrc.charAt(i+j)=="]"){startIndex=i+j+1;}}while(i+j
  
  
  

  
  
  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滚动条设置到对应的高度，主要的代码如下：

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

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

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

文章名称：Flex播放器同步显示歌词
分享链接：http://www.gawzjz.com/qtweb2/news40/8990.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容