From 753f60c7d4769fa72d3b910e491f37db6f130898 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 2 Aug 2013 17:19:21 -0500 Subject: dymaxion --- .../demo/mp3-player-button/index.html | 188 +++++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/index.html (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/index.html') diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/index.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/index.html new file mode 100755 index 0000000..6cc1ff5 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/index.html @@ -0,0 +1,188 @@ + + + +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:

+ + + +

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) +

+ +
+ + + -- cgit v1.2.3-70-g09d2