Javascript 使用react js播放本地mp3文件而不导入

我想用react.js创建一个显示我选择的不同歌曲的应用程序

---

问题是它不能处理本地文件。路径正常（仅在DOM中选中） 我试过使用相对路径和绝对路径，但仍然是一样的

我试过很多方法，比如导入react声音，react音频播放器

我曾尝试在文件开头用“import song from./songs/song.mp3”直接导入mp3文件，它可以工作，但没有用，因为如果要添加/删除歌曲，必须手动添加它

当我按下播放按钮时，它总是不符合承诺并返回错误：

DomeException:未能加载，因为找不到支持的源

从“React”导入React；
康斯特歌曲卡=（道具）=>{
常量播放音频=（）=>{
const audio=新音频（props.song.path）
const audioPromise=audio.play（）
如果（audioPromise！==未定义）{
音频承诺
.然后（（）=>{
//自动播放开始了
控制台日志（“工作”）
})
.catch（（错误）=>{
//捕获dom异常
控制台信息（错误）
})
}
}
返回(
►
{props.song.nom}
);
};
导出默认歌曲卡；

---

有人有想法吗？

您是否尝试过使用

标签

下面是一个React工作音频示例

类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
ReactDOM.render(
,
document.getElementById（“应用程序”）
)；

---

由于安全问题，您将无法通过在浏览器中运行的JavaScript以编程方式访问本地文件

获取本地文件的唯一方法是：

用户通过文件选择文件

用户将文件拖放到应用程序中

这样，用户就显式地授予您访问这些文件的权限

您可以围绕这些交互设计应用程序，或者

---

您可以在本地启动一个web服务器，该服务器可以访问您的音频文件，并将这些文件流式传输到您的应用程序或将文件上载到云服务。

您可以使用以下代码完成此操作：

const SongCard = (props) => {
const playAudio = () => {
    let path = require("./" + props.song.path).default;
    const audio = new Audio(path);
    const audioPromise = audio.play();
    if (audioPromise !== undefined) {
        audioPromise
            .then(() => {
                // autoplay started
                console.log("works");
            })
            .catch((err) => {
                // catch dom exception
                console.info(err);
            });
    }
};

return (
    <div className="songCard">
        <div className="coverContainer">
            <img src="" />
        </div>
        <div className="infoContainer">
            <div className="playPauseButton" onClick={playAudio}>
                ►
            </div>
            <div className="songTitle">{props.song.nom}</div>
        </div>
    </div>
);
};

export default SongCard;

const宋卡=（道具）=>{
常量播放音频=（）=>{
let path=require（“./”+props.song.path）.default；
const audio=新音频（路径）；
const audioPromise=audio.play（）；
如果（audioPromise！==未定义）{
音频承诺
.然后（（）=>{
//自动播放开始了
控制台日志（“工作”）；
})
.catch（（错误）=>{
//捕获dom异常
控制台信息（错误）；
});
}
};
返回(
►
{props.song.nom}
);
};
导出默认歌曲卡；

如果您将

require

中的

“/”

更改为音频字典的相对路径，并且只在父级道具中发送音频文件的名称，则此操作将有效

---

我希望我能帮助您

如果我的答案解决了您的问题，请单击复选标记接受。这向社区表明您找到了解决方案。否则，请立即进行投票：）“问题是它无法处理本地文件“是的。这意味着您的文件、路径或其他地方有问题。OP希望访问本地文件，您的答案无法正常工作。谢谢。所以我想我的答案是“不要使用本地文件”

const SongCard = (props) => {
const playAudio = () => {
    let path = require("./" + props.song.path).default;
    const audio = new Audio(path);
    const audioPromise = audio.play();
    if (audioPromise !== undefined) {
        audioPromise
            .then(() => {
                // autoplay started
                console.log("works");
            })
            .catch((err) => {
                // catch dom exception
                console.info(err);
            });
    }
};

return (
    <div className="songCard">
        <div className="coverContainer">
            <img src="" />
        </div>
        <div className="infoContainer">
            <div className="playPauseButton" onClick={playAudio}>
                ►
            </div>
            <div className="songTitle">{props.song.nom}</div>
        </div>
    </div>
);
};

export default SongCard;