I am serving a React front end from a flask backend for a music app I am building. I need to import an mp3 file into the react app when its page is served. When I test with a static mp3 filename I can do this with:
import audio from '../test/song.mp3'
But I actually want to import a different mp3 depending on the artist and song. Unfortunately React does not let me use an import statement inside the function (where I could just use a variable filename in the import). So I tried to use a filename directly in the Audio function:
const audioRef = useRef(new Audio("data/".concat(artist_name,"_",song_name,"/song.mp3")));
but I get the error (for example with New Rules by Dua Lipa):
http://127.0.0.1:5000/data/Dua%20Lipa_New%20Rules/song.mp3 404 (NOT FOUND)
So it is looking for a url instead of the file path. This question has mixed answers but seems to suggest it is not possible. Is there no way to achieve importing a variable mp3 filename locally with React/Flask? Do I need to host them from a remote server?
In case it helps, my file structure looks like this and is served from the main Flask folder with "flask run":
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/
