I want an audio to play on a click on a button. The audio has to be choosed based on the selected animal. The function providing the audio looks like this:
function introAudioForAnimal(animal) {
if (animal == "siri") { return }
let audioImport = import("../assets/audio/wer_wars/" + animal + "/" + animal + " anfang.wav");
return new Audio(audioImport);
}
The returned audio is then just played by introAudioForAnimal("tiger").play();
The issue is, that nothing plays, but I get an uninformative console error:
index.js:1 Uncaught Error: The error you provided does not contain a stack trace.
at L (index.js:1)
at Y (index.js:1)
at index.js:1
at index.js:1
at l (index.js:1)
L @ index.js:1
Y @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1
l @ index.js:1
game:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.
I have already tried logging the exact path:
../assets/audio/wer_wars/tiger/tiger anfang.wav
This matches my filesystem on where the audio is located.
Any ideas how I can get the audio to play? If you need any further information, please let me know.
Edit: My browser is google chrome, if that helps you
For everyone else searching, I found a solution:
First of all I changed the way I defined the path:
let audioImport = import(`../assets/audio/wer_wars/${animal}/${animal} anfang.wav`);
And the key problem was, that you need to use the default property of that dynamic import to create a new audio:
new Audio(audioImport.default);
This solution did work for me very well.