play a sound now if you want to play a sound later (challenges with sound playback on mobile devices)

(Shh, don't tell, I plan to get lots of mileage reusing this virtual card this year 'til July 4th next year, but I figure no one I want to reuse this for actually reads this blog... actually, I don't think anyone reads this blog.)

I had an idea for a fireworks-with-drum-sounds for a July 4th virtual toy (see also this one for loveblender and this one from 2009) but didn't make it in time, but my friend Johnny's birthday was a week after... and he is a drummer! So I made it for him since it was so on-topic and I miss his bass drum with my tuba.

It came together pretty well, you can see it here: toys.alienbill.com/johnny2020 , but sound wasn't working on mobile. Debugging can be such a pain in the butt, I tried like half a dozen things (MP3s not WAVs, make sure there was a touch even before loading the sounds, switching libraries, etc) because I know browsers and especially mobile are fussy about not playing a sound 'til after an interaction... turns out all my sounds were triggered by setTimeout()s, but if I played a sound immediately after click, even "the sound of silence", all the other sounds worked as well.

I also did the CSS `user-select: none;` to stop text from autoselecting with inadvertant doubletaps. I hoped "touch-action: manipulation; " would similarly stop the zoom in/out but less luck there... but I've spent enough time on this today.