I have an HTML5 web page which uses audio via JavaScript. I have a basic version which loads the correct audio file (e.g., ogg vs mp3 etc), and then correctly plays sprites from that file. This basic version has only 1 javascript file, and it works on all OS/browser combinations I’ve tried, including: OSX (Safari, Chrome, Firefox), iOS 5 and 6 (Safari), Windows 7 (Firefox, Chrome), and Android 4.2 (Firefox).
I now take the code and insert it into the production version. Now, the HTML page loads many other JavaScript files (e.g., jquery, jquery ui, flot). However, all of the audio code is in a single file that is included via
<script src="/foo/bar/sound.js"></script>.
In both cases, the code in sound.js is invoked by the user clicking on a button. On all platform/browser combinations mentioned above, the combined code works EXCEPT on iOS (tested on iOS 5 and 6 on both iPad2 and iPad3). The error I’m getting is
INVALID_STATE_ERR: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.
This occurs on a line that tries to set mySound.currentTime based on the particular sprite needed:
mySound.currentTime = spriteData[currentSound].start;
mySound is my sound object, and the spriteData is correct. Oddly, the same code that fails on real iPads works just fine in the iOSSimulator, regardless of whether I simulate iOS 5 or iOS 6.
How do I go about debugging this situation? I’m at a loss of where to look and what to try. Any suggestions would be appreciated.
I finally found a solution. On all platforms the following works in the standalone code, but when combined with the rest of the production page, fails on iOS (even iOS 6.1):
where xxx is mp4, ogg, wav, or mp3, depending on what the browser can handle.
Changing these two lines — and keeping everything else the same — to the following works on iOS on the production page:
I still don’t know why the second version works and the first doesn’t.