How to load sound without getting browser warnings in Parcel?

[KokoDoko]

I am using the Parcel template to create an excalibur game. I am loading sounds, and this works, but the browser gives a whole lot of warnings before the game even starts (during loading of the assets):

Side.ts:3 [Warn] :  Cannot determine audio support, assuming no support for the Audio Tag TypeError: Cannot read properties of null (reading '1')
    at canPlayFile (DynamicTree.ts:354:8)
Side.ts:3 [Warn] :  This browser does not support any of the audio files specified: http://localhost:1234/coin.f74d9d70.mp3?1678266496281
Side.ts:3 [Warn] :  Attempting to use http://localhost:1234/coin.f74d

After clicking the "play game" button, the sound is working, but I wonder how I can prevent these warnings?

Resources.ts

import { ImageSource, Sound } from "excalibur"
import crate from "../images/crate.png"
import coinsound from "url:../sound/coin.mp3"   // needs url: otherwise sounds are not imported

let Resources = {
    Crate: new ImageSource(crate),
    CoinSound: new Sound(coinsound)
}

export { Resources }

Game.ts

import { Actor, Color, DisplayMode, Engine, Loader, Vector, Physics, Sound } from "excalibur"
import { Resources } from "./resources"

class Game extends Engine {
    constructor() {
        super({ width: 800, height: 600 })

        const loader = new Loader([
            Resources.Crate,
            Resources.CoinSound
        ])
        this.start(loader).then(() => this.startGame())
    }

    startGame(){
        Resources.CoinSound.play()
    }
}
new Game()

UPDATE

I load the sound as a static file now, meaning the file won't be picked up by parcel. You have to copy it manually to the dist folder:

let Resources = {
    Crate: new ImageSource(crate),
    CoinSound: new Sound("./coin.mp3")
}

Now I only get the following warning. It seems excalibur attempts to play the sound while loading?

Decorators.ts:82 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

[eonarheim]

@KokoDoko I think this is a bug in the parsing, it must be getting confused by the coin.f74d9d70.mp3. The audio does still play correct? I'll make a bug for this.

If you are using the play button this should not show up, this also seems like a bug..
Decorators.ts:82 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

Thanks for bringing this up!

[eonarheim]

@KokoDoko #2598

[eonarheim]

I added another issue for the warning on individual sound files too 👍 #2599

[KokoDoko]

Yes, the sound does play. The browser complains about not starting the audiocontext, and also about the filename. Parcel changes the filename to something like: sound.mp3?3843498. The error is: the browser does not support any of the audio files specified

UPDATE

I now use the new URL() approach that I found on the Parcel website to load images and sounds:

const gameover = new URL('../images/gameover.png', import.meta.url)
const coinSound = new URL('../assets/coin.mp3', import.meta.url)

and then

let Resources = {
    Gameover: new ImageSource(gameover.href),
    CoinSound: new Sound(coinSound.href)
}

This doesn't solve the sound warnings but it seems the new URL() option is the way to go to load assets.