Friday, May 21st, 2010
- Experimental HTML5 Audio() support, with Flash fallback for MP3/MP4 as required. (HTML5 disabled by default except for iPad + Palm Pre, but easily configurable.)
- 100% Flash-free, HTML5-only playback of MP3, MP4 (AAC) and WAV files possible on Apple iPad and Palm Pre (and Safari 4.1.5 on OS X 10.5; buggy behaviour observed with 4.1.5 on OS X 10.6, see https://bugs.webkit.org/show_bug.cgi?id=32159#c9 )
- API is unchanged, transparent whether using HTML5 or Flash; SM2 handles switching of technology behind the scenes, depending on browser support.
Here is how it works:
Determines whether HTML5 Audio() support is used to play sound, if available, with Flash as the fallback for playing MP3/MP4 (AAC) formats. Browser support for HTML5 Audio varies, and format support (eg. MP3, MP4/AAC, OGG, WAV) can vary by browser/platform.
The SM2 API is effectively transparent, consistent whether using Flash or HTML5 Audio() for sound playback behind the scenes. The HTML5 Audio API is roughly equivalent to the Flash 8 feature set, minus ID3 tag support and a few other items. (Flash 9 features like waveform data etc. are not available.)
SoundManager 2 + useHTML5Audio: Init Process
At DOM ready (if useHTML5Audio = true), a test for Audio() is done followed by a series of canPlayType() tests to see if MP3, MP4, WAV and OGG formats are supported. If none of the “required” formats (MP3 + MP4, by default) are supported natively, then Flash is also added as a requirement for SM2 to start.
soundManager.audioFormats currently defines the list of formats to check (MP3, MP4 and so on), their possible canPlayType() strings (long story short, it’s complicated) and whether or not they are “required” – that is, whether Flash should be loaded if they don’t work under HTML5. (Again, only MP3 + MP4 are supported by Flash.) If you had a page solely using OGG, you could make MP3/MP4 non-required, but many browsers would not play them inline.
SM2 will indicate its state (HTML 5 support or not, using Flash or not) in console.log()-style debug output messages when debugMode = true.
Want to check out the code? Fork away!
Posted by Dion Almaer at 9:22 am