Pub license

FlutterMusicPlayer

一个Flutter包，可轻松创建可自定义的音乐播放器应用程序或模块

安装

使用 Flutter

$ flutter pub add flutter_music_player

这将在您的包的 pubspec.yaml 文件中添加类似这样的行（并运行一个隐式的 dart pub get）

dependencies:
flutter_music_player: ^0.0.1

主要组件

  • AudioPlayerProvider
  • MinimizedMusicPlayer
  • MaximizedMusicPlayer

AudioPlayerProvider

该提供程序管理播放器的状态，并包含所有必要的音乐播放器功能，例如播放/暂停、下一首、上一首、随机播放等...

在您的 main.dart 文件中的一个提供程序中添加 AudioPlayerProvider()

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => AudioPlayerProvider())
      ],
      child: MaterialApp(
        title: 'MusicPlayer Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
        debugShowCheckedModeBanner: false,
      ),
    );
  }
}

AudioPlayerProvider 默认情况下会提取专辑封面的主色调，但可以通过在其构造函数中提供 extractAlbumCoverDominantColor 参数来禁用。您还可以提供自定义的 albumCoverPlaceHolder，以便在当前播放的音频曲目没有专辑封面包含在其元数据中时显示默认图片。

当点击歌曲的播放按钮时，必须调用 setAudioSource 或 setSingleAudioSource 方法

List<AudioTrack> playlist = [];
 AudioTrack song = AudioTrack(1,
        title: 'TheSongTitle',
        artist: 'TheArtist',
        duration: Duration.zero,
        
        filePath: 'TheFilePath'
     // or
        networkUrl: 'TheFileUrl'
     // either filePath or networkUrl have to be provided
 );
 
playlist.add(song);

audioPlayerProvider.setAudioSource(playlist, 0);
// the second argument is the index of the song (inside the playlist)
// that is wished to be played

// for playing a single track, use : 
audioPlayerProvider.setSingleAudioSource(song);

audioPlayerProvider.playSong();

MinimizedMusicPlayer

最小化播放器，点击后会打开最大化播放器

          MinimizedMusicPlayer(
            onTab: () => Navigator.of(context).push(TheMaximizedPlayerRoute),
            color: audioPlayerProvider.dominantColor,
            nextButton: IconButton(
              onPressed: audioPlayerProvider.next,
              icon: const Icon(
                Icons.skip_next,
                color: Colors.white,
              ),
            ),
            progressBarBackgroundColor: Colors.white10,
            progressBarColor: Colors.white,
          )

上面的代码将生成 此小部件

MaximizedMusicPlayer

为了自定义最大化音乐播放器的布局，有必要提供一个 MusicPlayerCustomizer。MusicPlayerCustomizer 是一个抽象类，它有两个实现

  • NamedPlayerCustomizer：使用基于名称的参数
  • DefaultPlayerCustomizer：使用基于列和行的参数

您可以通过查看 此图片指南 来了解这些参数，该指南展示了参数及其定位

    MaximizedMusicPlayer(
      playerCustomizer: NamedPlayerCustomizer(
        songTitleRowRight: FavoriteButton(),
        midRowFarLeft: QueueButton(),
        midRowFarRight: ShuffleButton(),
        midRowRight: RepeatButton(),
      ),
      backgroundDecoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: const Alignment(1, 1),
          colors: <Color>[
            audioPlayerProvider.dominantColor,
            const Color.fromRGBO(32, 32, 32, 1)
          ],
          tileMode: TileMode.decal,
        ),
      ),
    )

Github

查看 Github