Javascript audio giving "The element has no supported sources" error on play


I’m making my first javascript game (Snake), and I’ve already finished most of it. Now I’m trying to add sound, but it’s not working. I’m not using a server, I’m using a local html file.

This is the constructor method of the class where I’m trying to play a sound:

constructor(){
    ...
    this.collect_wav = new Audio("SoundsCoin.wav");
    ...
}

And later in one of the methods:

relocate(){
    ...
    this.collect_wav.play();
}

When the code runs, the new Audio runs without an error, but on the line play(), I get this error in the developer console:

Uncaught (in promise) DOMException: The element has no supported sources.

There is a "Sounds" folder in the same directory as my html file, and inside that folder is Coin.wav, so I think the path is correct, but it just doesn’t work. But when I go into the developer console, and go to the sources tab, I don’t even see the Sounds folder listed, only the html, css, and javascript files are there. Is that normal?

I have tried using the html tag like this:

<audio controls>
    <source src="Sounds/Coin.wav" type="audio/wav">
</audio>

Even this doesn’t work, I see the controls show up, but it is greyed out and cannot be interacted with.

I have also tried replacing the backslashes with a normal slash (Because I’m not sure which one is correct in html), but this also didn’t help.

I have been trying to fix this for days, and I really have no idea what’s wrong, can somebody help me?

Source: JavaSript – Stack Overflow

November 10, 2021
Category : News
Tags: game-development | html5-audio | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.