React Native Expo AV 声音无法正常播放问题求助

核心问题分析 #

• 移动端Sound实例管理混乱，播放时实例可能已被释放或未完成初始化
• 浏览器与Expo移动端的Sound生命周期逻辑不同，浏览器会自动保留实例，移动端需要严格把控资源创建/释放时机
• 重复播放时未正确重置实例状态，导致后续调用无响应

1. 持久化Sound实例，避免重复创建/销毁 #

用useRef保存Sound实例，组件挂载时初始化，卸载时统一释放，不要每次播放都新建实例：

import { Sound } from 'expo-av';
import { useRef, useEffect } from 'react';

const EarTrainingApp = () => {
  const soundInstance = useRef(null);

  useEffect(() => {
    // 初始化Sound实例
    const setupSound = async () => {
      const sound = new Sound();
      soundInstance.current = sound;
    };
    setupSound();

    // 组件卸载时释放资源
    return () => {
      if (soundInstance.current) {
        soundInstance.current.unloadAsync();
      }
    };
  }, []);

  // ...其他逻辑
};

2. 播放前强制重置实例状态 #

每次播放前，先停止当前播放、卸载旧资源，再加载新音频，避免状态冲突：

const playInterval = async (targetSound) => {
  if (!soundInstance.current) return;

  try {
    // 重置实例到初始状态
    await soundInstance.current.stopAsync();
    await soundInstance.current.unloadAsync();
    
    // 加载并播放新音频
    await soundInstance.current.loadAsync(targetSound);
    await soundInstance.current.playAsync();
  } catch (err) {
    console.error('播放失败:', err);
  }
};

3. 拆分初始化逻辑，避免竞争条件 #

不要在同一个useEffect里同时做实例初始化和音频选择/加载，确保实例创建完成后再处理音频：

useEffect(() => {
  const initApp = async () => {
    const sound = new Sound();
    soundInstance.current = sound;
    // 实例初始化完成后，再随机加载初始音频
    const initialSound = RandomSound();
    await soundInstance.current.loadAsync(initialSound);
  };
  initApp();
}, []);

4. 监听播放状态，处理自动重置 #

添加播放状态监听，播放完成后自动重置实例，方便下次调用：

useEffect(() => {
  if (!soundInstance.current) return;

  const statusListener = soundInstance.current.setOnPlaybackStatusUpdate((status) => {
    if (status.didJustFinish) {
      // 播放结束后重置状态
      soundInstance.current.stopAsync();
    }
  });

  return () => {
    statusListener.remove();
  };
}, []);

5. 校验音频资源路径 #

移动端对资源路径的要求更严格，本地音频必须用require引入，不要用相对字符串路径：

// 正确写法
const soundLibrary = [
  require('./assets/sounds/major-third.mp3'),
  require('./assets/sounds/minor-sixth.mp3'),
];

// 错误写法（移动端不识别）
// const soundLibrary = ['./assets/sounds/major-third.mp3'];

以上方案针对移动端Sound组件的生命周期痛点优化，能解决"Player does not exist"报错和播放不稳定的问题，同时保证浏览器端功能不受影响。

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