`
wxw850227
  • 浏览: 70569 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Flex播放器同步显示歌词

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

/加载歌词var lrcUrl : String = xml.item[currIndex].lrc;if ( lrcUrl!=null && lrcUrl!=""){    var lrc:URLLoader = new URLLoader();    //lrc.dataFormat = URLLoaderDataFormat.VARIABLES;    lrc.load(new URLRequest(lrcUrl));    lrc.addEventListener(Event.COMPLETE,LRC_Complete);    lrc.addEventListener(IOErrorEvent.IO_ERROR,LRC_IOError);}lrcArr = null;outPutLRCString = "";startIndexOf = 0;txtLrc.text = "";
然后在加载完成的事件里,我们能得到lrc文本字符串,这时候我们需要对字符串进行处理,把它转换成一个Array数组,函数方法如下:

public function getLRCArray(lrc:String):Array {    var lrcArr:Array=new Array;                                lrc += "\r";        for (var i:int = 0; i < lrc.length; i++) {        var time:Number = 0;        if (lrc.charAt(i) == ":") {            time = Number(lrc.slice(i - 2, i)) * 60 + Number(lrc.slice(i + 1, i + 3));            if (String(time) != "NaN") {                var j:uint = 0;                var startIndex:uint = 0;                var endIndex:uint = 0;                do {                    j++;                    if (lrc.charAt(i + j) == "]") {                        startIndex = i + j + 1;                    }                }while (i + j < lrc.indexOf("\r", i))                                endIndex = lrc.indexOf("\r", i);                                if(startIndex!=0&&endIndex!=0){                    lrcArr.push([time,lrc.slice(startIndex, endIndex)]);                }            }        }    }        return lrcArr;}
解析歌词返回的Array数组为多围数组,数组里的每一项是为一个二围数组,item[0]为当前秒数,item[1]为该秒显示的歌词(句),比如item[0]=歌曲名:你最近还好吗、item[5]=演唱:S.H.E,就是代表第0秒显示歌曲名:你最近还好吗,而从第5秒起则显示演唱:S.H.E,这样通过getLRCArray方法就能得到歌曲所有的时间段显示的歌词拉。本例中把所有歌词放在一个editable="false"不可修改的mx:TextArea文本域内。

歌词同步显示的问题

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

//同步显示歌词if( lrcArr!=null && lrcArr.length > 0){    var sec:Number=int(channel.position/1000);    for(var j:int=0;j<lrcArr.length;j++){        if(lrcArr[j][0]==sec){            var currentLrc : String = lrcArr[j][1];            if( currentLrc != this.currLrc.text)            {                currLrc.text = currentLrc;                //高亮显示,先清空之前高亮部分                var tr : TextRange = new TextRange(txtLrc);                tr.color = this.getStyle("color");                                var beginIndex : int = this.outPutLRCString.indexOf(currentLrc,startIndexOf);                startIndexOf += currentLrc.length;                var endIndex : 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 ) this.txtLrc.verticalScrollPosition = this.txtLrc.maxVerticalScrollPosition;            }            break;        }    }    }
上面sec是当前歌曲播放的时间秒数,然后循环换数组判断rcArr[j][0]跟当前sec比较,秒数一致才显示对应歌词,一段歌词可能在好几秒内都不会变的,同时根据当前歌词的数组索引位置设置TextArea滚动条位置,让当前正在播放的歌词在中间显示。

分享到:
评论

相关推荐

    flex播放器源代码

    它主要用于播放音频或视频内容,并可提供一系列高级功能,如歌词同步显示、在线搜索等。 #### 1.1 Flex框架介绍 Flex是一个开源框架,用于构建高性能的、数据驱动的应用程序,可以在多种浏览器、操作系统和设备上...

    flex MP3播放器

    5. 歌词显示区域:显示歌词同步内容,可以是Text或RichText组件,实时更新歌词文本。 6. 波形显示区:用图形表示音乐的波形,可能自定义绘图或利用第三方库。 在实际开发过程中,开发者需要熟练掌握ActionScript...

    flex音乐播放器源代码

    除了基本功能外,开发者还可以根据需求扩展Flex音乐播放器,比如添加歌词同步显示、音乐库管理、播放列表编辑等功能,以满足更复杂的用户需求。 通过对Flex音乐播放器源代码的分析,我们可以了解到Flex开发的基本...

    歌词显示源代码

    歌词显示源代码主要涉及到音乐播放器的开发,特别是与歌词同步显示相关的技术。在这个项目中,我们关注的重点是实现一个能够随时随着音乐播放精确显示歌词的功能,而且据描述,其准确性甚至超过了知名的QQ音乐。这里...

    Flex4网页音乐播放器

    6. **歌词显示**:为了增强用户体验,播放器可能还包括歌词同步显示功能。这需要将歌词文本与歌曲时间关联起来,根据音乐播放的进度滚动歌词。 7. **播放列表**:播放器有一个内置的播放列表,用户可以选择不同的...

    LRCEditor歌词同步

    LRCEditor是一款基于Flex技术开发的MP3播放器,其主要特点是实现了歌词的同步显示,为用户提供了便捷的音乐聆听体验。Flex是一种用于构建富互联网应用程序(RIA)的开源框架,由Adobe公司开发,它使用ActionScript...

    Flex MP3 超酷在线MP3媒体播放器

    2.歌词同步显示 3.播放模式调节(顺序播放、单曲循环、随机播放) 4.播放歌曲时显示进度条 5.快进 6.快退 7.声量调节 8.歌曲列表 9.播放控制(上一首、下一首、停止、暂停、播放) 10.歌曲搜索 11.歌曲上传 12.歌曲...

    AIR音乐播放器

    通过以上技术,"AIR音乐播放器"不仅能够提供基本的音乐播放功能,还可能包含特色功能,如歌曲列表管理、播放模式选择(单曲循环、随机播放等)、歌词同步显示等。这个项目不仅展示了Flex和AIR的综合应用,也为其他...

    (转载)AS3.0 音乐播放器 xml加载歌曲

    AS3.0(ActionScript 3.0)是Adobe Flash平台上的编程语言,常用于...开发者通过巧妙地组合和运用这些技术,实现了动态加载歌曲、调整音量和静音、同步显示歌词等功能,提供了一种灵活且易于扩展的音乐播放解决方案。

    微信小程序制作的音乐播放器

    为了提供良好的用户体验,可以添加加载动画、缓冲提示、歌词同步等功能。同时,考虑到性能,音频文件的加载和播放策略也需要精心设计。 10. **社区支持和文档** 微信官方提供了详尽的开发文档和技术论坛,开发者...

    html+CSS 音乐播放器页面

    当然,这只是一个基础版本,实际的音乐播放器可能会包含更多高级功能,如歌词同步、播放模式选择、歌曲推荐等,这些都需要更深入的编程技巧和API知识。但无论怎样,理解和掌握HTML和CSS的基本原理是构建任何Web应用...

    音乐播放器-微信小程序源码

    6. **网络请求**:在音乐播放器中,可能需要从服务器获取歌曲列表、歌词等信息,这需要用到`wx.request()`进行HTTP/HTTPS请求。 7. **事件处理**:用户交互是小程序的重要部分,通过`bindXXX`系列事件绑定,可以...

    ReactMusic:使用React Native制作的类似Spotify的音乐播放器界面

    8. **第三方库**:为了实现某些特定功能,如音乐推荐算法、歌词同步显示等,项目可能引入了其他的第三方库。 9. **打包和发布**:完成开发后,开发者会使用Expo或React Native命令行工具进行打包和编译,生成可以在...

    微信小程序仿网易云音乐案例

    9. **音乐播放器控件**:设计一个美观且功能齐全的播放器控件,包括进度条、歌词同步显示等。歌词的加载和滚动效果需要通过JavaScript实现。 10. **离线下载与缓存**:为了让用户在无网络环境下也能听歌,可以实现...

    html-css-spotifyweb

    - 实现音乐播放的实时反馈,如歌词同步、进度条更新等。 通过以上这些技术和方法,"html-css-spotifyweb"项目旨在帮助开发者掌握HTML和CSS在构建复杂Web界面时的应用,同时理解如何创建一个功能完备且视觉上与...

Global site tag (gtag.js) - Google Analytics