是否可以从 React/Flask 导入具有可变文件路径的本地 mp3 文件？

Question

我正在为我正在构建的音乐应用程序提供来自 Flask 后端的 React 前端。我需要在提供页面时将 mp3 文件导入到 react 应用程序中。当我使用静态 mp3 文件名进行测试时，我可以这样做：

import audio from '../test/song.mp3'

但我实际上想根据艺术家和歌曲导入不同的 mp3。不幸的是，React 不允许我在函数内部使用 import 语句（我可以在导入中使用变量文件名）。所以我尝试在Audio函数中直接使用文件名：

const audioRef = useRef(new Audio("data/".concat(artist_name,"_",song_name,"/song.mp3")));

但我收到错误消息（例如 Dua Lipa 的新规则）：

<块引用>

http://127.0.0.1:5000/data/Dua%20Lipa_New%20Rules/song.mp3 404（未找到）

所以它正在寻找一个 url 而不是文件路径。 This question 的答案不一，但似乎表明这是不可能的。 有没有办法用 React/Flask 在本地实现导入可变的 mp3 文件名？我需要从远程服务器托管它们吗？

如果有帮助，我的文件结构如下所示，并从带有“flask run”的主 Flask 文件夹提供：

Flask/
--data/
----${artist_name}_${song_name}/
------song.mp3
--app.py
--static/
----css/
------react build css files
----js/
------react build js files
----media/
------react build media files
--other flask folders/
--react_app/
----src/
------App.js, etc
----other react folders/