New to GameDev - Problems with Audio/Visual in Firefox

[kinome79]

Getting into game dev, wrote a snake game, and now a breakout game, all with just raw JS, CSS, HTML. The breakout game is the first where I'm implementing sound, and dev'd the game with Chrome just fine, but found some issues when I opened it in Firefox for the first time, wondering if anyone might know why.

1) Firefox doesn't support roundRect, which I found stupid, but even just re-implementing with rect I noticed typically it runs slower even though setInterval shouldn't be different between Chrome and Firefox.... does Firefox typically run slower?  Might just be my computer.

 

2) I made simple sound effects with .mp3 format. Worked nice in Chrome(still working on setting up something to prevent initial delay) but for some reason in Firefox, there is a static pop at the start of each sound... each wall bounce, paddle hit, block break, each first has this static noise POP at the start which doesn't occur in Chrome? Thoughts?

Note, for each sound I just run

new Audio(mysoundfile).play() 

when I want the sound to play.

Below is the link to SNAKE and BREAKOUT... will later add sound to SNAKE, and BREAKOUT still needs some tweeking, but curoius what people thing about the above two issues. Do other people hear that static pop when using in Firefox but not Chrome. I haven't tested with another computer yet.

 

Thanks,

 

https://www.gojta.com/snake

https://www.gojta.com/breakout

 

[Yurii Bilas]

Hi, @kinome79!
1) I'm not sure if the firefox runs slower with your round-rect implementation than chrome, but what I can advise is that you shouldn't use setInterval. Instead, you should use RAF (requestAnimationFrame) and delta time. Read about it there:
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
https://gameprogrammingpatterns.com/game-loop.html
In this way you'll be able to make your game look approximately the same on all devices and browsers.
2) It may be connected to .mp3 format. You can try using .ogg instead.
Hope this helps!

Edited March 1, 2023 by Yurii Bilas