Past, Present, Future?
CBSi Tech Talk, San Francisco - 12/07/2011
Then.
<bgsound src="ghostbusters.mid" autostart="true" loop="999">
(IE)<embed src="sound.wav" volume="50" controls="console">
<object type="audio/x-wav" data="test.wav"></object>
(IE)navigator.plugins['LiveAudio']['audio/wav']
(Netscape)- Flash-based player UI, SWF object/embed
- Java Applets, Quicktime etc.
-
Now.
- 100% Flash-based audio (SWF object/embed)
- HTML5
Audio()
/<audio>
, with Flash fallback
HTML5 Audio specifics: Gotchas
- iOS: Only one sound at a time. No auto-play allowed (pop-up blocker-style security model.) Limited or no caching.
- No HTML5 audio/video support in Safari/Windows if QuickTime is not installed.
- No panning (not in spec?)
- Latency between JS/browser, and browser/hardware (per-browser, per-OS?)
- Browsers may vary on
Audio()
object ceiling (eg., 32 max?) - HTTP: Partials (range requests) and chunked transfers de-emphasize "load progress"
- Related: areweplayingyet.org (HTML5 audio test suite)
HTML5 Audio specifics: Bugs
new Audio().canPlayType('audio/mp3')
: Mixed format support between MP3, MP4, OGG, WAV- Broken HTML5 audio (intermittent play failure) on Safari, OS X Snow Leopard (OS X 10.6.3 - 10.6.7.)
new Audio(null)
(may load "null" in Webkit) vs.new Audio()
(WRONG_ARGUMENTS_ERR
in Opera 9.64) - related:audio.src = null
vs.audio.src = ''
(Firefox likes '', most others don't and fail to close open connection, may not free RAM etc.)
Using HTML5 Audio today
-
JavaScript + Flash: Hybrid API approach
soundManager.createSound({ id: 'mySound', url: '/path/to/an.mp3' }).play();
- SoundManager 2: JavaScript API for MP3, MP4 + HTML5 audio. Hidden Flash abstraction. 10 KB (gzip)
Practical examples
- schillmania.com/projects/soundmanager2/
- jplayer.org (jQuery-based player UI)
Less-practical examples
- YUI + SoundManager 2: A Noisy DOM
- wheelsofsteel.net (browser-based DJ turntable + mixer experiment; HTML5 and/or Flash)
Future?
- HTML5 audio support is improving; quirks remain to be found + worked out.
- MP3 + MP4 vs. "free" (OGG/WebM) format wars, fragmented format support may be the norm
- Mozilla Audio Data API and Webkit Web Audio APIs (create and manipulate audio data on the fly, from JS.) Low-level control, relative to
Audio()
.