Flutter歌词显示插件my_lyric的使用

Flutter歌词显示插件my_lyric的使用

DOCS/文档

  • 中文文档

Features/特性

  • 您可以使用它来解析音乐歌词字符串（.lrc），例如：
    • [00.11.22] hello coolight
  • 解析后返回一个对象，便于读写。
  • my_lyric 支持多种标准和非标准格式的 lrc 文件，
  • 我们遵循 casually decode 和 strictly encode
  • 例如：

info:

  • [ti:xxx]
  • [ar:xxx]
  • [hello:xxx]
  • ......

歌词:

  • [minute:second.millisecond] lyricContent
    • 例如 [01:11.22] hello
  • [minute:second:millisecond] lyricContent
    • 例如 [01:11:22] hello
  • [minute:second] lyricContent
    • 例如 [01:11] hello

翻译:

  • 没有时间或相同时间:

    • [01:11.22] lyricContent1

    • lyricContent1 translate

    • [01:33.22] lyricContent2

    • [01:33.22] lyricContent2 translate

多个时间在一行内:

  • [minute:second.millisecond][minute2:second2] lyricContent To:
  • [minute:second.millisecond] lyricContent
  • And [minute2:second2] lyricContent

时间在歌词内容之后:

  • lyricContent [minute:second.millisecond]

Getting started/开始使用

  • 在您的 pubspec.yaml 文件中添加以下依赖：

    dependencies:
  my_lyric:

  • 导入包：

    import 'package:my_lyric/MyLyric.dart';

Usage/用法

解析 .lrc 字符串到对象

void test() {
  // 定义一个包含歌词的字符串
  final lrcStr = """
  [ti:天后]
  [ar:陈势安]
  [00:27.43]终于找到借口
  [00:30.33]趁着醉意上心头
  [00:33.28]表达我所有感受
  """;

  // 使用 MyLyric_c.decodeLrcString 方法解析歌词字符串
  final relist = MyLyric_c.decodeLrcString(
    lrcStr,
  );

  // 输出解析结果
  print(relist);
}

将对象编码为 .lrc 字符串

void test() async {
  // 创建一个空的 lrc 对象列表
  final List<LyricSrcItemEntity_c> lrcList = [];

  // 使用 MyLyric_c.encodeLrcString 方法将对象列表编码为 .lrc 字符串
  final lrcStr = MyLyric_c.encodeLrcString(
    lrcList,
  );

  // 将编码后的字符串写入文件
  final file = File("./test.lrc");

  // 如果文件不存在则创建文件
  if (false == await file.exists()) {
    await file.create(recursive: true);
  }

  // 将字符串写入文件
  await file.writeAsString(lrcStr);

  // 输出写入成功信息
  print("LRC 文件已成功写入。");
}

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

1 回复

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


my_lyric 是一个用于在 Flutter 应用中显示歌词的插件。它可以帮助你在应用中实现歌词同步显示的功能，类似于音乐播放器中的歌词滚动效果。以下是如何使用 my_lyric 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 my_lyric 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  my_lyric: ^版本号  # 请替换为最新的版本号

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 my_lyric 插件：

import 'package:my_lyric/my_lyric.dart';

3. 使用 Lyric 组件

my_lyric 插件提供了一个 Lyric 组件，你可以直接在你的 UI 中使用它。以下是一个简单的示例：

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

class LyricScreen extends StatefulWidget {
  [@override](/user/override)
  _LyricScreenState createState() => _LyricScreenState();
}

class _LyricScreenState extends State<LyricScreen> {
  // 示例歌词数据
  final String lyrics = '''
[00:00.00]这是第一句歌词
[00:05.00]这是第二句歌词
[00:10.00]这是第三句歌词
[00:15.00]这是第四句歌词
''';

  // 当前播放时间
  double currentTime = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('歌词显示示例'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Lyric(
              lyric: lyrics,
              position: currentTime,
              size: Size(double.infinity, 300),
              lyricStyle: TextStyle(color: Colors.black, fontSize: 16),
              highlightStyle: TextStyle(color: Colors.red, fontSize: 18),
              textAlign: TextAlign.center,
            ),
          ),
          Slider(
            value: currentTime,
            min: 0,
            max: 20,
            onChanged: (value) {
              setState(() {
                currentTime = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: LyricScreen(),
  ));
}
回到顶部