*CSS 3 border-radius supported only by Firefox 2.x+, Safari (2.x?) - sadly, not IE 8.
This example uses SoundManager 2 to find 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.
CSS classes are dynamically applied as follows:
:hover effects are also active.
If you have a link to a PHP file that serves MP3 files eg. /music.php?fileID=123, it won't be picked up by the script as containing a known, playable .mp3 extension. To tell the script it should be treated as playable, include a type="audio/mpeg" MIME type attribute, or CSS class="inline-playable" in the link. eg:
<a href="/music.php?fileID=123" type="audio/mpeg">A song</a>
Or via CSS class name:
<a href="/music.php?fileID=123" class="inline-playable">A song</a>
To exclude an .MP3 or otherwise-playable link from being handled by SM2, use class="inline-exclude" and it will be ignored.
SoundManager 2 project page (not an MP3 link)
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 {}
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 inlineplayer.js)
this.config = {
playNext: false // stop after one sound, or play through list until end
}
See this basic demo for reference.