React中如何使用变量导入音频文件？

场景1：提前静态导入所有音频，通过对象映射切换 #

如果你的音频文件数量不多，可以先把所有需要的音频都静态导入，再用对象存储对应关系，之后直接通过对象键名切换：

// 先导入所有需要的音频资源
import audio1 from './audio1.mp3';
import audio2 from './audio2.mp3';

// 用对象存储路径与资源的映射
const audioResources = {
  audio1: audio1,
  audio2: audio2
};

// 切换到audio2，直接从对象中获取
const targetAudio = audioResources.audio2;
// 后续可以用这个资源创建音频实例
const audio = new Audio(targetAudio);
audio.play();

场景2：动态导入音频（按需加载） #

如果不需要提前加载所有音频，或者音频数量较多，可以使用动态导入的方式，结合存储路径的对象实现切换：

// 定义存储音频路径的对象
const audioPathMap = {
  audio1: './audio1.mp3',
  audio2: './audio2.mp3'
};

// 封装动态加载音频的函数
async function getAudio(audioKey) {
  // 根据对象中的路径动态导入
  const module = await import(audioPathMap[audioKey]);
  const audioSrc = module.default;
  return new Audio(audioSrc);
}

// 使用示例：加载并播放audio2
getAudio('audio2').then(audio => audio.play());

场景3：音频文件放在public目录下 #

如果音频文件放在项目的public目录中（比如public/audio），不需要使用import，直接通过对象存储相对路径即可：

const audioPaths = {
  audio1: '/audio/audio1.mp3',
  audio2: '/audio/audio2.mp3'
};

// 直接使用路径创建音频实例
const audio = new Audio(audioPaths.audio2);
audio.play();

注意：Webpack等打包工具对静态import的路径做了静态分析，不能直接在静态import中使用变量，所以要么提前导入所有资源，要么使用动态import语法。

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