React Native Expo Audio：点击列表播放音频时如何停止所有正在播放的音频？

嘿，这个问题我之前在做Expo音频项目的时候也碰到过！核心问题就是你没有跟踪正在播放的音频实例，导致新音频播放时旧的还在后台跑。下面给你两种实用的解决方案，按需选择：

方案一：跟踪所有活跃音频实例（支持多音频播放场景） #

如果你的场景需要偶尔同时播放多个音频，但切换列表项时要全部停掉，那可以维护一个数组来保存所有正在播放的音频实例：

1. 首先在组件里初始化一个数组，用来存活跃的音频实例：

constructor(props) {
  super(props);
  this.activeSounds = []; // 存储所有正在播放的音频实例
}

2. 修改你的playAudio方法，把创建的实例加入数组，同时监听播放结束事件，及时清理已完成的实例避免内存泄漏：

async playAudio(file) {
  try {
    await Audio.setIsEnabledAsync(true);
    const sound = new Audio.Sound();
    
    // 监听播放结束，从活跃列表中移除实例
    sound.setOnPlaybackStatusUpdate((status) => {
      if (status.didJustFinish) {
        const index = this.activeSounds.indexOf(sound);
        if (index !== -1) {
          this.activeSounds.splice(index, 1);
        }
      }
    });
    
    await sound.loadAsync(file);
    await sound.playAsync();
    this.activeSounds.push(sound); // 将新实例加入活跃列表
  } catch(error) {
    console.error(error);
  }
}

3. 写一个专门的方法来停止所有活跃音频并释放资源：

async stopAllActiveSounds() {
  for (const sound of this.activeSounds) {
    try {
      await sound.stopAsync(); // 停止播放
      await sound.unloadAsync(); // 卸载资源，避免内存占用
    } catch (error) {
      console.error('停止音频出错:', error);
    }
  }
  this.activeSounds = []; // 清空列表
}

4. 在点击列表项时，先调用停止方法再播放新音频：

onAudioSelected(audio) {
  this.stopAllActiveSounds(); // 先停掉所有正在播放的
  this.playAudio(audio);
  // ...你的其他逻辑
}

5. 最后别忘了在组件卸载时清理所有音频，防止内存泄漏：

componentWillUnmount() {
  this.stopAllActiveSounds();
}

方案二：只维护当前播放的单个实例（适合单次播放场景） #

如果你的需求是每次只播放一个音频，那不用数组，只维护一个当前实例更简单：

1. 在组件里初始化单个实例变量：

constructor(props) {
  super(props);
  this.currentSound = null; // 存储当前正在播放的音频实例
}

2. 修改playAudio方法，播放新音频前先停止并卸载当前的实例：

async playAudio(file) {
  try {
    await Audio.setIsEnabledAsync(true);
    
    // 先处理正在播放的旧音频
    if (this.currentSound) {
      await this.currentSound.stopAsync();
      await this.currentSound.unloadAsync();
    }
    
    // 创建新的音频实例并播放
    this.currentSound = new Audio.Sound();
    await this.currentSound.loadAsync(file);
    await this.currentSound.playAsync();
    
    // 播放结束后清空当前实例
    this.currentSound.setOnPlaybackStatusUpdate((status) => {
      if (status.didJustFinish) {
        this.currentSound = null;
      }
    });
  } catch(error) {
    console.error(error);
  }
}

3. 点击列表项时直接调用playAudio就行，因为方法内部已经处理了停止旧音频：

onAudioSelected(audio) {
  this.playAudio(audio);
  // ...你的其他逻辑
}

4. 组件卸载时清理当前实例：

componentWillUnmount() {
  if (this.currentSound) {
    this.currentSound.stopAsync();
    this.currentSound.unloadAsync();
  }
}

这两种方案都能解决你多个音频同时播放的问题，选适合你业务场景的就行～

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