flutter如何实现音乐播放歌词同步

在Flutter中如何实现音乐播放时的歌词同步功能？目前我正在开发一个音乐播放器应用，需要实现类似主流音乐APP的歌词滚动效果。请问有哪些推荐的方案或插件可以实现这个功能？具体需要如何处理歌词文件（如LRC格式）的解析和时间轴同步？最好能提供一些关键代码示例或实现思路。

2 回复

使用audioplayers播放音乐，通过lyrics库解析LRC文件。监听播放进度，用StreamBuilder实时匹配时间戳更新歌词位置，实现同步滚动。

更多关于flutter如何实现音乐播放歌词同步的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现音乐播放歌词同步，主要通过以下步骤实现：

1. 解析歌词文件

通常使用LRC格式歌词，按时间戳解析：

class LyricParser {
  static List<LyricLine> parse(String lyricContent) {
    List<LyricLine> lines = [];
    final regex = RegExp(r'\[(\d+):(\d+)\.(\d+)\](.*)');
    
    lyricContent.split('\n').forEach((line) {
      final match = regex.firstMatch(line);
      if (match != null) {
        int minutes = int.parse(match.group(1)!);
        int seconds = int.parse(match.group(2)!);
        int milliseconds = int.parse(match.group(3)!);
        
        int totalMs = minutes * 60000 + seconds * 1000 + milliseconds * 10;
        lines.add(LyricLine(
          time: totalMs,
          text: match.group(4)!.trim(),
        ));
      }
    });
    
    lines.sort((a, b) => a.time.compareTo(b.time));
    return lines;
  }
}

class LyricLine {
  final int time;
  final String text;
  
  LyricLine({required this.time, required this.text});
}

2. 播放器集成

使用audioplayers包控制播放：

AudioPlayer audioPlayer = AudioPlayer();
Duration _currentPosition = Duration.zero;

void initPlayer() {
  audioPlayer.onPositionChanged.listen((Duration duration) {
    setState(() {
      _currentPosition = duration;
    });
  });
}

3. 歌词同步显示

class LyricWidget extends StatefulWidget {
  @override
  _LyricWidgetState createState() => _LyricWidgetState();
}

class _LyricWidgetState extends State<LyricWidget> {
  List<LyricLine> _lyrics = [];
  int _currentLineIndex = 0;

  @override
  void initState() {
    super.initState();
    _loadLyrics();
  }

  void _loadLyrics() {
    // 从文件或网络加载歌词
    String lrcContent = """[00:01.00]第一句歌词
[00:05.30]第二句歌词""";
    _lyrics = LyricParser.parse(lrcContent);
  }

  void _updateLyric(Duration position) {
    int currentMs = position.inMilliseconds;
    
    for (int i = _lyrics.length - 1; i >= 0; i--) {
      if (currentMs >= _lyrics[i].time) {
        if (_currentLineIndex != i) {
          setState(() {
            _currentLineIndex = i;
          });
        }
        break;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<Duration>(
      stream: audioPlayer.onPositionChanged,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          _updateLyric(snapshot.data!);
        }
        
        return ListView.builder(
          itemCount: _lyrics.length,
          itemBuilder: (context, index) {
            return Text(
              _lyrics[index].text,
              style: TextStyle(
                color: index == _currentLineIndex ? Colors.red : Colors.white,
                fontSize: index == _currentLineIndex ? 18 : 16,
              ),
            );
          },
        );
      },
    );
  }
}

4. 高级功能（可选）

  • 添加歌词滚动动画
  • 实现逐字歌词（需要特殊格式歌词文件）
  • 歌词翻译显示

主要依赖包

dependencies:
  audioplayers: ^5.0.0

这样即可实现基本的音乐播放歌词同步功能，核心是通过播放器的时间变化来匹配对应的歌词行。

回到顶部