summaryrefslogtreecommitdiff
path: root/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links
diff options
context:
space:
mode:
Diffstat (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links')
-rwxr-xr-xdocs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/basic.html60
-rwxr-xr-xdocs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/css/inlineplayer.css212
-rwxr-xr-xdocs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_pause.gifbin0 -> 189 bytes
-rwxr-xr-xdocs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_pause.pngbin0 -> 222 bytes
-rwxr-xr-xdocs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_play.gifbin0 -> 193 bytes
-rwxr-xr-xdocs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_play.pngbin0 -> 291 bytes
-rwxr-xr-xdocs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/test.gifbin0 -> 215 bytes
-rwxr-xr-xdocs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/index.html228
-rwxr-xr-xdocs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/script/inlineplayer.js246
9 files changed, 746 insertions, 0 deletions
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/basic.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/basic.html
new file mode 100755
index 0000000..2e0e623
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/basic.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<title>SoundManager 2 Demo: Play MP3 Links on a page</title>
+<style type="text/css">
+
+/*
+
+ -------------------------------------------------------------
+
+ In-page demo CSS - see external CSS for actual relevant stuff.
+
+ --------------------------------------------------------------
+
+ */
+
+#soundmanager-debug {
+ /* SM2 debug container (optional, makes debug more useable) */
+ position:absolute;position:fixed;*position:absolute;bottom:10px;right:10px;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);
+}
+
+body {
+ font:75% normal verdana,arial,tahoma,"sans serif";
+}
+
+</style>
+<link rel="stylesheet" type="text/css" href="css/inlineplayer.css" />
+<link rel="stylesheet" type="text/css" href="../flashblock/flashblock.css" />
+<script type="text/javascript" src="../../script/soundmanager2.js"></script>
+<script type="text/javascript" src="script/inlineplayer.js"></script>
+</head>
+
+<body>
+
+ <h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Play a page of mp3s with javascript via SoundManager 2">SoundManager 2</a> / page as a playlist, basic template</h1>
+
+ <p>Don't forget to set debugMode = false within <em>inlineplayer.js</em> to disable debug output.</p>
+
+ <div id="sm2-container">
+ <!-- SM2 flash goes here -->
+ </div>
+
+ <ul class="graphic">
+
+ <li><a href="../jsAMP-preview/audio/rain.mp3">Rain</a></li>
+ <li><a href="../jsAMP-preview/audio/walking.mp3">Walking</a></li>
+ <li><a href="http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3">Barrlping with Carl (featureblend.com)</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Mak.mp3">Angry cow sound?</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Things that open, close and roll.mp3">Things that open, close and roll</a></li>
+ <li><a href="http://www.freshly-ground.com/misc/music/20060826%20-%20Armstrong.mp3">20060826 - Armstrong</a></li>
+ <li><a href="http://freshly-ground.com/data/video/Rain%20on%20Car%20Roof.aac">Rain On Car Roof (AAC Audio)</a></li>
+ </ul>
+
+ <p><a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 project page">SoundManager 2 project home</a></p>
+
+</div>
+
+</body>
+</html>
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/css/inlineplayer.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/css/inlineplayer.css
new file mode 100755
index 0000000..1fa31c7
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/css/inlineplayer.css
@@ -0,0 +1,212 @@
+/*
+
+ SoundManager 2: In-page MP3 player example
+ ------------------------------------------
+
+ Clicks on links to MP3s are intercepted via JS, calls are
+ made to SoundManager to load/play sounds. CSS classes are
+ appended to the link, which are used to highlight the
+ current play state and so on.
+
+ Class names are applied in addition to "sm2_link" base.
+
+ Default:
+
+ sm2_link
+
+ Additional states:
+
+ sm2_playing
+ sm2_paused
+
+ eg.
+
+ <!-- default -->
+ <a href="some.mp3" class="sm2_link">some.mp3</a>
+
+ <!-- playing -->
+ <a href="some.mp3" class="sm2_link sm2_playing">some.mp3</a>
+
+
+ Note you don't require ul.graphic / ul.flat etc. for your use
+ if only using one style on a page. You can just use .sm2_link{}
+ and so on, but isolate the CSS you want.
+
+ Side note: Would do multiple class definitions eg.
+
+ a.sm2_default.sm2_playing{}
+
+ .. except IE 6 has a parsing bug which may break behaviour,
+ applying sm2_playing {} even when the class is set to sm2_default.
+
+
+ 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 {}
+
+
+*/
+
+/* two different list types */
+
+ul.flat {
+ list-style-type:none;
+ padding-left:0px;
+}
+
+ul.flat li,
+ul.graphic li {
+ padding-bottom:1px;
+}
+
+ul.flat li a {
+ display:inline-block;
+ padding:2px 4px 2px 4px;
+}
+
+ul.graphic {
+ list-style-type:none;
+ padding-left:0px;
+ margin-left:0px;
+}
+
+/* background-image-based CSS3 example */
+
+ul.graphic {
+ list-style-type:none;
+ margin:0px;
+ padding:0px;
+}
+
+ul.graphic li {
+ margin-bottom:2px;
+}
+
+ul.graphic li a,
+ul.graphic li a.sm2_link {
+ /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
+ display:inline-block;
+ padding-left:22px;
+ min-height:16px;
+ vertical-align: middle;
+ background-color:#778899;
+ -moz-border-radius:3px;
+ -webkit-border-radius:3px;
+ border-radius:3px;
+ padding:3px 3px 3px 25px;
+ min-width:19em;
+ _width:19em; /* IE 6 */
+ text-decoration:none;
+ font-weight:normal;
+ color:#f6f9ff;
+}
+
+ul.graphic li a.sm2_link {
+ /* safari 3.1+ fun (or, proprietary crap. TBD.) */
+ -webkit-transition-property: hover;
+ -webkit-transition: background-color 0.15s linear;
+ -moz-transition: background-color 0.15s linear 0s; /* firefox 4 */
+ -o-transition-property: background-color; /* opera 10.5 */
+ -o-transition-duration: 0.15s;
+}
+
+ul.graphic li a, /* use a.sm2_link {} if you want play icons showing only if SM2 is supported */
+ul.graphic li a.sm2_paused:hover,
+ul.graphic li a.sm2_link:hover {
+ background-image:url(../image/icon_play.png);
+ background-position:3px 50%;
+ background-repeat:no-repeat;
+ _background-image:url(../image/icon_play.gif); /* IE 6 */
+}
+
+ul.graphic li a.sm2_link:hover {
+ /* default hover color, if you'd like.. */
+ background-color:#445566;
+ color:#fff;
+}
+
+ul.graphic li a.sm2_paused {
+ background-color:#ccc;
+}
+
+ul.graphic li a.sm2_paused:hover {
+ background:#999 url(../image/icon_play.png) no-repeat 3px 50%;
+ _background-image:url(../image/icon_play.gif);
+}
+
+ul.graphic li a.sm2_playing,
+ul.graphic li a.sm2_playing:hover {
+ background:#334455 url(../image/icon_pause.png) no-repeat 3px 50%;
+ _background-image:url(../image/icon_pause.gif);
+ text-decoration:none;
+}
+
+/* hide button while playing?
+ul.graphic li a.sm2_playing {
+ background-image:none;
+}
+*/
+
+body #sm2-container object,
+body #sm2-container embed {
+ /*
+ flashblock handling: hide SWF off-screen by default (until blocked timeout case.)
+ include body prefix to ensure override of flashblock.css.
+ */
+
+ left:-9999em;
+ top:-9999em;
+}
+
+/* flat CSS example */
+
+ul.flat a.sm2_link {
+ /* default state: "a playable link" */
+ border-left:6px solid #999;
+ padding-left:4px;
+ padding-right:4px;
+}
+
+ul.flat a.sm2_link:hover {
+ /* default (inactive) hover state */
+ border-left-color:#333;
+}
+
+
+ul.flat a.sm2_playing {
+ /* "now playing" */
+ border-left-color:#6666ff;
+ background-color:#000;
+ color:#fff;
+ text-decoration:none;
+}
+
+ul.flat a.sm2_playing:hover {
+ /* "clicking will now pause" */
+ border-left-color:#cc3333;
+}
+
+ul.flat a.sm2_paused {
+ /* "paused state" */
+ background-color:#666;
+ color:#fff;
+ text-decoration:none;
+}
+
+ul.flat a.sm2_paused:hover {
+ /* "clicking will resume" */
+ border-left-color:#33cc33;
+} \ No newline at end of file
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_pause.gif b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_pause.gif
new file mode 100755
index 0000000..7f3443d
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_pause.gif
Binary files differ
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_pause.png b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_pause.png
new file mode 100755
index 0000000..5775ce2
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_pause.png
Binary files differ
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_play.gif b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_play.gif
new file mode 100755
index 0000000..3954336
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_play.gif
Binary files differ
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_play.png b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_play.png
new file mode 100755
index 0000000..303fc4b
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/icon_play.png
Binary files differ
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/test.gif b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/test.gif
new file mode 100755
index 0000000..075c135
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/image/test.gif
Binary files differ
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/index.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/index.html
new file mode 100755
index 0000000..040966a
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/index.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<title>SoundManager 2 Demo: Play MP3 Links on a page</title>
+<meta name="robots" content="noindex" />
+<style type="text/css">
+
+/*
+
+ -------------------------------------------------------------
+
+ In-page demo CSS - see external CSS for actual relevant stuff.
+
+ --------------------------------------------------------------
+
+ */
+
+#soundmanager-debug {
+ /* SM2 debug container (optional, makes debug more useable) */
+ position:absolute;position:fixed;*position:absolute;bottom:10px;right:10px;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);
+}
+
+body {
+ font:75% normal verdana,arial,tahoma,"sans serif";
+}
+
+h1, h2, h3 {
+ font:2.5em arial,tahoma,verdana;
+ font-weight:normal;
+ margin-bottom:0px;
+}
+
+h1, h2 {
+ letter-spacing:-1px; /* zomg web x.0! ;) */
+ margin-top:0.5em;
+}
+
+h2, h3 {
+ color:#333;
+}
+
+h2 {
+ font-size:2em;
+}
+
+h3 {
+ font-size:1.5em;
+}
+
+h1 a,
+h1 a:hover {
+ color:#000;
+ text-decoration:none;
+}
+
+h1 a:hover {
+ text-decoration:underline;
+}
+
+ul.notes {
+ margin-left:0px;
+ padding-left:1.5em;
+}
+
+.note {
+ margin-top:0px;
+ font-style:italic;
+ color:#999;
+}
+
+pre {
+ font-size:1.2em;
+ _font-size:1em;
+}
+
+#left {
+ max-width:56em;
+}
+
+code {
+ font-size:120%;
+ line-height:1.5em;
+ color:#006600;
+ font-weight:bold;
+}
+
+p {
+ line-height:1.75em;
+}
+
+</style>
+<link rel="stylesheet" type="text/css" href="css/inlineplayer.css" />
+<link rel="stylesheet" type="text/css" href="../flashblock/flashblock.css" />
+<script type="text/javascript" src="../../script/soundmanager2.js"></script>
+<script type="text/javascript" src="script/inlineplayer.js"></script>
+</head>
+
+<body>
+
+<div id="left">
+
+ <h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Play MP3s inline with javascript using SoundManager 2">SoundManager 2</a> / Make MP3 links play in-place</h1>
+
+ <h2>Inline MP3 Player Example: Fancy* CSS 3 version</h2>
+ <p class="note">*CSS 3 border-radius supported only by Firefox 2.x+, Safari (2.x?) - sadly, not IE 8.</p>
+
+ <div id="sm2-container">
+ <!-- SM2 flash goes here -->
+ </div>
+
+ <ul class="graphic">
+
+ <li><a href="../jsAMP-preview/audio/rain.mp3">Rain</a></li>
+ <li><a href="../jsAMP-preview/audio/walking.mp3">Walking</a></li>
+ <!-- files from the web (note that ID3 information will *not* load from remote domains without permission, Flash restriction) -->
+ <li><a href="http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3">Barrlping with Carl (featureblend.com)</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Mak.mp3">Angry cow sound?</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Things that open, close and roll.mp3">Things that open, close and roll</a></li>
+ <li><a href="http://www.freshly-ground.com/misc/music/20060826%20-%20Armstrong.mp3">20060826 - Armstrong</a></li>
+ <li><a href="http://freshly-ground.com/data/video/Rain%20on%20Car%20Roof.aac">Rain On Car Roof (AAC Audio)</a></li>
+ </ul>
+
+ <h2>How It Works</h2>
+
+ <ul class="notes">
+ <li>Lightweight (single JS click event handler)</li>
+ <li>Uses existing SoundManager 2 API</li>
+ <li>CSS for UI, easy to modify to taste</li>
+ </ul>
+
+ <p>This example uses <a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 Javascript Sound API">SoundManager 2</a> 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.)</p>
+ <p>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.</p>
+
+ <h3>Static Examples</h3>
+ <p style="margin-top:0px">CSS classes are dynamically applied as follows:</p>
+ <ul class="graphic">
+ <li><a href="#" class="sm2_link" title="'Click to play' state">Default: class="sm2_link"</a></li>
+ <li><a href="#" class="sm2_link sm2_playing" title="'Click to pause' state">Playing: class="sm2_link sm2_playing"</a></li>
+ <li><a href="#" class="sm2_link sm2_paused" title="'Click to resume' state">Paused: class="sm2_link sm2_paused"</a></li>
+ </ul>
+ <p>:hover effects are also active.</p>
+
+ <h2>Flat (CSS-only) style</h2>
+
+ <ul class="flat">
+
+ <li><a href="../jsAMP-preview/audio/going_outside.mp3">Going Outside</a></li>
+ <li><a href="../jsAMP-preview/audio/office_lobby.mp3">Office Lobby Entrance</a></li>
+
+ <!-- files from the web (note that ID3 information will *not* load from remote domains without permission, Flash restriction) -->
+
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Rain 3.mp3">Rain 3</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Frogs @ Yahoo!.mp3">Frogs @ Yahoo!</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Walking past sprinklers, mailbox.mp3">Walking past sprinklers, mailbox</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Cup of Coffee.mp3">Cup of Coffee</a></li>
+
+ </ul>
+
+ <h3>Static Examples</h3>
+
+ <ul class="flat">
+
+ <li><a href="#" class="sm2_link" title="'Click to play' state">Default: class="sm2_link"</a></li>
+ <li><a href="#" class="sm2_link sm2_playing" title="'Click to pause' state">Playing: class="sm2_link sm2_playing"</a></li>
+ <li><a href="#" class="sm2_link sm2_paused" title="'Click to resume' state">Paused: class="sm2_link sm2_paused"</a></li>
+
+ </ul>
+
+ <h3>Forcing play (or exclusion) of links</h3>
+
+ <p>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 <code>type="audio/mpeg"</code> MIME type attribute, or CSS <code>class="inline-playable"</code> in the link. eg:</p>
+
+ <p>
+ <code>&lt;a href="/music.php?fileID=123" type="audio/mpeg"&gt;A song&lt;/a&gt;</code>
+ </p>
+
+ <p>Or via CSS class name:</p>
+ <code>&lt;a href="/music.php?fileID=123" class="inline-playable"&gt;A song&lt;/a&gt;</code>
+</p>
+
+ <p>
+ To exclude an .MP3 or otherwise-playable link from being handled by SM2, use <code>class="inline-exclude"</code> and it will be ignored.
+ </p>
+
+ <p>
+ <a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 home">SoundManager 2 project page</a> (not an MP3 link)
+ </p>
+
+ <h3>Basic CSS</h3>
+
+<pre>
+ 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 {}
+</pre>
+
+ <h3>Other Options</h3>
+
+ <p>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.)</p>
+
+<pre>
+// (within inlineplayer.js)
+this.config = {
+ playNext: false // stop after one sound, or play through list until end
+}
+</pre>
+
+ <h3>I'd like to use this.</h3>
+ <p>See this <a href="basic.html" title="basic template: inline mp3 player">basic demo</a> for reference.</p>
+
+</div>
+
+</body>
+</html>
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/script/inlineplayer.js b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/script/inlineplayer.js
new file mode 100755
index 0000000..2bd1a84
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/play-mp3-links/script/inlineplayer.js
@@ -0,0 +1,246 @@
+/*
+
+ SoundManager 2 Demo: Play MP3 links "in-place"
+ ----------------------------------------------
+
+ http://schillmania.com/projects/soundmanager2/
+
+ A simple demo making MP3s playable "inline"
+ and easily styled/customizable via CSS.
+
+ Requires SoundManager 2 Javascript API.
+
+*/
+
+function InlinePlayer() {
+ var self = this;
+ var pl = this;
+ var sm = soundManager; // soundManager instance
+ this.playableClass = 'inline-playable'; // CSS class for forcing a link to be playable (eg. doesn't have .MP3 in it)
+ this.excludeClass = 'inline-exclude'; // CSS class for ignoring MP3 links
+ this.links = [];
+ this.sounds = [];
+ this.soundsByURL = [];
+ this.indexByURL = [];
+ this.lastSound = null;
+ this.soundCount = 0;
+ var isIE = (navigator.userAgent.match(/msie/i));
+
+ this.config = {
+ playNext: false, // stop after one sound, or play through list until end
+ autoPlay: false // start playing the first sound right away
+ }
+
+ this.css = {
+ // CSS class names appended to link during various states
+ sDefault: 'sm2_link', // default state
+ sLoading: 'sm2_loading',
+ sPlaying: 'sm2_playing',
+ sPaused: 'sm2_paused'
+ }
+
+ this.addEventHandler = function(o,evtName,evtHandler) {
+ typeof(attachEvent)=='undefined'?o.addEventListener(evtName,evtHandler,false):o.attachEvent('on'+evtName,evtHandler);
+ }
+
+ this.removeEventHandler = function(o,evtName,evtHandler) {
+ typeof(attachEvent)=='undefined'?o.removeEventListener(evtName,evtHandler,false):o.detachEvent('on'+evtName,evtHandler);
+ }
+
+ this.classContains = function(o,cStr) {
+ return (typeof(o.className)!='undefined'?o.className.match(new RegExp('(\\s|^)'+cStr+'(\\s|$)')):false);
+ }
+
+ this.addClass = function(o,cStr) {
+ if (!o || !cStr || self.classContains(o,cStr)) return false;
+ o.className = (o.className?o.className+' ':'')+cStr;
+ }
+
+ this.removeClass = function(o,cStr) {
+ if (!o || !cStr || !self.classContains(o,cStr)) return false;
+ o.className = o.className.replace(new RegExp('( '+cStr+')|('+cStr+')','g'),'');
+ }
+
+ this.getSoundByURL = function(sURL) {
+ return (typeof self.soundsByURL[sURL] != 'undefined'?self.soundsByURL[sURL]:null);
+ }
+
+ this.isChildOfNode = function(o,sNodeName) {
+ if (!o || !o.parentNode) {
+ return false;
+ }
+ sNodeName = sNodeName.toLowerCase();
+ do {
+ o = o.parentNode;
+ } while (o && o.parentNode && o.nodeName.toLowerCase() != sNodeName);
+ return (o.nodeName.toLowerCase() == sNodeName?o:null);
+ }
+
+ this.events = {
+
+ // handlers for sound events as they're started/stopped/played
+
+ play: function() {
+ pl.removeClass(this._data.oLink,this._data.className);
+ this._data.className = pl.css.sPlaying;
+ pl.addClass(this._data.oLink,this._data.className);
+ },
+
+ stop: function() {
+ pl.removeClass(this._data.oLink,this._data.className);
+ this._data.className = '';
+ },
+
+ pause: function() {
+ pl.removeClass(this._data.oLink,this._data.className);
+ this._data.className = pl.css.sPaused;
+ pl.addClass(this._data.oLink,this._data.className);
+ },
+
+ resume: function() {
+ pl.removeClass(this._data.oLink,this._data.className);
+ this._data.className = pl.css.sPlaying;
+ pl.addClass(this._data.oLink,this._data.className);
+ },
+
+ finish: function() {
+ pl.removeClass(this._data.oLink,this._data.className);
+ this._data.className = '';
+ if (pl.config.playNext) {
+ var nextLink = (pl.indexByURL[this._data.oLink.href]+1);
+ if (nextLink<pl.links.length) {
+ pl.handleClick({'target':pl.links[nextLink]});
+ }
+ }
+ }
+
+ }
+
+ this.stopEvent = function(e) {
+ if (typeof e != 'undefined' && typeof e.preventDefault != 'undefined') {
+ e.preventDefault();
+ } else if (typeof event != 'undefined' && typeof event.returnValue != 'undefined') {
+ event.returnValue = false;
+ }
+ return false;
+ }
+
+ this.getTheDamnLink = (isIE)?function(e) {
+ // I really didn't want to have to do this.
+ return (e && e.target?e.target:window.event.srcElement);
+ }:function(e) {
+ return e.target;
+ }
+
+ this.handleClick = function(e) {
+ // a sound link was clicked
+ if (typeof e.button != 'undefined' && e.button>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 || (!sm.canPlayLink(o) && !self.classContains(o,self.playableClass)) || self.classContains(o,self.excludeClass)) {
+ return true; // pass-thru for non-MP3/non-links
+ }
+ 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:'inlineMP3Sound'+(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) self.stopSound(self.lastSound);
+ thisSound.play();
+ // stop last sound
+ }
+
+ 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('inlinePlayer.init()');
+ var oLinks = document.getElementsByTagName('a');
+ // grab all links, look for .mp3
+ var foundItems = 0;
+ for (var i=0, j=oLinks.length; i<j; i++) {
+ if ((sm.canPlayLink(oLinks[i]) || self.classContains(oLinks[i],self.playableClass)) && !self.classContains(oLinks[i],self.excludeClass)) {
+ self.addClass(oLinks[i],self.css.sDefault); // add default CSS decoration
+ self.links[foundItems] = (oLinks[i]);
+ self.indexByURL[oLinks[i].href] = foundItems; // hack for indexing
+ foundItems++;
+ }
+ }
+ if (foundItems>0) {
+ self.addEventHandler(document,'click',self.handleClick);
+ if (self.config.autoPlay) {
+ self.handleClick({target:self.links[0],preventDefault:function(){}});
+ }
+ }
+ sm._writeDebug('inlinePlayer.init(): Found '+foundItems+' relevant items.');
+ }
+
+ this.init();
+
+}
+
+var inlinePlayer = null;
+
+soundManager.debugMode = true; // disable or enable debug output
+soundManager.useFlashBlock = true;
+soundManager.url = '../../swf/'; // path to directory containing SM2 SWF
+
+// optional: enable MPEG-4/AAC support (requires flash 9)
+
+soundManager.flashVersion = 9;
+soundManager.useMovieStar = true;
+
+// ----
+
+soundManager.onready(function() {
+ if (soundManager.supported()) {
+ // soundManager.createSound() etc. may now be called
+ inlinePlayer = new InlinePlayer();
+ }
+});
+