Flutter音频后台播放插件just_audio_background的使用
Flutter音频后台播放插件just_audio_background的使用
简介
just_audio_background 插件为 just_audio 提供了背景播放支持和远程控制功能（如通知栏、锁屏、耳机按钮、智能手表、Android Auto 和 CarPlay）。它适用于应用程序仅有一个 AudioPlayer 实例的简单用例。如果你的应用有更复杂的需求，建议直接使用 audio_service 包，以获得更多的控制选项。
安装与配置
添加依赖
在 pubspec.yaml 文件中添加以下依赖：
dependencies:
just_audio: ^0.9.27 # 请根据需要替换版本号
just_audio_background: ^0.0.8 # 请根据需要替换版本号
初始化代码
在应用的 main 方法中添加初始化代码：
import 'package:just_audio_background/just_audio_background.dart';
Future<void> main() async {
await JustAudioBackground.init(
androidNotificationChannelId: 'com.ryanheise.bg_demo.channel.audio',
androidNotificationChannelName: 'Audio playback',
androidNotificationOngoing: true,
);
runApp(MyApp());
}
创建播放器
创建一个普通的 AudioPlayer 实例：
AudioPlayer player = AudioPlayer();
设置媒体项标签
为每个加载到播放器中的 IndexedAudioSource 设置 MediaItem 标签：
AudioSource.uri(
Uri.parse('https://example.com/song1.mp3'),
tag: MediaItem(
id: '1',
album: "Album name",
title: "Song name",
artUri: Uri.parse('https://example.com/albumart.jpg'),
),
),
平台特定配置
Android 配置
编辑 AndroidManifest.xml 文件，添加以下权限和服务声明：
<manifest xmlns:tools="http://schemas.android.com/tools" ...>
<!-- 添加这两个权限 -->
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<!-- 如果目标 SDK 是 34 或更高，还需添加此权限 -->
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"/>
<application ...>
...
<!-- 编辑现有 "ACTIVITY" 元素的 android:name 属性 -->
<activity android:name="com.ryanheise.audioservice.AudioServiceActivity" ...>
...
</activity>
<!-- 添加这个 "SERVICE" 元素 -->
<service android:name="com.ryanheise.audioservice.AudioService"
android:foregroundServiceType="mediaPlayback"
android:exported="true" tools:ignore="Instantiatable">
<intent-filter>
<action android:name="android.media.browse.MediaBrowserService" />
</intent-filter>
</service>
<!-- 添加这个 "RECEIVER" 元素 -->
<receiver android:name="com.ryanheise.audioservice.MediaButtonReceiver"
android:exported="true" tools:ignore="Instantiatable">
<intent-filter>
<action android:name="android.intent.action.MEDIA_BUTTON" />
</intent-filter>
</receiver>
</application>
</manifest>
iOS 配置
在 Info.plist 文件中添加以下内容：
<key>UIBackgroundModes</key>
<array>
<string>audio</string>
</array>
示例代码
以下是一个完整的示例代码，展示了如何使用 just_audio_background 进行音频播放：
import 'package:audio_session/audio_session.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:just_audio/just_audio.dart';
import 'package:just_audio_background/just_audio_background.dart';
import 'package:rxdart/rxdart.dart';
Future<void> main() async {
await JustAudioBackground.init(
androidNotificationChannelId: 'com.ryanheise.bg_demo.channel.audio',
androidNotificationChannelName: 'Audio playback',
androidNotificationOngoing: true,
);
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
static int _nextMediaId = 0;
late AudioPlayer _player;
final _playlist = ConcatenatingAudioSource(children: [
AudioSource.uri(
Uri.parse(
"https://s3.amazonaws.com/scifri-episodes/scifri20181123-episode.mp3"),
tag: MediaItem(
id: '${_nextMediaId++}',
album: "Science Friday",
title: "A Salute To Head-Scratching Science",
artUri: Uri.parse(
"https://media.wnyc.org/i/1400/1400/l/80/1/ScienceFriday_WNYCStudios_1400.jpg"),
),
),
AudioSource.uri(
Uri.parse("https://s3.amazonaws.com/scifri-segments/scifri201711241.mp3"),
tag: MediaItem(
id: '${_nextMediaId++}',
album: "Science Friday",
title: "From Cat Rheology To Operatic Incompetence",
artUri: Uri.parse(
"https://media.wnyc.org/i/1400/1400/l/80/1/ScienceFriday_WNYCStudios_1400.jpg"),
),
),
]);
@override
void initState() {
super.initState();
_player = AudioPlayer();
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
statusBarColor: Colors.black,
));
_init();
}
Future<void> _init() async {
final session = await AudioSession.instance;
await session.configure(const AudioSessionConfiguration.speech());
_player.playbackEventStream.listen((event) {},
onError: (Object e, StackTrace stackTrace) {
print('A stream error occurred: $e');
});
try {
await _player.setAudioSource(_playlist);
} catch (e, stackTrace) {
print("Error loading playlist: $e");
print(stackTrace);
}
}
@override
void dispose() {
_player.dispose();
super.dispose();
}
Stream<PositionData> get _positionDataStream =>
Rx.combineLatest3<Duration, Duration, Duration?, PositionData>(
_player.positionStream,
_player.bufferedPositionStream,
_player.durationStream,
(position, bufferedPosition, duration) =>
PositionData(position, bufferedPosition, duration ?? Duration.zero));
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: StreamBuilder<SequenceState?>(
stream: _player.sequenceStateStream,
builder: (context, snapshot) {
final state = snapshot.data;
if (state?.sequence.isEmpty ?? true) {
return const SizedBox();
}
final metadata = state!.currentSource!.tag as MediaItem;
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Image.network(metadata.artUri.toString())),
),
),
Text(metadata.album!,
style: Theme.of(context).textTheme.titleLarge),
Text(metadata.title),
],
);
},
),
),
ControlButtons(_player),
StreamBuilder<PositionData>(
stream: _positionDataStream,
builder: (context, snapshot) {
final positionData = snapshot.data;
return SeekBar(
duration: positionData?.duration ?? Duration.zero,
position: positionData?.position ?? Duration.zero,
bufferedPosition:
positionData?.bufferedPosition ?? Duration.zero,
onChangeEnd: (newPosition) {
_player.seek(newPosition);
},
);
},
),
const SizedBox(height: 8.0),
Row(
children: [
StreamBuilder<LoopMode>(
stream: _player.loopModeStream,
builder: (context, snapshot) {
final loopMode = snapshot.data ?? LoopMode.off;
const icons = [
Icon(Icons.repeat, color: Colors.grey),
Icon(Icons.repeat, color: Colors.orange),
Icon(Icons.repeat_one, color: Colors.orange),
];
const cycleModes = [
LoopMode.off,
LoopMode.all,
LoopMode.one,
];
final index = cycleModes.indexOf(loopMode);
return IconButton(
icon: icons[index],
onPressed: () {
_player.setLoopMode(cycleModes[
(cycleModes.indexOf(loopMode) + 1) %
cycleModes.length]);
},
);
},
),
Expanded(
child: Text(
"Playlist",
style: Theme.of(context).textTheme.titleLarge,
textAlign: TextAlign.center,
),
),
StreamBuilder<bool>(
stream: _player.shuffleModeEnabledStream,
builder: (context, snapshot) {
final shuffleModeEnabled = snapshot.data ?? false;
return IconButton(
icon: shuffleModeEnabled
? const Icon(Icons.shuffle, color: Colors.orange)
: const Icon(Icons.shuffle, color: Colors.grey),
onPressed: () async {
final enable = !shuffleModeEnabled;
if (enable) {
await _player.shuffle();
}
await _player.setShuffleModeEnabled(enable);
},
);
},
),
],
),
SizedBox(
height: 240.0,
child: StreamBuilder<SequenceState?>(
stream: _player.sequenceStateStream,
builder: (context, snapshot) {
final state = snapshot.data;
final sequence = state?.sequence ?? [];
return ReorderableListView(
onReorder: (int oldIndex, int newIndex) {
if (oldIndex < newIndex) newIndex--;
_playlist.move(oldIndex, newIndex);
},
children: [
for (var i = 0; i < sequence.length; i++)
Dismissible(
key: ValueKey(sequence[i]),
background: Container(
color: Colors.redAccent,
alignment: Alignment.centerRight,
child: const Padding(
padding: EdgeInsets.only(right: 8.0),
child: Icon(Icons.delete, color: Colors.white),
),
),
onDismissed: (dismissDirection) {
_playlist.removeAt(i);
},
child: Material(
color: i == state!.currentIndex
? Colors.grey.shade300
: null,
child: ListTile(
title: Text(sequence[i].tag.title as String),
onTap: () {
_player.seek(Duration.zero, index: i);
},
),
),
),
],
);
},
),
),
],
),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
_playlist.add(AudioSource.uri(
Uri.parse("asset:///audio/nature.mp3"),
tag: MediaItem(
id: '${_nextMediaId++}',
album: "Public Domain",
title: "Nature Sounds",
artUri: Uri.parse(
"https://media.wnyc.org/i/1400/1400/l/80/1/ScienceFriday_WNYCStudios_1400.jpg"),
),
));
},
),
),
);
}
}
class ControlButtons extends StatelessWidget {
final AudioPlayer player;
const ControlButtons(this.player, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.volume_up),
onPressed: () {
showSliderDialog(
context: context,
title: "Adjust volume",
divisions: 10,
min: 0.0,
max: 1.0,
stream: player.volumeStream,
onChanged: player.setVolume,
);
},
),
StreamBuilder<SequenceState?>(
stream: player.sequenceStateStream,
builder: (context, snapshot) => IconButton(
icon: const Icon(Icons.skip_previous),
onPressed: player.hasPrevious ? player.seekToPrevious : null,
),
),
StreamBuilder<PlayerState>(
stream: player.playerStateStream,
builder: (context, snapshot) {
final playerState = snapshot.data;
final processingState = playerState?.processingState;
final playing = playerState?.playing;
if (processingState == ProcessingState.loading ||
processingState == ProcessingState.buffering) {
return Container(
margin: const EdgeInsets.all(8.0),
width: 64.0,
height: 64.0,
child: const CircularProgressIndicator(),
);
} else if (playing != true) {
return IconButton(
icon: const Icon(Icons.play_arrow),
iconSize: 64.0,
onPressed: player.play,
);
} else if (processingState != ProcessingState.completed) {
return IconButton(
icon: const Icon(Icons.pause),
iconSize: 64.0,
onPressed: player.pause,
);
} else {
return IconButton(
icon: const Icon(Icons.replay),
iconSize: 64.0,
onPressed: () => player.seek(Duration.zero,
index: player.effectiveIndices!.first),
);
}
},
),
StreamBuilder<SequenceState?>(
stream: player.sequenceStateStream,
builder: (context, snapshot) => IconButton(
icon: const Icon(Icons.skip_next),
onPressed: player.hasNext ? player.seekToNext : null,
),
),
StreamBuilder<double>(
stream: player.speedStream,
builder: (context, snapshot) => IconButton(
icon: Text("${snapshot.data?.toStringAsFixed(1)}x",
style: const TextStyle(fontWeight: FontWeight.bold)),
onPressed: () {
showSliderDialog(
context: context,
title: "Adjust speed",
divisions: 10,
min: 0.5,
max: 1.5,
stream: player.speedStream,
onChanged: player.setSpeed,
);
},
),
),
],
);
}
}
class PositionData {
final Duration position;
final Duration bufferedPosition;
final Duration duration;
PositionData(this.position, this.bufferedPosition, this.duration);
}
通过以上步骤和示例代码，你可以实现一个支持后台播放和远程控制的音频播放应用。希望这些信息对你有所帮助！
更多关于Flutter音频后台播放插件just_audio_background的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter音频后台播放插件just_audio_background的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用just_audio_background插件来实现音频后台播放的代码案例。这个插件允许你的应用在进入后台后继续播放音频。
1. 添加依赖
首先，你需要在pubspec.yaml文件中添加just_audio和just_audio_background的依赖：
dependencies:
flutter:
sdk: flutter
just_audio: ^0.9.17 # 请检查最新版本号
just_audio_background: ^0.6.12 # 请检查最新版本号
2. 导入包
在你的Dart文件中导入这两个包：
import 'package:just_audio/just_audio.dart';
import 'package:just_audio_background/just_audio_background.dart';
3. 初始化AudioPlayer和BackgroundAudioTask
在你的应用中初始化AudioPlayer和BackgroundAudioTask。这里是一个基本的示例：
void main() {
WidgetsFlutterBinding.ensureInitialized();
AudioPlayer audioPlayer = AudioPlayer();
BackgroundAudioTask backgroundAudioTask = BackgroundAudioTask(audioPlayer);
// 注册后台音频任务
AudioService.initialize(
backgroundTaskEntrypoint: backgroundAudioTask.entrypoint,
config: AudioServiceConfig(
androidNotificationChannelId: 'channel_id',
androidNotificationChannelName: 'Background Audio',
androidNotificationImportance: Importance.defaultImportance,
iosCategory: .playback,
),
);
runApp(MyApp(audioPlayer: audioPlayer));
}
class MyApp extends StatelessWidget {
final AudioPlayer audioPlayer;
MyApp({required this.audioPlayer});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Just Audio Background Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () async {
// 播放音频
final uri = Uri.parse('https://example.com/audio.mp3');
await audioPlayer.setUrl(uri);
await audioPlayer.play();
},
child: Text('Play Audio'),
),
ElevatedButton(
onPressed: () {
// 暂停音频
audioPlayer.pause();
},
child: Text('Pause Audio'),
),
ElevatedButton(
onPressed: () {
// 停止音频
audioPlayer.stop();
},
child: Text('Stop Audio'),
),
],
),
),
),
);
}
}
4. 配置Android和iOS
Android
在AndroidManifest.xml中添加权限和必要的配置：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.yourapp">
<application
... >
<!-- 添加服务声明 -->
<service
android:name="com.ryanheise.audioservice.AudioService"
android:enabled="true"
android:exported="true"
android:foregroundServiceType="mediaPlayback" />
<!-- 其他配置 -->
</application>
<!-- 添加权限 -->
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
</manifest>
创建一个通知渠道（如果需要）：
// 在你的Dart代码中，比如`main.dart`的顶部
import 'package:android_notification_channels/android_notification_channels.dart';
void createNotificationChannel() {
if (Platform.isAndroid) {
AndroidNotificationChannels.createChannel(
'channel_id', // id
'Background Audio', // title
'Channel for background audio playback', // description
importance: Importance.defaultImportance,
playSound: false,
);
}
}
// 在`main`函数中调用它
void main() {
WidgetsFlutterBinding.ensureInitialized();
createNotificationChannel(); // 调用这个函数
...
}
iOS
在Info.plist中添加后台模式：
<key>UIBackgroundModes</key>
<array>
<string>audio</string>
</array>
5. 运行应用
现在，你可以运行你的Flutter应用，并且在播放音频时将其切换到后台，音频应该会继续播放。
这个示例展示了基本的音频播放、暂停和停止功能，并配置了后台音频播放所需的设置。你可以根据需求进一步扩展功能，比如添加进度条、音量控制等。
