SoundManager 2 / Inline MP3 Player Button

Basic MP3 Play Button Examples

(also see basic demo.)

Inline text, with "play" button

Example code (link with a sm2_button CSS class):

<p> Spare change <a href="/path/to/coins.mp3" title="Play &quot;coins&quot;" class="sm2_button">coins.mp3</a> </p>

Renders as:

Spare change coins.mp3

Note that the text inside the link is hidden and replaced with an image, but should be descriptive - or at least should say something generic, like "play".

Basic MP3 play button, no text

Code:

<a href="../_mp3/office_lobby.mp3" title="Play &quot;Office Lobby&quot;" class="sm2_button">Office Lobby</a>

Renders as:

Office Lobby

How It Works

SoundManager 2 intercepts clicks to MP3 links and plays them inline. The script assigns additional CSS classes to the links to indicate their state (playing/paused, etc.)

Static Examples

CSS classes are dynamically applied as follows:

Default: class="sm2_button" Default: class="sm2_button"
Playing: class="sm2_button sm2_playing" Playing: class="sm2_button sm2_playing"
Paused: class="sm2_button sm2_paused" Paused: class="sm2_button sm2_paused"

Basic CSS

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

 Default + hover state, "click to play":

 a.sm2_button {}
 a.sm2_button:hover {}

 Playing + hover state, "click to pause":

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

 Paused + hover state, "click to resume":

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

Other Options

By default, one sound will be played at a time; you can easily change a "config" object value to turn on playlist-like behaviour (i.e., play the next MP3 when the current one finishes.)


// (within mp3-player-button.js)
this.config = {
 playNext: false // stop after one sound, or play through list until end
}

I'd like to use this.

See this basic demo for reference.

SoundManager 2 project page (not an MP3 link)