Flutter音乐播放插件music的使用

Flutter音乐播放插件music的使用

Music Player

这是一个在Flutter中轻松播放音乐的插件。

universe

开始使用

添加依赖

将以下依赖添加到您的pubspec.yaml文件中：

dependencies:
  music: ^1.0.3

然后运行以下命令以安装依赖：

$ flutter pub get
权限设置

对于Android，您需要在android/app/build.gradle中设置minSdkVersion为21，并在AndroidManifest.xml中添加权限：

<manifest xmlns:android...>
  ...
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.WAKE_LOCK" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
      android:maxSdkVersion="28"
      tools:ignore="ScopedStorage"/>
  <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
  <application ...
</manifest>

还需要在AndroidManifest.xml中添加服务和接收器：

<manifest xmlns:android...>
  ...
  <application ...>
    <service 
      android:name="com.salkuadrat.music.MusicPlayerService" 
      android:enabled="true"
      android:exported="true">
      <intent-filter>
        <action android:name="android.intent.action.MEDIA_BUTTON"/>
      </intent-filter>
    </service>
    <receiver android:name="androidx.media.session.MediaButtonReceiver">
      <intent-filter>
        <action android:name="android.intent.action.MEDIA_BUTTON"/>
      </intent-filter>
    </receiver>
  </application>
</manifest>

使用方法

首先，导入music包：

import 'package:music/music.dart';

初始化播放器和音乐项：

MusicPlayer player = MusicPlayer(
  onLoading: _onLoading,
  onPlaying: _onPlaying,
  onPaused: _onPaused,
  onStopped: _onStopped,
  onCompleted: _onCompleted,
  onDuration: _onDuration,
  onPosition: _onPosition,
  onError: _onError,
);

Music music = Music(
  id: '_KzHGbpxMOY',
  artist: '88rising',
  title: 'Rich Brian, NIKI, & Warren Hue - California',
  image: 'https://i.ytimg.com/vi/_KzHGbpxMOY/mqdefault.jpg',
  url: 'https://media1.vocaroo.com/mp3/1ga9focwkrUs',
  duration: Duration(seconds: 230),
);

开始播放音乐：

player.play(music);

暂停音乐：

player.pause();

恢复当前播放的音乐：

player.resume();

停止播放：

player.stop();

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用music插件来播放音乐：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:music/music.dart';

void main() {
  runApp(ChangeNotifierProvider(
    create: (_) => PlayerState(),
    child: MyApp(),
  ));
}

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

class _MyAppState extends State<MyApp> {
  MethodChannel channel = MethodChannel('music_example');
  PlayerState get state => Provider.of<PlayerState>(context, listen: false);

  MusicPlayer? player;

  Music music = Music(
    id: '_KzHGbpxMOY',
    artist: '88rising',
    title: 'Rich Brian, NIKI, & Warren Hue - California',
    image: 'https://i.ytimg.com/vi/_KzHGbpxMOY/mqdefault.jpg',
    url: 'https://media1.vocaroo.com/mp3/1ga9focwkrUs',
    duration: Duration(seconds: 230),
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    player = MusicPlayer(
      onLoading: _onLoading,
      onPlaying: _onPlaying,
      onPaused: _onPaused,
      onStopped: _onStopped,
      onCompleted: _onCompleted,
      onDuration: _onDuration,
      onPosition: _onPosition,
      onError: _onError,
    );
  }

  [@override](/user/override)
  void dispose() {
    player?.dispose();
    super.dispose();
  }

  _onLoading() {
    print('Music player is loading...');
    state.startLoading();
  }

  _onPlaying() {
    print('Music player is playing');
    state.stopLoading();
    state.play();
  }

  _onPaused() {
    print('Music player is paused');
    state.pause();
  }

  _onStopped() {
    print('Music player is stopped');
    state.stop();
  }

  _onCompleted() {
    print('Music playing is ended');
    state.pause();
    player?.pause();

    // 根据您的应用程序需求，
    // 当播放完成时，也可以调用 player?.stop()
  }

  _onDuration(Duration duration) {
    print('Music duration: ${duration.inMilliseconds} ms');
    state.duration = duration;
  }

  _onPosition(Duration position) {
    print('Current position: ${position.inMilliseconds} ms');
    state.position = position;
  }

  _onError(String message) {
    print('Music player error: $message');
  }

  Widget get _loading => SizedBox(
        width: 64,
        height: 64,
        child: CircularProgressIndicator(
          strokeWidth: 2,
          valueColor: AlwaysStoppedAnimation(Colors.white54),
        ),
      );

