It was all working beautifully until I came to the seemingly minor task of adding some sound, which I left until last. "This should be easy," I thought, "thanks to the funky new <audio> tag in HTML5."
For the third time that day, I was wrong, for two reasons:
1) Many browsers for mobile devices choose not to support automatically playing a sound on page load.
2) Similarly, many mobile browsers will only allow a single audio tag per page - but my game needed two different sounds.
Problem #1 was easy enough to overcome by adding an otherwise pointless "Start Game" button for the user to click. The mobile browsers responded just fine as long as a deliberate action was taken by the user to initiate playing the sound.
Problem #2 was trickier. The best solution I found was two work with just one <audio> tag but switch its source programatically using Javascript when I needed to change from one sound to another.
Must admit there is a tiny bit of lag between the two sounds at times, but overall it works acceptably on iPhone, iPad and a variety of Android devices. Here's the code:
var aud = document.getElementById('FuseSound1');Oh, oh, oh, it's magic.
aud.pause();
aud.src = document.getElementById('BombSound').src;
aud.load();
aud.loop = false;
aud.play();
