React中Audio.play()报错，require.context加载音频无法播放求助

问题根源 #

你通过require.context加载音频文件时，调用返回的函数得到的是Webpack封装后的模块对象，而非直接的音频文件URL；而import导入的是模块的默认导出（也就是正确的音频URL），这就是playAudio1报错、playAudio2正常的原因。

修复代码 #

只需要在调用audio('./banana.mp3')后，取它的.default属性就能拿到正确的音频URL：

import React from 'react';
import Volume from '../../../../images/audio.png';
import Song from '../../../../audio/ES/banana.mp3';
const audio = require.context("../../../../audio/ES", true);

const ScreenKids = (props) => {
    return (
        <div>
            <div>
                <img src={Volume} onClick={() => playAudio1()} />
                <img src={Volume} onClick={() => playAudio2()} />
            </div>
        </div>
    );
}

// 修复后的playAudio1
function playAudio1() {
    new Audio(audio('./banana.mp3').default).play();
}

function playAudio2() {
    new Audio(Song).play();
}

export default ScreenKids;

针对批量音频的优化方案 #

因为你有数百个音频文件，建议提前把所有音频的URL映射成一个对象，后续调用更简洁：

import React from 'react';
import Volume from '../../../../images/audio.png';
import Song from '../../../../audio/ES/banana.mp3';

// 生成音频URL映射，自动匹配所有mp3文件
const audioContext = require.context("../../../../audio/ES", true, /\.mp3$/);
const audioMap = audioContext.keys().reduce((map, key) => {
    // 提取文件名作为键（比如把'./banana.mp3'转为'banana'）
    const fileName = key.replace(/^\.\/|\.mp3$/g, '');
    map[fileName] = audioContext(key).default;
    return map;
}, {});

const ScreenKids = (props) => {
    return (
        <div>
            <div>
                <img src={Volume} onClick={() => playAudio1()} />
                <img src={Volume} onClick={() => playAudio2()} />
            </div>
        </div>
    );
}

// 直接通过映射调用，更简洁
function playAudio1() {
    new Audio(audioMap.banana).play();
}

function playAudio2() {
    new Audio(Song).play();
}

export default ScreenKids;

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