Demo: Make MP3 links playable "in-place"

Inline MP3 Player Example: Fancy* CSS 3 version

*CSS 3 border-radius supported only by Firefox 2.x+, Safari (2.x?) as of April 2008 - perhaps IE 8 RTM..

• Rain
• Walking
• Barrlping with Carl (featureblend.com)
• Angry cow sound?
• Things that open, close and roll
• 20060826 - Armstrong

How It Works

• Lightweight (single JS click event handler)
• Uses existing SoundManager 2 API
• CSS for UI, easy to modify to taste

This example uses SoundManager 2 to finds links to MP3 files, and makes them playable "in-place" on a page. The script assigns CSS classes to links to indicate their state (playing/paused, etc.)

Links pointing to MP3s are assigned an onclick handler which intercepts the click (preventing the browser from following the link and unloading the page. SM2 will then create sound objects as needed to play the MP3s.

Static Examples

CSS classes are dynamically applied as follows:

• Default: class="sm2_link"
• Playing: class="sm2_link sm2_playing"
• Paused: class="sm2_link sm2_paused"

:hover effects are also active.

Flat (CSS-only) style

• Going Outside
• Office Lobby Entrance
• Rain 3
• Frogs @ Yahoo!
• Walking past sprinklers, mailbox
• Cup of Coffee

Static Examples

• Default: class="sm2_link"
• Playing: class="sm2_link sm2_playing"
• Paused: class="sm2_link sm2_paused"

SoundManager 2 project page (not an MP3 link)

Basic CSS

 If you want to make your own UI from scratch, here is the base:

 Default + hover state, "click to play":

 a.sm2_link {}
 a.sm2_link:hover {}

 Playing + hover state, "click to pause":

 a.sm2_playing {}
 a.sm2_playing:hover {}

 Paused + hover state, "click to resume":

 a.sm2_paused {}
 a.sm2_paused:hover {}

The class names which are applied are edited within the source JS also, for convenience.

I'd like to use this.

See this basic demo for reference.