YUI + SoundManager 2 | Demo: Play MP3 Links Inline

This example uses YUI to handle DOM + Event functions for links to MP3 files, and hands them over to SoundManager 2 (JS + Flash Sound API) which subsequently handles loading and playing of the MP3s. All of the UI changes are determined via CSS; when a sound object's play(), pause() or finish() events fire, the class name of the related <a> element is changed accordingly via SoundManager 2 event callbacks.

HTML 5 should ultimately eliminate the reliance on Flash for audio embedding like this, and simplify the work to an <audio> element in the future.

In the event that JS + Flash is not available or if anything else goes wrong, the browser will simply follow the link to the MP3 as it usually would.

Related YUI + SM2 demo: A Noisy DOM

This page is a demo from a YUI Blog article on YUI + SoundManager 2.

For more audio demos like this one, see the SoundManager 2 project home page.

Optional debug output from SoundManager 2 is shown below, to give an idea of what's going on.

SoundManager 2 debug output