解析Flex播放器如何同步显示歌词("Flex播放器歌词同步显示详解")

原创

ithorizon 7个月前 (10-19) 阅读数 24 #后端开发

Flex播放器歌词同步显示详解

Flex播放器是一种基于Flash的播放器，它赞成音频和视频的播放。在音乐播放场景中，歌词同步显示是一个重要的功能，它可以让用户在听歌的同时看到歌词，提升用户体验。下面我们将详细解析Flex播放器怎样实现歌词同步显示。

一、歌词文件格式

首先，我们需要了解歌词文件的格式。最常见的歌词同步格式是LRC（Lyric Display），它是一种纯文本格式，以时间标签来标识歌词的起始时间。下面是一个单纯的LRC文件示例：


[00:00.00] 作曲 : 李荣浩
[00:01.10] 作词 : 李荣浩
[00:04.00] 你是我的小呀小苹果
[00:06.00] 怎么爱你都不嫌多
[00:08.00] 红红的小脸儿温暖我的心
[00:10.00] 真是美美哒

每一行都包含一个时间标签和一个歌词文本。时间标签的格式为[mm:ss.SS]，其中mm是分钟，ss是秒，SS是百分之一秒。

二、解析歌词文件

在Flex播放器中，我们需要编写一个解析器来读取LRC文件，并将其演化为播放器可以明白的数据结构。以下是一个单纯的解析器实现：


private function parseLyrics(lyricsText:String):Array {
    var lyrics:Array = [];
    var lines:Array = lyricsText.split(" ");
    for each (var line:String in lines) {
        var timeLabelMatch:Array = line.match(/\[(\d+:\d+\.\d+)\]/);
        var lyricsMatch:Array = line.match(/(.*)/);
        if (timeLabelMatch && lyricsMatch) {
            var timeLabel:String = timeLabelMatch[1];
            var lyricsText:String = lyricsMatch[1];
            var timeParts:Array = timeLabel.split(":");
            var minutes:uint = parseInt(timeParts[0]);
            var seconds:uint = parseInt(timeParts[1]);
            var totalSeconds:uint = minutes * 60 + seconds;
            lyrics.push({time: totalSeconds, text: lyricsText});
        }
    }
    return lyrics;
}

这个函数接收一个字符串参数，它包含了LRC文件的文本内容。函数首先将文本按行分割，然后逐行解析时间标签和歌词文本。解析后的歌词被存储在一个数组中，每个元素都是一个包含时间和文本的对象。

三、同步显示歌词

在Flex播放器中，我们需要一个组件来显示歌词。这个组件可以是单纯的Label或Text控件。我们将使用一个自定义组件来同步显示歌词。以下是一个单纯的歌词显示组件实现：


public class LyricsDisplay extends Label {
    private var lyrics:Array;
    private var currentTime:uint = 0;
    
    public function LyricsDisplay() {
        super();
        lyrics = parseLyrics(LRC_TEXT); // LRC_TEXT是LRC文件的文本内容
    }
    
    public function updateLyrics(time:uint):void {
        currentTime = time;
        var currentLyric:Object = lyrics.find(function(lyric:Object, index:int, arr:Array):Boolean {
            return lyric.time > currentTime;
        });
        if (currentLyric) {
            text = currentLyric.text;
        } else {
            text = "";
        }
    }
}

这个组件在构造函数中解析了LRC文件，并在updateLyrics函数中更新歌词显示。函数接收当前播放时间作为参数，然后查找第一个时间戳大于当前时间戳的歌词，并更新显示文本。

四、集成到Flex播放器

现在我们已经有了歌词解析器和歌词显示组件，接下来需要将它们集成到Flex播放器中。以下是怎样在播放器中集成歌词同步显示功能：


public class FlexPlayer extends Sprite {
    private var player:Sound;
    private var lyricsDisplay:LyricsDisplay;
    
    public function FlexPlayer() {
        player = new Sound();
        lyricsDisplay = new LyricsDisplay();
        lyricsDisplay.x = 10;
        lyricsDisplay.y = 10;
        addChild(lyricsDisplay);
        
        player.addEventListener(ProgressEvent.PROGRESS, onProgress);
        player.load(new URLRequest("song.mp3"));
    }
    
    private function onProgress(event:ProgressEvent):void {
        var currentTime:uint = Math.floor(player.position / 1000);
        lyricsDisplay.updateLyrics(currentTime);
    }
}