Friday, May 21st, 2010

SoundManager2 now with HTML5 Audio

Category: Sound

>

Scott Schiller, the best moustache-d frontend engineer around, has updated his awesome SoundManager library. The latest SoundManager 2 version now comes with free HTML5 Audio support which makes it a HTML5 Audio()-capable JavaScript Sound API, backwards-compatible via Flash fallback for MP3/MP4 formats. Existing SM2 API seamlessly uses HTML5 where supported, currently experimental; and of course… works on iPad.

Highlights

  • 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:

soundManager.useHTML5Audio

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!

Related Content:

Posted by Dion Almaer at 9:22 am
11 Comments

+++--
3.3 rating from 3 votes

11 Comments »

Comments feed TrackBack URI

State of the art :).

Comment by nea — May 21, 2010

Is the original author, or a fork, likely to support Vorbis across more platforms? With it’s inclusion in WebM it should be coming to Flash natively, and there’s at least two implementations that work in older Flash versions. (Maybe throw in a Java fallback too?).

Comment by bawjaws — May 21, 2010

OGG (vorbis) audio is currently supported natively in Firefox, Safari and Chrome with HTML5; Adobe have announced support for VP8, which uses vorbis for the audio portion of the WebM video stuff as I understand – presumably, they will also include standalone Vorbis audio in the Flash Sound API, and I will look at including a Flash 10 version of the .SWF for SM2 at that point.

Comment by Schill — May 21, 2010

++ ” best moustache-d frontend engineer”

Comment by HedgerWang — May 21, 2010

Does it mean that he is equipped with the best mustache or that, of all mustachioed frontend engineers, he is the best?

Comment by okonomiyaki3000 — May 21, 2010

also works on iPhone OS 4 (beta 3)

Comment by thecheese — May 22, 2010

@thecheese: Great! I had to special-case iPhone OS up to 3.1.x because Audio() exists, but does not actually seem to work – as though the API was just stubbed out, etc.
 
I think the last time I saw Dion I was sporting a rather ridiculous mustache, which is probably where the mention came from. Had a good chuckle at that. ;)

Comment by Schill — May 23, 2010

Goes to show that moustaches alone can’t make you a great front-end engineer. UA-based browser sniffing in 2010? Come on.

Comment by DavidMark — May 23, 2010

@DavidMark in this particular case, there’s no other way to do it. Mobile Safari doesn’t reveal its various behavioral differences to the javascript API. the only detectable difference between the versions with various different behaviors is the user agent string.

Comment by Breton — May 24, 2010

@DavidMark I also take great umbrage to the insult. if Scott Schiller is not a great front end engineer, there aren’t any great front end engineers.

Comment by Breton — May 24, 2010

@DavidMark: If you have a better way to synchronously detect UAs + browser combinations which are known as “buggy”, for the HTML5 Audio() case – eg., Safari 4.0.5 on Snow Leopard only which can’t reliably play audio, or iPhone OS up to 3.1.2 – I’d love to hear it – see “fork.” :) http://github.com/scottschiller/SoundManager2

Comment by Schill — May 24, 2010

Leave a comment

You must be logged in to post a comment.