Webpack通过require.context加载MP3文件无法播放问题求助

问题根源 #

你用require.context导入的音频资源被Webpack包装成了ES模块对象，而非直接的音频文件URL。从你打印的console.log(sounds['tic'])结果能看到，实际的URL藏在模块的default属性里，直接把模块对象传给Audio构造函数自然会报错。

修复方案 #

修改importAllSounds函数，在获取资源时提取default属性：

function importAllSounds(r) {
  return r.keys().reduce((acc, key) => {
    const k = key.replace("./", "").replace(".mp3", "");
    // 提取ES模块的default属性，拿到实际音频URL
    return {
      ...acc,
      [k]: r(key).default,
    };
  }, {});
}

const sounds = importAllSounds(require.context("Assets/sounds/right/", false, /\.(mp3|wav|m4a)$/));

验证修改 #

修改后再执行console.log(sounds['tic'])，应该会输出类似/static/media/tic.xxxx.mp3的字符串URL，此时播放代码就能正常工作：

let audio = new Audio(sounds["tic"]);
    
document.addEventListener("keydown", () => {  
  audio.play();  
})

额外说明 #

Webpack 5+默认用Asset Modules处理静态资源，会自动将资源路径以ES模块的形式导出；如果你用的是Webpack 4及以下，可能是配置了file-loader并开启了esModule: true选项，同样会导致资源被包装成ES模块。无论哪种情况，提取default属性都能解决问题。

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