HTML5 Audio object doesn't play in Safari

Question

On my page, I dynamically create an HTML5 Audio element in JavaScript:

bell = new Audio("alarmclock.mp3");

Later on (in response to a jQuery Countdown object expiring), I play it:

bell.play();

Results:

• Chrome (6.0.472.55) for Mac: The audio plays fine.
• OmniWeb (5.10.2): The audio plays fine.
• Safari (5.0.1) for Mac: I hear nothing. The audio plays fine. (I don't know why it didn't work earlier.)
• MobileSafari (iOS 3.1.3—the latest version for my device): I hear nothing.

How would I go about troubleshooting this? I'd really like to have it working in MobileSafari so my web app can be portable.

Answer 1

About iPhone Safari: It seems play() work when launched by an onclick event. See http://groups.google.com/group/iphonewebdev/browse_thread/thread/91e31ba7ae25e6d4?hl=en

Answer 2

Good question with "How would I go about troubleshooting this?". Here would be my plan of attack...

• Debug with Safari on Mac; if you get it working there, then go test with MobileSafari, since the latter is more of a pain.
• Start over with a blank page. Insert HTML5 audio element with this MP3 file statically (not via JavaScript).
• Keep working with your minimal page. Use jQuery's $(document).ready(function () { /* ... */ }) to load the audio on page load. Does it still work?
• OK, now try to add your countdown logic to the demo page---as little of it as possible. Did that cause the problem?
• If you've reached this point and it's still working on your demo page, you know that it's going to be something about all the other complicated things on your site, and not a problem with audio or even dynamically-loaded audio. In which case, good luck :-S. Either add things to your blank page, testing each time, or temporarily remove them from your original page, until it works. Then you'll know what caused the problem.