如何使用Expo AV动态加载本地音频文件？

问题根源 #

React Native 的 require 是静态解析机制，编译阶段就需要确定资源路径，无法识别动态变量、模板字面量或从JSON读取的字符串路径。直接传入 audioPaths['paths'][fileKey] 这类动态值，会导致编译时无法解析资源，从而抛出"invalid call"错误。

解决方案 #

核心思路是提前静态预定义所有音频的require引用，运行时直接引用这些预定义的资源对象，而非动态拼接路径。

方案1：预定义资源数组 #

先手动或批量生成所有音频的require引用数组，再通过状态变量动态索引：

// 预定义所有音频的require引用（编译时可解析）
const audioAssets = [
  require('../assets/Records/1.mp3'),
  require('../assets/Records/2.mp3'),
  require('../assets/Records/3.mp3'),
  require('../assets/Records/4.mp3'),
];

// 动态加载指定音频
const { sound } = await Audio.Sound.createAsync(
  audioAssets[fileKey], 
  {}, 
  playbackStatusUpdate
);

方案2：批量预加载（配合Expo Asset） #

如果音频数量较多，可使用expo-asset提前批量加载资源，避免播放时的延迟：

import { Asset } from 'expo-asset';

// 预定义资源数组
const audioAssets = [
  require('../assets/Records/1.mp3'),
  require('../assets/Records/2.mp3'),
  // ... 更多音频
];

// 组件挂载时预加载所有资源（可选）
useEffect(() => {
  const preloadAssets = async () => {
    await Asset.loadAsync(audioAssets);
  };
  preloadAssets();
}, []);

// 动态加载播放
const playAudio = async (fileKey) => {
  const { sound } = await Audio.Sound.createAsync(
    audioAssets[fileKey], 
    {}, 
    playbackStatusUpdate
  );
  await sound.playAsync();
};

实用技巧 #

1. 批量生成资源数组：如果音频文件名有规律（如1.mp3、2.mp3...），可通过循环简化代码：

const audioAssets = [];
// 假设有10个音频文件
for (let i = 1; i <= 10; i++) {
  audioAssets.push(require(`../assets/Records/${i}.mp3`));
}

注：循环范围需为固定值，确保编译时能解析所有路径。

2. 避免JSON存储路径：JSON中的路径仅为普通字符串，无法被require静态解析，直接传入createAsync会失效，建议改用预定义的资源数组管理。

3. 资源清理：播放完成后记得调用sound.unloadAsync()释放资源，避免内存泄漏。

内容的提问来源于stack exchange，提问作者M.KH