  Widget get _control => Container(
        width: 64,
        height: 64,
        margin: EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(
          color: Colors.transparent,
          border: Border.all(width: 2, color: Colors.white24),
          borderRadius: BorderRadius.all(Radius.circular(32)),
        ),
        child: state.isLoading
            ? _loading
            : state.isPlaying
                ? IconButton(
                    icon: Icon(Icons.pause, color: Colors.white),
                    iconSize: 40,
                    onPressed: player?.pause,
                  )
                : IconButton(
                    icon: Icon(Icons.play_arrow_outlined, color: Colors.white),
                    iconSize: 40,
                    onPressed: () => state.position.inSeconds > 0
                        ? player?.resume()
                        : player?.play(music),
                  ),
      );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WillPopScope(
        onWillPop: () async {
          try {
            await channel.invokeMethod('back');
            return Future.value(false);
          } catch (_) {
            return Future.value(true);
          }
        },
        child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: [0.0, 1.0],
            colors: [Color(0xFF1D6DBD), Color(0xFF43CEA2)],
          )),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            body: Center(
              child: Consumer<PlayerState>(
                builder: (_, state, __) => Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Image.network(music.image, width: 120),
                    Gap(10),
                    Text(music.title, style: TextStyle(color: Colors.white)),
                    Gap(20),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(durationStr(state.position),
                            style: TextStyle(color: Colors.white)),
                        _control,
                        Text(durationStr(state.duration),
                            style: TextStyle(color: Colors.white)),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class PlayerState extends ChangeNotifier {
  Duration _duration = Duration(milliseconds: 0);
  Duration _position = Duration(milliseconds: 0);
  bool _isPlaying = false;
  bool _isLoading = false;

  Duration get duration => _duration;
  Duration get position => _position;
  bool get isPlaying => _isPlaying;
  bool get isLoading => _isLoading;

  startLoading() {
    _isLoading = true;
    notifyListeners();
  }

  stopLoading() {
    _isLoading = false;
    notifyListeners();
  }

  play() {
    _isPlaying = true;
    notifyListeners();
  }

  pause() {
    _isPlaying = false;
    notifyListeners();
  }

  stop() {
    _isPlaying = false;
    notifyListeners();
  }

  set duration(Duration value) {
    _duration = value;
    notifyListeners();
  }

  set position(Duration value) {
    _position = value;
    notifyListeners();
  }
}

String durationStr(Duration dur) {
  String two(int n) {
    if (n >= 10) return "$n";
    return "0$n";
  }

  int hour = dur.inHours;
  int minute = dur.inMinutes.remainder(60);
  int second = dur.inSeconds.remainder(60);

  if (hour > 0) {
    return '${two(hour)}:${two(minute)}:${two(second)}';
  }

  return '${two(minute)}:${two(second)}';
}

更多关于Flutter音乐播放插件music的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter音乐播放插件music的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用music插件来实现音乐播放功能的代码案例。请注意，由于music可能不是Flutter社区中广泛认可的官方或知名插件名称，我假设这里提到的music插件是一个假设的或者第三方音乐播放插件。通常，Flutter中用于音乐播放的插件可能是audioplayers或者just_audio等。不过，为了符合你的要求，我将基于一个假设的music插件来进行演示。

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

dependencies:
  flutter:
    sdk: flutter
  music: ^x.y.z  # 替换为实际的版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤使用music插件来播放音乐：

  1. 导入插件：
import 'package:music/music.dart';
  1. 初始化插件并播放音乐：
void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  MusicController _musicController;

  @override
  void initState() {
    super.initState();
    // 初始化MusicController
    _musicController = MusicController();

    // 播放音乐（假设音乐文件位于assets目录下）
    _playMusicFromAssets('assets/music/sample.mp3');
  }

  @override
  void dispose() {
    // 释放资源
    _musicController.dispose();
    super.dispose();
  }

  void _playMusicFromAssets(String assetPath) async {
    try {
      // 加载并播放音乐
      await _musicController.loadAsset(assetPath);
      _musicController.play();
    } catch (e) {
      print('Error playing music: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Music Player Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  // 播放音乐（假设已经加载）
                  _musicController.play();
                },
                child: Text('Play'),
              ),
              ElevatedButton(
                onPressed: () {
                  // 暂停音乐
                  _musicController.pause();
                },
                child: Text('Pause'),
              ),
              ElevatedButton(
                onPressed: () {
                  // 停止音乐
                  _musicController.stop();
                },
                child: Text('Stop'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意：

  • 上面的代码是基于假设的music插件API编写的。实际的插件可能有不同的API和方法名。
  • 确保你的assets目录下有一个名为sample.mp3的音乐文件，并且在pubspec.yaml中正确声明了assets：
flutter:
  assets:
    - assets/music/sample.mp3

  • 如果music插件不支持直接从assets加载音乐，你可能需要先将音乐文件复制到设备的存储中，然后使用文件路径进行加载。

  • 由于music插件不是广泛认可的插件名称，如果找不到或无法使用该插件，建议考虑使用audioplayers或just_audio等成熟且广泛使用的音乐播放插件。

希望这个示例能帮助你理解如何在Flutter应用中使用音乐播放插件。如果有具体的插件名称或API文档，代码可以进一步调整和细化。

回到顶部