# 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 'coins'" 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="../jsAMP-preview/audio/office_lobby.mp3" title="Play 'Office Lobby'" 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)