We’re writting a Canvas demonstration Real Time Strategy (RTS) game in HTML5/JavaScript and have everything pretty much working. However, in Chrome (very latest version) the sound keeps stuttering and eventually just gives up. The code runs just fine in the latest Firefox, IE9 and Safari (though no sound at all on iOS4 iPhone/iPad but apparently that’s a commercial decision by Apple). You can see for yourself on the link below just get more than a few sounds at once to cause the issue.
http://www.enterprisewarfare.com/Play.aspx
The simplified sound play code is below, note each sound exists 4 times (AUDIO_CHANELS_PER_FILE) to simulate more than one channel. Adjusting this number does not cause the sound loss any earlier or later so it is not to do with reaching the end of the array or playing the same audio object again. We’ve tried both OGG and MP3 file formats and everything works in IE9 (MP3) and Firefox (OGG) without issue. We’ve also tried seeking the file back to the begining to no avail.
this.PlaySound = function(sId)
{
var iSoundMapIndex;
var asoundChannels;
if(sId == null || sId.length == 0) return;
// Grab sound channels array
iSoundMapIndex = this.SoundMap[sId];
asoundChannels = this.Sounds[iSoundMapIndex];
if(asoundChannels == null)
{
this.World.AddMessage("Unable to find sound \"" + sId + "\".");
return;
}
// play the next in sequence
asoundChannels[this.SoundChannel[iSoundMapIndex]].volume = 1;
asoundChannels[this.SoundChannel[iSoundMapIndex]].play();
this.SoundChannel[iSoundMapIndex]++;
if(this.SoundChannel[iSoundMapIndex] == this.AUDIO_CHANNELS_PER_FILE) this.SoundChannel[iSoundMapIndex] = 0;
}
It turns out this was a bug in Chrome and It appears this has now been fixed. Still some issues with sound loading and more than one channel but the complete breakdown of sound seems to have been resolved.