diff options
Diffstat (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button')
8 files changed, 597 insertions, 0 deletions
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/basic.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/basic.html new file mode 100755 index 0000000..9a4b151 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/basic.html @@ -0,0 +1,48 @@ +<!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: Basic MP3 Play Button (Simple Demo)</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/mp3-player-button.css" />
+<script type="text/javascript" src="../../script/soundmanager2.js"></script>
+<script type="text/javascript" src="script/mp3-player-button.js"></script>
+</head>
+
+<body>
+
+ <h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Play MP3s inline with javascript using SoundManager 2">SoundManager 2</a> / Basic MP3 Play Button: Template</h1>
+
+ <p>View the source code of this page for detail. Don't forget to set <b>soundManager.debugMode = false;</b> to disable debug output.</p>
+
+ <p>Walking <a href="../jsAMP-preview/audio/walking.mp3" class="sm2_button">Walking</a></p>
+
+ <p>Armstrong Beat <a href="http://www.freshly-ground.com/misc/music/20060826%20-%20Armstrong.mp3" class="sm2_button">Armstrong Beat</a></p>
+
+ <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/mp3-player-button/css/mp3-player-button.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/css/mp3-player-button.css new file mode 100755 index 0000000..e5e1ce6 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/css/mp3-player-button.css @@ -0,0 +1,114 @@ +/* + + SoundManager 2: Basic MP3 player CSS + ------------------------------------ + + 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_button" base. + + Default: + + sm2_button + + Additional states: + + sm2_playing + sm2_paused + + eg. + + <!-- default --> + <a href="some.mp3" class="sm2_button">some.mp3</a> + + <!-- playing --> + <a href="some.mp3" class="sm2_button 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_button{} + 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_button {} + a.sm2_button: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 {} + +*/ + +a.sm2_button { + position:relative; + display:inline-block; /* If you worry about old browser bugs, Firefox 2 might not like this and may need -moz-inline-box instead. :D */ + width:18px; + height:18px; + text-indent:-9999px; /* don't show link text */ + overflow:hidden; /* don't draw inner link text */ + vertical-align:middle; + /* and, a bit of round-ness for the cool browsers. */ + -moz-border-radius:6px; + -webkit-border-radius:6px; + -o-border-radius:6px; + border-radius:6px; + margin-top:-1px; /* vertical align tweak */ + /* safari 3.1+ fun (/W3 working draft extension, TBD.) */ + -webkit-transition-property: hover; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out 0s; /* firefox 4 (couldn't sort out -moz-transform vs. MozTransform, so, "all" for now) */ + -o-transition-property: background-color; /* opera 10.5 */ + -o-transition-duration: 0.15s; +} + +a.sm2_button:focus { + outline:none; /* maybe evil, but don't show the slight border outline on focus. */ +} + +a.sm2_button, +a.sm2_button.sm2_paused:hover { + background-color:#3399cc; + background-image:url(../image/arrow-right-white.png); + /* where possible, use data: and skip the HTTP request. Fancy-pants. Would use short-hand background: for above, but IE 8 doesn't override background-image. */ + background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAbklEQVQY02NgQAL//v1jZMAF/v//vwuIs9HEUBUBTbj4HwIeA3EGVsVAxtn/qOAVUGM8uknIiv4hsV8A5ZKxKfoLVvnvHwifAzLtMKwDSQLBVSBti27dJajkcSD2RJODO3wtkOOMz/tMSJJYAxMA5dmsL0IfubQAAAAASUVORK5CYII=); + *background-image:url(../image/arrow-right-white.gif); /* IE 6+7 don't do DATA: URIs */ + background-repeat:no-repeat; + background-position:5px 50%; +} + +a.sm2_button:hover, +a.sm2_button.sm2_playing, +a.sm2_button.sm2_playing:hover { + background-color:#cc3333; +} + +a.sm2_button.sm2_playing, +a.sm2_button.sm2_playing:hover { + -moz-transform:rotate(90deg); + -webkit-transform:rotate(90deg); +} + +a.sm2_button.sm2_paused, +a.sm2_button.sm2_paused:hover { + background-color:#666; +}
\ No newline at end of file diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-black.gif b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-black.gif Binary files differnew file mode 100755 index 0000000..3b4900e --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-black.gif diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-black.png b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-black.png Binary files differnew file mode 100755 index 0000000..fc55124 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-black.png diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-white.gif b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-white.gif Binary files differnew file mode 100755 index 0000000..9e760e1 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-white.gif diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-white.png b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-white.png Binary files differnew file mode 100755 index 0000000..4189094 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/image/arrow-right-white.png 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 @@ +<!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: Basic MP3 Play Button</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 li {
+ margin-bottom:0.5em;
+}
+
+ul.notes {
+ margin-left:0px;
+ padding-left:1.5em;
+}
+
+.note {
+ margin-top:0px;
+ font-style:italic;
+ color:#666;
+}
+
+pre {
+ font-weight:bold;
+ font-size:1.2em;
+ _font-size:1em;
+}
+
+pre code {
+ color:#228822;
+}
+
+#left {
+ max-width:56em;
+}
+
+</style>
+<link rel="stylesheet" type="text/css" href="css/mp3-player-button.css" />
+<!-- soundManager.useFlashBlock: related 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/mp3-player-button.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> / Inline MP3 Player Button</h1>
+
+ <h2 style="display:inline">Basic MP3 Play Button Examples</h2> (also see <a title="MP3 Play Button, Basic Example demo" href="basic.html">basic demo</a>.)
+
+ <hr />
+
+ <div id="sm2-container">
+ <!-- flash movie ends up here -->
+ </div>
+
+ <h3>Inline text, with "play" button</h3>
+
+ <p>Example code (link with a <b>sm2_button</b> CSS class):</p>
+<pre><p> Spare change <code><a href="/path/to/coins.mp3" title="Play &quot;coins&quot;" class="sm2_button">coins.mp3</a></code> </p></pre>
+ <p>Renders as:</p>
+<div>
+ <p>Spare change <a href="../../demo/_mp3/coins.mp3" class="sm2_button" title="Play "coins"">coins.mp3</a></p>
+ <p class="note">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".</p>
+</div>
+ <h3>Basic MP3 play button, no text</h3>
+
+ <p>Code:</p>
+
+ <pre><code><a href="../jsAMP-preview/audio/office_lobby.mp3" title="Play &quot;Office Lobby&quot;" class="sm2_button">Office Lobby</a></code></pre>
+
+ <p>Renders as:</p>
+ <p>
+ <a href="../jsAMP-preview/audio/office_lobby.mp3" title="Play "Office Lobby"" class="sm2_button">Office Lobby</a>
+ </p>
+ <h2>How It Works</h2>
+
+ <p><a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 Javascript Sound API">SoundManager 2</a> 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.)</p>
+
+ <h3>Static Examples</h3>
+
+ <p>CSS classes are dynamically applied as follows:</p>
+
+ <ul>
+ <li><a href="#" class="sm2_button" title=""Click to play" state">Default: class="sm2_button"</a> Default: class="sm2_button"</li>
+ <li><a href="#" class="sm2_button sm2_playing" title=""Click to pause" state">Playing: class="sm2_button sm2_playing"</a> Playing: class="sm2_button sm2_playing"</li>
+ <li><a href="#" class="sm2_button sm2_paused" title=""Click to resume" state">Paused: class="sm2_button sm2_paused"</a> Paused: class="sm2_button sm2_paused"</li>
+ </ul>
+
+ <h3>Basic CSS</h3>
+
+ <p>If you want to make your own UI from scratch, here is the base:</p>
+
+<pre>
+ Default + hover state, "click to play":
+<code>
+ a.sm2_button {}
+ a.sm2_button:hover {}
+</code>
+ Playing + hover state, "click to pause":
+<code>
+ a.sm2_button.sm2_playing {}
+ a.sm2_button.sm2_playing:hover {}
+</code>
+ Paused + hover state, "click to resume":
+<code>
+ a.sm2_button.sm2_paused {}
+ a.sm2_button.sm2_paused:hover {}
+</code></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>
+<code>
+// (within mp3-player-button.js)
+this.config = {
+ playNext: false // stop after one sound, or play through list until end
+}
+</code></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>
+
+ <p>
+ <a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 home">SoundManager 2 project page</a> (not an MP3 link)
+ </p>
+
+</div>
+
+</body>
+</html>
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/script/mp3-player-button.js b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/script/mp3-player-button.js new file mode 100755 index 0000000..96e0346 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/mp3-player-button/script/mp3-player-button.js @@ -0,0 +1,247 @@ +/*
+
+ SoundManager 2 Demo: Play MP3 links via button
+ ----------------------------------------------
+
+ http://schillmania.com/projects/soundmanager2/
+
+ A simple demo making MP3s playable "inline"
+ and easily styled/customizable via CSS.
+
+ A variation of the "play mp3 links" demo.
+
+ Requires SoundManager 2 Javascript API.
+
+*/
+
+function BasicMP3Player() {
+ var self = this;
+ var pl = this;
+ var sm = soundManager; // soundManager instance
+ this.excludeClass = 'button-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_button', // default state
+ sLoading: 'sm2_loading',
+ sPlaying: 'sm2_playing',
+ sPaused: 'sm2_paused'
+ }
+
+ this.includeClass = this.css.sDefault;
+
+
+ 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 || !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; i<j; i++) {
+ if (self.classContains(oLinks[i],self.css.sDefault) && !self.classContains(oLinks[i],self.excludeClass)) {
+ // self.addClass(oLinks[i],self.css.sDefault); // add default CSS decoration - good if you're lazy and want ALL MP3/playable links to do this
+ 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('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 |
