React Native Sound实现点击列表项时停止所有播放音频

我来帮你搞定这个多个音频同时播放的问题！核心思路就是维护一个全局的音频播放器实例引用，每次点击新的音频项时，先停止并释放之前正在播放的音频资源，再初始化新的播放器播放当前音频。下面结合你的代码片段给出具体实现方案：

1. 核心逻辑梳理 #

不管你用的是react-native-sound还是expo-av这类音频库，核心步骤都是统一的：

• 保存当前正在播放的音频实例
• 点击新音频时，先停止旧实例并释放资源
• 再处理下载/播放新音频的原有逻辑

2. 类组件版本（适配你的原有代码） #

假设你使用的是react-native-sound库，修改后的onPressHandler和组件状态管理如下：

import Sound from 'react-native-sound';
import RNFetchBlob from 'rn-fetch-blob';

class AudioPlaylist extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentAudioPlayer: null, // 保存当前播放的音频实例
    };
  }

  onPressHandler = async (file, title) => {
    const { currentAudioPlayer } = this.state;

    // 第一步：停止并释放之前的音频播放器
    if (currentAudioPlayer) {
      currentAudioPlayer.stop();
      currentAudioPlayer.release();
      this.setState({ currentAudioPlayer: null });
    }

    // 你的原有下载检查逻辑
    let name = file.substring(file.lastIndexOf("/") + 1);
    const localFilePath = `/storage/sdcard0/Android/data/com.myapp/files/Download/${name}`;
    
    // 检查文件是否存在，不存在则下载
    const fileExists = await RNFetchBlob.fs.exists(localFilePath);
    if (!fileExists) {
      await RNFetchBlob.config({
        path: localFilePath
      }).fetch('GET', file);
    }

    // 初始化新的音频播放器并播放
    const newAudioPlayer = new Sound(localFilePath, '', (loadError) => {
      if (loadError) {
        console.error('音频加载失败:', loadError);
        return;
      }
      // 开始播放，播放结束后自动释放资源
      newAudioPlayer.play((playSuccess) => {
        if (!playSuccess) {
          console.error('音频播放失败');
          newAudioPlayer.release();
          this.setState({ currentAudioPlayer: null });
        }
      });
    });

    // 更新当前播放器实例
    this.setState({ currentAudioPlayer: newAudioPlayer });
  }

  // 组件卸载时清理资源，避免内存泄漏
  componentWillUnmount() {
    const { currentAudioPlayer } = this.state;
    if (currentAudioPlayer) {
      currentAudioPlayer.stop();
      currentAudioPlayer.release();
    }
  }

  // ... 其他组件渲染代码
}

3. 函数组件版本（可选） #

如果你的项目用的是函数式组件，用useState保存播放器实例，useEffect处理卸载清理：

import { useState, useEffect } from 'react';
import Sound from 'react-native-sound';
import RNFetchBlob from 'rn-fetch-blob';

const AudioPlaylist = () => {
  const [currentAudioPlayer, setCurrentAudioPlayer] = useState(null);

  const onPressHandler = async (file, title) => {
    // 停止旧播放器
    if (currentAudioPlayer) {
      currentAudioPlayer.stop();
      currentAudioPlayer.release();
      setCurrentAudioPlayer(null);
    }

    // 原有下载逻辑
    let name = file.substring(file.lastIndexOf("/") + 1);
    const localFilePath = `/storage/sdcard0/Android/data/com.myapp/files/Download/${name}`;
    
    const fileExists = await RNFetchBlob.fs.exists(localFilePath);
    if (!fileExists) {
      await RNFetchBlob.config({ path: localFilePath }).fetch('GET', file);
    }

    // 初始化新播放器
    const newAudioPlayer = new Sound(localFilePath, '', (loadError) => {
      if (loadError) {
        console.error('加载失败:', loadError);
        return;
      }
      newAudioPlayer.play((playSuccess) => {
        if (!playSuccess) {
          console.error('播放失败');
          newAudioPlayer.release();
          setCurrentAudioPlayer(null);
        }
      });
    });

    setCurrentAudioPlayer(newAudioPlayer);
  };

  // 组件卸载时清理资源
  useEffect(() => {
    return () => {
      if (currentAudioPlayer) {
        currentAudioPlayer.stop();
        currentAudioPlayer.release();
      }
    };
  }, [currentAudioPlayer]);

  // ... 其他渲染代码
};

注意事项 #

• 如果你用的是其他音频库（比如expo-av），只需要把停止/释放的方法对应替换即可，比如expo-av用await soundObject.stopAsync()和await soundObject.unloadAsync()。
• 记得在音频播放失败或结束后，及时释放资源，避免内存泄漏。

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