Overlapping sounds (think game noises) causes interruption to redraw in Safari (PWA)

Question

Created Dec ’21

Replies 1

Boosts 0

Participants 1

I have a game that is built as a PWA and the minute I add sounds that overlap, everything goes to pot on mobile. The sounds work perfectly on desktop, but on an iPhone X the behavior is drawing and sounds get randomly delayed and serialized. So even though on the desktop the visual of a block dropping is accompanied by the sound of a block dropping, on mobile I get one or the other first, and if I do 16 in a row, I'll get some set of each before or after one another (3 sounds, 8 visual animations, 6 sounds, 5 visual animations, 2 sound, 3 visual animations).

I'd rather not use a dependency like Howler.js, but have decided to do so.

I've tried both DOM audio elements and new Audio() objects in javascript. Nothing seems to make it better. Thoughts?

To see this in action - https://staging.likeme.games

Boost

Answer 1

WilVoss OP

Dec ’21

Seems like the answer here is to use Audio Buffering and playing either a mixed version of the complete set of sounds or assigning the audiobuffers to different channels. I don't know how to do this yet, but I think it's the right direction.

Please add helpful comments if there are resources, best practices or whatever. Thanks!

Howler.js is super lightweight and doesn't require any other dependencies. This has been written before. I'm now using it as it simplifies everything sound related. For dependency adverse folks, I recommend overcoming your adversion if you don't want to recreate this library (25k minimized).

0