flutter如何让audioplayers播放音频时同步到通知栏

“在Flutter中使用audioplayers插件播放音频时，如何让音频信息同步显示在手机通知栏？目前播放功能正常，但通知栏没有显示任何播放控件或歌曲信息。需要实现类似音乐播放器的效果，请问该如何配置或添加哪些代码？”

2 回复

使用audioplayers配合audio_service插件。在AudioHandler中实现播放控制，更新通知栏信息。设置媒体按钮和播放状态即可同步。

更多关于flutter如何让audioplayers播放音频时同步到通知栏的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 audioplayers 库播放音频时，可以通过集成 audio_service 包来实现通知栏同步控制。以下是实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  audioplayers: ^5.0.0
  audio_service: ^0.18.0

2. 配置 Android 权限（仅 Android）

在 android/app/src/main/AndroidManifest.xml 中添加：

<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

3. 实现 AudioHandler

创建自定义的 AudioHandler 来处理音频播放和通知栏交互：

import 'package:audio_service/audio_service.dart';
import 'package:audioplayers/audioplayers.dart';

class MyAudioHandler extends BaseAudioHandler {
  final AudioPlayer _audioPlayer = AudioPlayer();

  MyAudioHandler() {
    // 监听播放状态
    _audioPlayer.onPlayerStateChanged.listen((state) {
      playbackState.add(playbackState.value.copyWith(
        controls: [
          MediaControl.play,
          MediaControl.pause,
          MediaControl.stop,
        ],
        androidCompactActionIndices: [0, 1, 2],
        processingState: _getProcessingState(state),
        playing: state == PlayerState.playing,
      ));
    });
  }

  AudioProcessingState _getProcessingState(PlayerState state) {
    switch (state) {
      case PlayerState.playing:
        return AudioProcessingState.ready;
      case PlayerState.paused:
        return AudioProcessingState.ready;
      case PlayerState.stopped:
        return AudioProcessingState.idle;
      case PlayerState.completed:
        return AudioProcessingState.completed;
      default:
        return AudioProcessingState.idle;
    }
  }

  @override
  Future<void> play() async {
    await _audioPlayer.play(UrlSource('https://example.com/audio.mp3'));
  }

  @override
  Future<void> pause() async {
    await _audioPlayer.pause();
  }

  @override
  Future<void> stop() async {
    await _audioPlayer.stop();
    await super.stop();
  }
}

4. 初始化 AudioService

在 main.dart 中初始化：

void main() async {
  await AudioService.init(
    builder: () => MyAudioHandler(),
    config: AudioServiceConfig(
      androidNotificationChannelId: 'com.example.audio_channel',
      androidNotificationChannelName: 'Audio Playback',
      androidNotificationOngoing: true,
    ),
  );
  runApp(MyApp());
}

5. 控制播放

在需要控制播放的页面中：

// 开始播放
AudioService.play();

// 暂停
AudioService.pause();

// 停止
AudioService.stop();

关键点说明：

  • audio_service 负责管理通知栏界面和媒体控制
  • audioplayers 负责实际音频播放
  • 通过 AudioHandler 将两者状态同步
  • 通知栏会自动显示播放控制按钮和进度（需额外配置进度更新）

这样即可实现音频播放时在通知栏显示控制界面，并保持状态同步。

回到顶部