Enhancing YUI-based Applications With Audio
Aboot the author: Scott Schiller (@schill) is a front-end engineer on Flickr who joined Yahoo! in 2005, hailing from Canada. SoundManager 2 is one of his personal side-projects. As Flickr's self-professed resident DJ, he can be seen playing at the occasional Web 2.0 party between tinkering with time-lapse videos and photographing things for sharing online. Scott's experimental DHTML site is updated sporadically. In this article, Scott shows you how to use SoundManager to tie sound effects to specific user actions or events in YUI.
If you're like me, you're probably wanting to see some fun stuff up-front because reading is work, and work is boring! ;) Feel free to play with the demos first and then read on for the details.
A Brief History of HTML and "Multimedia"
The web is pretty good at visual presentation. It is easy to create, design and embed images, text, and links in HTML documents. Of the media formats natively supported today in HTML 4, audio and video - or rather, <audio> and <video> - are conspicuously missing.
HTML 5 should bring audio and video embedding closer to the simplicity of <img /> in the not-so-distant future. In the meantime, we have to resort to creative work-arounds to get HTML-5-like audio/video functionality across the gamut of today's common HTML 4-supporting browsers.
The (HTML 4) Problem With Embedding Audio
For audio on web sites today, developers often display a list of HTML links directly to MP3 files. This method is simple, universally-understood and indexable by search engines, but makes for a confusing and inconsistent browsing experience by default.
Users are generally prompted to right-click, "save as" and finally open the file from their desktop, or click the link and have their browser download and open the MP3 file. The regular "click" typically opens in a new page with the embedded player or launches an external application like QuickTime or Windows Media Player.
Not only are "naked" MP3 links extra work and confusing for the user, the browser's method of handling them is a distraction and takes them away from the experience of your site.
Using <object>/<embed> is another generic way to directly embed MP3 or other content, but again suffers from the problem of inconsistency; the developer won't know what may show in that area of the web page, given the user could have any array of applications which may load in order to handle that file type - in this case, likely the same QuickTime or Windows Media Player which would handle direct downloads would be shown in-place in your page. Again, not a great solution.
Flash widgets are sometimes used as a solution for embedding MP3 content, but the UI and skins tend to be 100% Flash-based rather than HTML and CSS-based and thus are more difficult for most web developers to customize. HTML 5 should change this with standards-based, CSS-skinnable and scriptable audio/video elements.
In the meantime, some creative solutions can be used to get more "web developer-friendly" widgets for audio.
Making MP3 Links "Just Work": YUI + SoundManager 2
By combining SoundManager 2 with YUI's DOM and Event utilities, you have an effective solution for embedding and controlling audio which can gracefully degrade to a browser download or embedded player.
Practical Example: Playable MP3 Links
The following demo uses YUI and SoundManager 2 to enhance MP3 links, making them playable inline. YUI's event utilities intercept clicks on links pointing to MP3 files and then use the SoundManager API to load and play the relevant URL before returning "false", and preventing the browser from loading the link. Subsequent clicks will toggle play/pause state.
- Demo 1 (practical): Play MP3 Links Inline
Adding Audio To Your UI
In certain applications, sound in the form of UI feedback can be appropriate and helpful to the user experience. Sound effects are common for Flash-based sites and web-based games, and in desktop gaming audio is usually a key part of telling the story.
.. But Don't Over-Do It
It's important to know when to stop. Recall animated "under construction" .GIFs? How about the blink tag? Marquee text? Some things are best left alone. Not every HTML page needs to move, blink, slide, flash and be noisy at the same time; even "fun" is best applied in moderation. Annoying your users with auto-playing music or noise can quickly lead to abandonment of your site.
There is probably good reason that standard HTML elements such as form controls and the like do not have sound effects or notifications associated with them. Perhaps "silence is golden" and it's best that the web be a quiet place by default, so as not to be annoying and distracting.
As one notable exception to the "silent web" theme, Internet Explorer usually makes a "click" sound when page navigation occurs, presumably to notify the user that an action has started. This has become more muted in recent times, but is still present and still seems to annoy some users to this day.
"Fun" Example: A Noisy DOM
Despite the arguments for silence, the following is an example of what it might be like to have "noisy" form elements, buttons and DOM elements which provide audible feedback as they're being used. The novelty is certainly to wear off quickly, but it does add an element of childish fun to the UI.
- Demo 2 (fun): A Noisy DOM
Looking Forward: HTML 5