SoundManager 2 / Basic MP3 Play Button: Template

View the source code of this page for detail. Don't forget to set soundManager.debugMode = false; to disable debug output.

some.mp3

SoundManager 2 Demo: Basic MP3 Play Button

+ +

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="../jsAMP-preview/audio/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) +

+ +

1) { + // ignore right-click + return true; + } + var o = self.getTheDamnLink(e); + if (o.nodeName.toLowerCase() != 'a') { + o = self.isChildOfNode(o,'a'); + if (!o) return true; + } + var sURL = o.getAttribute('href'); + if (!o.href || !soundManager.canPlayLink(o) || self.classContains(o,self.excludeClass)) { + return true; // pass-thru for non-MP3/non-links + } + if (!self.classContains(o,self.includeClass)) { + return true; + } + sm._writeDebug('handleClick()'); + var soundURL = (o.href); + var thisSound = self.getSoundByURL(soundURL); + if (thisSound) { + // already exists + if (thisSound == self.lastSound) { + // and was playing (or paused) + thisSound.togglePause(); + } else { + // different sound + thisSound.togglePause(); // start playing current + sm._writeDebug('sound different than last sound: '+self.lastSound.sID); + if (self.lastSound) self.stopSound(self.lastSound); + } + } else { + // create sound + thisSound = sm.createSound({ + id:'basicMP3Sound'+(self.soundCount++), + url:soundURL, + onplay:self.events.play, + onstop:self.events.stop, + onpause:self.events.pause, + onresume:self.events.resume, + onfinish:self.events.finish + }); + // tack on some custom data + thisSound._data = { + oLink: o, // DOM node for reference within SM2 object event handlers + className: self.css.sPlaying + }; + self.soundsByURL[soundURL] = thisSound; + self.sounds.push(thisSound); + if (self.lastSound) { + // stop last sound + self.stopSound(self.lastSound); + } + thisSound.play(); + } + + self.lastSound = thisSound; // reference for next call + + if (typeof e != 'undefined' && typeof e.preventDefault != 'undefined') { + e.preventDefault(); + } else { + event.returnValue = false; + } + return false; + } + + this.stopSound = function(oSound) { + soundManager.stop(oSound.sID); + soundManager.unload(oSound.sID); + } + + this.init = function() { + sm._writeDebug('basicMP3Player.init()'); + var oLinks = document.getElementsByTagName('a'); + // grab all links, look for .mp3 + var foundItems = 0; + for (var i=0, j=oLinks.length; i0) { + self.addEventHandler(document,'click',self.handleClick); + if (self.config.autoPlay) { + self.handleClick({target:self.links[0],preventDefault:function(){}}); + } + } + sm._writeDebug('basicMP3Player.init(): Found '+foundItems+' relevant items.'); + } + + this.init(); + +} + +var basicMP3Player = null; + +soundManager.useFlashBlock = true; +soundManager.url = '../../swf/'; // path to directory containing SM2 SWF + +soundManager.onready(function() { + if (soundManager.supported()) { + // soundManager.createSound() etc. may now be called + basicMP3Player = new BasicMP3Player(); + } +}); \ No newline at end of file -- cgit v1.2.3-70-g09d2