Flutter音频播放插件flutter_minimalist_audio_player的使用

该插件是一个简单的UI实现，用于AudioPlayer插件。它仅显示一个用于播放媒体的图标按钮。

极简音频播放器还提供了淡入淡出过渡效果。

使用方法

查看示例文件夹中的示例代码。

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

const radios = {
  "Europe 2": "https://europe2.lmn.fm/europe2.mp3",
  "RTS": "https://sc.creacast.com/rts-national.mp3",
  "Skyrock": "https://icecast8.play.cz/skyrock128.mp3",
  "Europe 1": "https://europe1.lmn.fm/europe1.mp3"
};

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  MiniPlayer? _currentPlayer;

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

  // 平台消息是异步的，因此我们通过异步方法进行初始化。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('极简音频播放器'),
        ),
        body: Center(
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: radios.length,
            itemExtent: 50,
            itemBuilder: (context, index) {
              return DefaultTextStyle(
                  style: const TextStyle().copyWith(fontSize: 25, color: Colors.amber),
                  child: radioWidget(radios.keys.elementAt(index), radios.values.elementAt(index)));
            },
          ),
        ),
      ),
    );
  }

  Widget radioWidget(String name, String url) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          Icons.radio,
          color: Theme.of(context).colorScheme.primary,
        ),
        const SizedBox(width: 5),
        Text(name),
        const SizedBox(width: 5),
        MinimalistAudioPlayer(
          media: url,
          beforeStart: (p) async {
            // 在开始播放前，先停止当前播放器并淡出。
            await _currentPlayer?.fadeOut();
            _currentPlayer = p;
          },
          onStop: (p) {
            // 当播放器停止时，将当前播放器置为空。
            if (_currentPlayer == p) _currentPlayer = null;
          },
        ),
      ],
    );
  }
}

代码解释

1. 导入必要的库：

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

2. 定义广播电台列表：

   const radios = {
     "Europe 2": "https://europe2.lmn.fm/europe2.mp3",
     "RTS": "https://sc.creacast.com/rts-national.mp3",
     "Skyrock": "https://icecast8.play.cz/skyrock128.mp3",
     "Europe 1": "https://europe1.lmn.fm/europe1.mp3"
   };
   

3. 创建主应用类：

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatefulWidget {
     const MyApp({super.key});
   
     @override
     State<MyApp> createState() => _MyAppState();
   }
   

4. 定义状态类：

   class _MyAppState extends State<MyApp> {
     MiniPlayer? _currentPlayer;
   
     @override
     void initState() {
       super.initState();
     }
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: const Text('极简音频播放器'),
           ),
           body: Center(
             child: ListView.builder(
               shrinkWrap: true,
               itemCount: radios.length,
               itemExtent: 50,
               itemBuilder: (context, index) {
                 return DefaultTextStyle(
                     style: const TextStyle().copyWith(fontSize: 25, color: Colors.amber),
                     child: radioWidget(radios.keys.elementAt(index), radios.values.elementAt(index)));
               },
             ),
           ),
         ),
       );
     }
   }
   

5. 定义单个广播电台的组件：

   Widget radioWidget(String name, String url) {
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Icon(
           Icons.radio,
           color: Theme.of(context).colorScheme.primary,
         ),
         const SizedBox(width: 5),
         Text(name),
         const SizedBox(width: 5),
         MinimalistAudioPlayer(
           media: url,
           beforeStart: (p) async {
             // 在开始播放前，先停止当前播放器并淡出。
             await _currentPlayer?.fadeOut();
             _currentPlayer = p;
           },
           onStop: (p) {
             // 当播放器停止时，将当前播放器置为空。
             if (_currentPlayer == p) _currentPlayer = null;
           },
         ),
       ],
     );
   }