HTML5 audio is a bit of a minefield when you’re trying to get sound working on all platforms. The internet is rife with outdated information, and libraries that claim to work everywhere but don’t really. By “all platforms”, I mean:
- Modern, Popular Desktop Browsers: Chrome, Firefox, Internet Explorer 10+, and arguably Safari
- Common Mobile Browsers: Safari Mobile, Chrome Mobile, Android Mobile (ignoring the fact that there is no singular “Android Browser”)
- PhoneGap or CocoonJS: I’m making HTML5 games & apps, and I need a tool to generate binaries from my JavaScript. These are two viable options.
Took me an entire week to navigate this minefield, and I emerged on the other end with a Tuning Fork to help me figure out which audio solutions were working where. I have a hosted version of Tuning Fork so that you can try this out for yourself. Here are my findings:
| Chrome (35.0) | Firefox (v30) | IE 11 | Safari (v7.0.5) | Safari Mobile (7) | Chrome Mobile | Android Mobile | PhoneGap Build | PhoneGap CLI | CocoonJS (Webview+) | |
| HTML5 audio tag | Yes | Yes | Yes | Yes | Yes | No | ? | No | No | No |
| Crafty.Audio (v0.6.2) | Yes | Yes | No | No | No | No | ? | No | No | No |
| SoundJS (v0.5.2) | Yes | Yes | Yes | Yes | Yes | Yes | ? | No | No | Yes |
| howler.js (v1.1.23) | Yes | Yes | Yes | Yes | Yes | Yes | ? | No | No | Yes |
After much effort, I finally got audio working on PhoneGap using the Media object, but it was no easy task. If you’re in that boat, the Tuning Fork project, when compiled using PhoneGap CLI, will produce audio, at least it did for me on my Android. To get it working in your own project, I wrote a detailed answer on Stack Overflow.
Undoubtedly, the table above will become obsolete in a few months, so please run your own Tuning Fork tests against your target platform(s).