Flutter Web中just-audio的AudioPlayer无法暂停、停止或释放问题

开发者阿泽

2026-8-21

解决Web端AudioPlayer无法暂停/停止及音频叠加问题

问题根源

Web平台下，AudioPlayer实例的状态同步存在特殊性：

未跟踪播放状态导致重复调用play()时创建多个音频实例叠加
浏览器音频上下文的状态未正确关联到AudioPlayer的控制方法
旧版本audio_player包可能存在Web端的控制逻辑bug

解决方案

1. 添加播放状态跟踪

新增变量记录当前播放状态，避免重复触发播放：

final AudioPlayer player = AudioPlayer();
bool _isPlaying = false; // 跟踪播放状态

2. 修改播放逻辑，确保先终止旧播放

调用play()前先停止当前播放，避免音频叠加：

Future<void> playSound() async {
  if (_isPlaying) {
    await stopSound(); // 先停止正在播放的音频
  }
  await player.play();
  _isPlaying = true;
}

Future<void> pauseSound() async {
  await player.pause();
  _isPlaying = false;
}

Future<void> stopSound() async {
  await player.stop();
  _isPlaying = false;
}

Future<void> disposeSound() async {
  await player.dispose();
  _isPlaying = false;
}

3. 适配Web端的资源释放

Web端需要确保音频上下文正确释放，可在disposeSound中额外添加前置停止操作：

Future<void> disposeSound() async {
  await player.stop();
  await player.dispose();
  _isPlaying = false;
}

4. 确认包版本

确保pubspec.yaml中使用最新稳定版的audio_player：

dependencies:
  audioplayers: ^latest_version # 替换为当前最新版本号

5. 预加载优化

预加载时可绑定播放完成事件，自动更新状态：

Future preload () async {
  await player.setAsset('asset/audio/mysound.mp3');
  // 监听播放完成，自动标记为未播放状态
  player.onPlayerComplete.listen((_) {
    _isPlaying = false;
  });
}