Flutter歌词显示插件genius_lyrics的使用

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

Flutter歌词显示插件 genius_lyrics 的使用

genius_lyrics 是一个用于访问 Genius.com API 的 Dart 客户端，基于 LyricsGenius。这个包提供了一个简单的接口来获取歌曲、艺术家和歌词数据。

Setup（设置）

在使用这个包之前，你需要注册一个免费的账户以授权访问 Genius API，该账户会提供一个必需的 accessToken。具体使用示例请参阅下面的“Usage”部分。

Usage（使用方法）

首先导入包并初始化 Genius：

import 'package:genius_lyrics/genius_lyrics.dart';

Genius genius = Genius(accessToken: YOUR_TOKEN);

搜索艺术家的相关歌曲

以下是如何通过给定艺术家的名字搜索歌曲的示例代码：

Artist? artist = await genius.searchArtist(
    artistName: 'Eminem', 
    maxSongs: 5, 
    sort: SongsSorting.release_date,
    includeFeatures: true // 设置为true可以获取所有该艺术家参与的歌曲
);

if (artist != null) {
  for (var song in artist.songs) {
    print(song.title);
  }
}

搜索单首歌曲

你可以根据艺术家和歌曲名来搜索特定的歌曲：

Song? song = await genius.searchSong(artist: 'J. Cole', title: 'KOD');

if (song != null) {
  print(song.lyrics);
}

添加歌曲到艺术家对象中

如果你需要手动添加歌曲到艺术家对象中，可以这样做：

artist?.addSong(newSong: song!);

将歌词保存到文件

你可以将艺术家的歌曲歌词保存到本地文件系统中：

artist?.saveLyrics(destPath: 'D:/Music/Eminem/Lyrics');

或者对于专辑来说：

Album? album = await genius.searchAlbum(name: 'The Off-Season', artist: 'J.Cole');
album?.saveLyrics(destPath: 'D:/Desktop/test');

完整示例

这里是一个完整的示例，展示了如何使用 genius_lyrics 包来搜索艺术家、专辑以及具体的歌曲，并打印出相关信息或歌词：

import 'package:genius_lyrics/genius_lyrics.dart';

void main(List<String> args) async {
  Genius genius = Genius(accessToken: YOUR_TOKEN);

  // 搜索艺术家及其歌曲
  Artist? artist = await genius.searchArtist(
      artistName: 'Eminem', 
      maxSongs: 5, 
      sort: SongsSorting.release_date, 
      includeFeatures: true
  );

  if (artist != null) {
    for (var song in artist.songs) {
      print(song.title);
    }
  }

  // 搜索专辑并保存其歌词
  Album? album = await genius.searchAlbum(name: 'The Off-Season', artist: 'J.Cole');
  album?.saveLyrics(destPath: 'D:/Desktop/test');

  if (album != null) {    
      print(album.tracks.length);
      for (var track in album.tracks) {
        print(track.title);
      }    
  }

  // 搜索具体歌曲并打印歌词
  Song? song = await genius.searchSong(artist: 'J. Cole', title: 'KOD');

  if (song != null) {
    print(song.lyrics);
  }
}

请确保替换 YOUR_TOKEN 为你从 Genius 获得的实际访问令牌。通过这种方式，你可以轻松地在你的 Flutter 应用程序中集成歌词查询功能。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用genius_lyrics插件来显示歌词的示例代码。genius_lyrics插件主要用于在Flutter应用中显示同步歌词，这对于音乐播放器应用来说非常有用。

首先，确保你的Flutter项目中已经添加了genius_lyrics依赖。在pubspec.yaml文件中添加以下依赖：

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

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

接下来，我们来看一个基本的示例代码，展示如何使用genius_lyrics插件来显示歌词。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Lyric Display',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LyricScreen(),
    );
  }
}

class LyricScreen extends StatefulWidget {
  @override
  _LyricScreenState createState() => _LyricScreenState();
}

class _LyricScreenState extends State<LyricScreen> {
  // 示例歌词数据，通常你会从API或其他数据源获取这些歌词
  final String lyrics = '''
  [00:00.00]Verse 1:
  [00:05.00]I'm singing my song,
  [00:08.00]I'm flying so high,
  [00:12.00]I'm reaching for the stars tonight,
  [00:17.00]Yeah, I'm dreaming big dreams,
  [00:20.00]I'm painting the skies,
  [00:24.00]With colors that shine so bright,

  [00:30.00]Chorus:
  [00:32.00]I'm living my life,
  [00:35.00]I'm doing it right,
  [00:39.00]I'm never looking back,
  [00:42.00]I'm on top of the world,
  [00:45.00]Feeling alive,
  [00:48.00]With every heartbeat,
  [00:52.00]I'm singing out loud,
  [00:55.00]I'm loving this ride.
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lyric Display Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: GeniusLyrics(
          lyrics: lyrics,
          currentDuration: Duration(seconds: 10), // 假设当前播放到10秒
          textStyle: TextStyle(fontSize: 18),
          highlightTextStyle: TextStyle(fontSize: 18, color: Colors.red),
          scrollPhysics: BouncingScrollPhysics(),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个显示歌词的页面。GeniusLyrics组件接收以下参数：

  • lyrics: 包含时间戳的歌词字符串。
  • currentDuration: 表示当前播放时间的Duration对象。这里我们假设当前播放到10秒。
  • textStyle: 歌词的默认文本样式。
  • highlightTextStyle: 当前播放时间对应歌词行的高亮文本样式。
  • scrollPhysics: 控制滚动行为的物理属性。

请注意，lyrics字符串需要按照特定格式编写，其中每行歌词前都有一个时间戳，例如[00:00.00]。这个格式是GeniusLyrics插件解析歌词所必需的。

你可以通过更改currentDuration的值来模拟歌词的滚动和高亮显示。在实际应用中，你可能会根据音频播放器的当前播放时间来动态更新这个值。

希望这个示例能帮助你理解如何在Flutter项目中使用genius_lyrics插件来显示歌词！

回到顶部