Flutter歌词解析插件lyrics_parser的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter歌词解析插件lyrics_parser的使用

简介

lyrics_parser 是一个用于解析 .lrc 文件和同步歌词的 Dart 插件。它支持多种时间标签格式，并且可以从文件或字符串中解析歌词。

CI Check

功能

  • 解析 .lrc 文件或 Lrc 格式的字符串
  • 跟踪解析结果

什么是 .lrc 文件

.lrc 文件是一种基于文本的格式，用于将歌曲歌词与音频同步。更多详情请参考 Wikipedia。

支持的解析规则

  • 支持所有在 Wikipedia 中提到的 ID 标签。
  • 支持分钟:秒.毫秒 和 分钟:秒 时间标签。
  • 注释符号 [:] 后的内容会被忽略。
  • 一行中可以有多个歌词或 ID 标签。
  • 未定义的标签向后兼容。
  • 在某些特殊情况下没有标记的歌词。

使用方法

从歌词字符串解析

import 'package:lyrics_parser/lyrics_parser.dart';

void main() async {
  final string = '[00:11.21]It\'s been a long day without you my friend';
  final parser = LyricsParser(string);
  final result = await parser.parse();
  
  for (final lyric in result.lyricList) {
    print('${lyric.startTimeMillisecond}: ${lyric.content}');
  }
}

从 .lrc 文件解析

import 'dart:io';
import 'package:lyrics_parser/lyrics_parser.dart';

void main() async {
  final file = File('./resources/See You Again.lrc');
  final parser = LyricsParser.fromFile(file);
  await parser.ready();
  final result = await parser.parse();

  for (final lyric in result.lyricList) {
    print('${lyric.startTimeMillisecond}: ${lyric.content}');
  }
}

示例用法

以下是一个完整的示例代码，展示了如何从 .lrc 文件中读取并打印歌词：

import 'dart:io';
import 'package:lyrics_parser/lyrics_parser.dart';

void main(List<String> args) async {
  // 假设你的 .lrc 文件路径为 './resources/See You Again.lrc'
  final file = File('./resources/See You Again.lrc');
  final parser = LyricsParser.fromFile(file);
  
  // 必须先调用 ready 方法
  await parser.ready();
  
  // 解析歌词
  final result = await parser.parse();
  
  // 打印每行歌词及其开始时间（毫秒）
  for (final lyric in result.lyricList) {
    print('${lyric.startTimeMillisecond}: ${lyric.content}');
  }
}

运行上述代码后，控制台输出可能如下：

11210: It's been a long day without you my friend
17310: And I'll tell you all about it when I see you again
23750: We've come a long way from where we began
...

更多关于Flutter歌词解析插件lyrics_parser的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter歌词解析插件lyrics_parser的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 lyrics_parser Flutter 插件的示例代码。这个插件主要用于解析和处理歌词文件（通常是 LRC 格式）。

首先，确保你已经在 pubspec.yaml 文件中添加了 lyrics_parser 依赖：

dependencies:
  flutter:
    sdk: flutter
  lyrics_parser: ^最新版本号  # 请替换为当前最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是一个简单的 Flutter 应用示例，展示如何使用 lyrics_parser 插件来解析 LRC 歌词并显示在屏幕上。

import 'package:flutter/material.dart';
import 'package:lyrics_parser/lyrics_parser.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lyrics Parser Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LyricsScreen(),
    );
  }
}

class LyricsScreen extends StatefulWidget {
  @override
  _LyricsScreenState createState() => _LyricsScreenState();
}

class _LyricsScreenState extends State<LyricsScreen> {
  Lyrics? lyrics;

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

  void _parseLyrics() async {
    // 示例 LRC 歌词
    String lrcContent = """
    [00:00.00]歌手: 周杰伦
    [00:01.00]歌名: 青花瓷
    [00:25.65]素胚勾勒出青花笔锋浓转淡
    [00:32.30]瓶身描绘的牡丹一如你初妆
    [00:39.04]冉冉檀香透过窗心事我了然
    [00:45.64]宣纸上走笔至此搁一半
    ...
    """;

    // 使用 lyrics_parser 解析歌词
    lyrics = await LyricsParser.parse(lrcContent);

    // 更新状态
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lyrics Parser Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: lyrics != null
            ? ListView.builder(
                itemCount: lyrics!.lines.length,
                itemBuilder: (context, index) {
                  final line = lyrics!.lines[index];
                  return ListTile(
                    title: Text(
                      '${line.time.toFormattedString()}: ${line.content}',
                      style: TextStyle(fontSize: 18),
                    ),
                  );
                },
              )
            : Center(
                child: CircularProgressIndicator(),
              ),
      ),
    );
  }
}

// 格式化时间字符串的扩展方法（lyrics_parser 默认提供的时间格式可能不是最直观的，可以自定义）
extension TimeFormatter on Duration {
  String toFormattedString() {
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    return '${twoDigits(inMinutes)}:${twoDigits(inSeconds.remainder(60))}.${inMilliseconds ~/ 10}';
  }
}

在这个示例中，我们：

  1. 在 pubspec.yaml 中添加了 lyrics_parser 依赖。
  2. 创建了一个 Flutter 应用，并在 LyricsScreen 中使用 LyricsParser.parse 方法解析 LRC 歌词。
  3. 使用 ListView.builder 将解析后的歌词逐行显示在屏幕上，每行显示时间戳和歌词内容。
  4. 添加了一个时间格式化扩展方法 toFormattedString，以便更直观地显示时间。

请注意，这个示例代码假设 lyrics_parser 插件提供了 LyricsParser.parse 静态方法和 Lyrics 类，以及 LyricsLine 类包含 time 和 content 属性。如果你使用的插件版本有所不同，请参考相应的文档进行调整。

回到顶部