Flutter音频服务插件audio_service_web的使用

audio_service_web 插件简介

audio_service_web 是一个用于在Flutter项目中处理音频播放服务的插件，特别适用于需要创建后台播放功能的应用。该插件为开发者提供了一种便捷的方式，以实现跨平台（Android、iOS 和 Web）的音频播放服务，而无需担心不同平台之间的差异。

快速开始

添加依赖

首先，在你的 pubspec.yaml 文件中添加 audio_service 和 just_audio 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  audio_service: ^0.18.0 # 确认版本是否最新
  just_audio: ^0.9.17 # 确认版本是否最新

然后执行 flutter pub get 来安装这些包。

创建AudioHandler

接下来，你需要创建一个继承自 BaseAudioHandler 的类来管理音频播放逻辑。下面是一个简单的例子，它展示了如何设置一个基本的 AudioHandler：

import 'package:audio_service/audio_service.dart';

class MyAudioHandler extends BaseAudioHandler {
  MyAudioHandler() : super();

  // 在这里定义你的音频控制逻辑
}

配置Web平台支持

对于Web平台的支持，你需要确保项目中的 index.html 文件正确配置了 <base href="/"> 标签，并且在 web 目录下的 main.dart.js 文件可以被正常加载。此外，还需要在 lib/main.dart 中初始化 audio_service：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AudioService.init(
    builder: () => MyAudioHandler(),
    config: const AudioServiceConfig(
      androidNotificationChannelId: 'com.yourcompany.yourapp.audio',
      androidNotificationChannelName: 'Audio playback',
      androidNotificationOngoing: true,
    ),
  );
  runApp(MyApp());
}

请注意，由于Web平台的限制，部分功能可能无法像在移动平台上那样工作，比如后台播放时的通知栏显示等。

示例代码

以下是一个完整的示例应用，演示了如何使用 audio_service_web 进行基本的音频播放操作：

import 'package:flutter/material.dart';
import 'package:audio_service/audio_service.dart';
import 'package:just_audio/just_audio.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AudioService.init(
    builder: () => MyAudioHandler(),
    config: const AudioServiceConfig(
      androidNotificationChannelId: 'com.yourcompany.yourapp.audio',
      androidNotificationChannelName: 'Audio playback',
      androidNotificationOngoing: true,
    ),
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Audio Service Example')),
        body: Center(child: PlayButton()),
      ),
    );
  }
}

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

  MyAudioHandler() {
    _player.playbackEventStream.listen((event) {
      final playing = _player.playing;
      playbackState.add(playbackState.value.copyWith(
        playing: playing,
        processingState: playing ? AudioProcessingState.ready : AudioProcessingState.idle,
      ));
    });
  }

  @override
  Future<void> play() async {
    await _player.setUrl('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3');
    await _player.play();
  }

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

  @override
  Future<void> stop() async {
    await _player.stop();
    playbackState.add(playbackState.value.copyWith(
      processingState: AudioProcessingState.stopped,
      playing: false,
    ));
  }
}

class PlayButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<PlaybackState>(
      stream: AudioService.playbackStateStream,
      builder: (context, snapshot) {
        final playbackState = snapshot.data;
        final processingState = playbackState?.processingState;
        final playing = playbackState?.playing;
        if (processingState == AudioProcessingState.loading ||
            processingState == AudioProcessingState.buffering) {
          return Container(margin: EdgeInsets.all(8.0), width: 64.0, height: 64.0, child: CircularProgressIndicator());
        } else if (playing == true) {
          return IconButton(
            icon: Icon(Icons.pause),
            iconSize: 64.0,
            onPressed: () => AudioService.pause(),
          );
        } else {
          return IconButton(
            icon: Icon(Icons.play_arrow),
            iconSize: 64.0,
            onPressed: () => AudioService.play(),
          );
        }
      },
    );
  }
}

这个例子创建了一个简单的界面，其中包含一个按钮用于控制音频的播放和暂停。当用户点击按钮时，它会调用 AudioService.play() 或 AudioService.pause() 方法来控制音频播放。

通过上述步骤，你应该能够在Flutter项目中成功集成并使用 audio_service_web 插件了。如果有任何问题或需要进一步的帮助，请随时查阅官方文档或者社区资源。