Ionic 3 Native Audio插件实现音频顺序播放问题求助

我之前也碰到过一模一样的问题——单个音频播放正常，但多文件直接循环调用play()就乱套了。核心原因是Ionic Native Audio的play()方法是异步执行的，它不会等待上一个音频播放完毕就会启动下一个，自然没法实现顺序播放。

下面是经过验证的完整解决方案，分步骤来：

1. 先确保所有音频预加载完成 #

顺序播放的前提是所有音频都已经预加载好，不然可能出现播放到某个音频时还没加载完成的情况。我们可以用Promise.all()来批量预加载：

import { NativeAudio } from '@ionic-native/native-audio';

// 注入NativeAudio服务
constructor(private nativeAudio: NativeAudio) {}

// 定义音频列表：key是插件识别的唯一标识，path是音频文件路径
private audioAssets = [
  { key: 'audio_01', path: 'assets/audios/voice1.mp3' },
  { key: 'audio_02', path: 'assets/audios/voice2.mp3' },
  { key: 'audio_03', path: 'assets/audios/voice3.mp3' }
];

// 批量预加载所有音频
preloadAllAudios(): Promise<void[]> {
  return Promise.all(
    this.audioAssets.map(audio => 
      this.nativeAudio.preloadSimple(audio.key, audio.path)
        .then(() => console.log(`音频 ${audio.key} 预加载完成`))
        .catch(err => console.error(`音频 ${audio.key} 预加载失败`, err))
    )
  );
}

2. 用递归+播放完成回调实现顺序播放 #

利用插件play()方法的第二个回调参数（播放完成时触发），我们可以写一个递归函数，每次只播放当前音频，完成后自动触发下一个：

private currentPlayIndex = 0;

// 顺序播放主方法
playSequentially() {
  // 终止条件：所有音频播放完毕
  if (this.currentPlayIndex >= this.audioAssets.length) {
    this.currentPlayIndex = 0; // 重置索引，方便下次播放
    console.log('所有音频播放完成');
    return;
  }

  const currentAudioKey = this.audioAssets[this.currentPlayIndex].key;

  // 播放当前音频，监听完成回调
  this.nativeAudio.play(
    currentAudioKey,
    // 播放成功完成的回调：触发下一个音频
    () => {
      this.currentPlayIndex++;
      this.playSequentially();
    }
  ).catch(err => {
    console.error(`音频 ${currentAudioKey} 播放失败`, err);
    // 即使当前音频播放失败，也可以选择继续播放下一个（根据需求调整）
    this.currentPlayIndex++;
    this.playSequentially();
  });
}

3. 在页面中调用使用 #

一般可以在页面初始化时完成预加载，然后通过用户操作（比如按钮点击）触发顺序播放：

ionViewDidLoad() {
  // 页面加载完成后预加载所有音频
  this.preloadAllAudios().then(() => {
    console.log('全部音频预加载完成，可开始播放');
  });
}

// 绑定到页面按钮的点击事件
startPlay() {
  this.currentPlayIndex = 0; // 确保从第一个开始播放
  this.playSequentially();
}

额外注意事项 #

• 音频路径正确性：Ionic 3中音频文件建议放在assets/audios目录下，路径要确保正确，避免找不到文件。
• 权限配置：Android平台需要确保AndroidManifest.xml中添加了音频相关权限（一般默认会包含，但如果遇到播放失败可以检查）。
• 暂停/停止功能：如果需要中途停止，可以添加方法调用this.nativeAudio.stop(this.audioAssets[this.currentPlayIndex].key)，然后重置currentPlayIndex。

内容的提问来源于stack exchange，提问作者SANTEREK