HTML5 Audio in Games For iPad and iPhone

I have been writing an HTML5 word description game called "Word Boomer" for use on tablets and smartphones.

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');
aud.pause();
aud.src = document.getElementById('BombSound').src;
aud.load();
aud.loop = false;
aud.play();

 Oh, oh, oh, it's magic.