CODEWITHSUNDEEP
javascriptreactjsfileaudioimport
Jakob Wilmesmeier
Jakob Wilmesmeier

Reputation: 38

React: Audio does not play

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

Upvotes: 1

Views: 142

Answers (1)

Jakob Wilmesmeier
Jakob Wilmesmeier

Reputation: 38

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.

Upvotes: 1

Related Questions