diff options
Diffstat (limited to 'docs/dymaxion/soundmanagerv297a-20101010/index.html')
| -rwxr-xr-x | docs/dymaxion/soundmanagerv297a-20101010/index.html | 513 |
1 files changed, 513 insertions, 0 deletions
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/index.html b/docs/dymaxion/soundmanagerv297a-20101010/index.html new file mode 100755 index 0000000..dd271ca --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/index.html @@ -0,0 +1,513 @@ +<!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: JavaScript Sound For The Web</title> +<meta name="robots" content="noindex" />
+<meta name="description" content="Play sound from JavaScript including MP3, MPEG-4 and HTML5-supported audio formats with SoundManager 2, a cross-browser/platform sound API. BSD licensed." />
+<meta name="keywords" content="javascript sound, html5 audio, html5 sound, javascript audio, javascript play mp3, javascript sound control, mp3, mp4, mpeg4, aac, Scott Schiller, Schill, Schillmania" />
+<meta name="author" content="Scott Schiller" />
+<meta name="copyright" content="Copyright (C) 1997 onwards Scott Schiller" />
+<meta name="language" content="en-us" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<!-- base library + a bunch of demo components (yay, they all work together) -->
+<link rel="stylesheet" type="text/css" href="demo/play-mp3-links/css/inlineplayer.css" />
+<link rel="stylesheet" type="text/css" href="demo/page-player/css/page-player.css" />
+<link rel="stylesheet" type="text/css" href="demo/360-player/360player.css" />
+<link rel="stylesheet" type="text/css" href="demo/mp3-player-button/css/mp3-player-button.css" />
+<link rel="stylesheet" type="text/css" href="demo/flashblock/flashblock.css" />
+<link rel="stylesheet" type="text/css" media="screen" href="demo/index.css" />
+<script type="text/javascript" src="script/soundmanager2.js"></script>
+<script type="text/javascript">
+var PP_CONFIG = {
+ flashVersion: 9, // version of Flash to tell SoundManager to use - either 8 or 9. Flash 9 required for peak / spectrum data.
+ usePeakData: true // L/R peak data
+}
+</script>
+<script type="text/javascript" src="demo/mp3-player-button/script/mp3-player-button.js"></script>
+<script type="text/javascript" src="demo/page-player/script/page-player.js"></script>
+<script type="text/javascript" src="demo/play-mp3-links/script/inlineplayer.js"></script>
+<!-- 360 UI demo, canvas magic for IE -->
+<!--[if IE]><script type="text/javascript" src="demo/360-player/script/excanvas.js"></script><![endif]-->
+<!-- 360 UI demo, Apache-licensed animation library -->
+<script type="text/javascript" src="demo/360-player/script/berniecode-animator.js"></script>
+<script type="text/javascript" src="demo/360-player/script/360player.js"></script>
+
+<script type="text/javascript">
+// <![CDATA[
+
+ var isHome = true;
+ if (!window.location.href.toString().match(/sm2-usehtml5audio/i)) {
+ soundManager.useHTML5Audio = true; // w00t.
+ }
+ soundManager.useFlashBlock = true;
+ soundManager.bgColor = '#ffffff';
+ soundManager.debugMode = false;
+ soundManager.url = 'swf/';
+ soundManager.wmode = 'transparent'; // hide initial flash of white on everything except firefox/win32
+ if (navigator.platform.match(/win32/i) && navigator.userAgent.match(/firefox/i)) {
+ // extra-special homepage case (you should never see this), prevent out-of-view SWF load failure WITH high performance AND flashblock AND SWF in a placed element
+ soundManager.useHighPerformance = false;
+ }
+ soundManager.useFastPolling = true;
+
+ if (!navigator.userAgent.match(/msie 6/i)) {
+ threeSixtyPlayer.config.imageRoot = 'demo/360-player/';
+ }
+
+ function checkBadSafari() {
+ var _ua = navigator.userAgent;
+ if (!window.location.toString().match(/sm2\-ignorebadua/i) && _ua.match(/safari/i) && !_ua.match(/chrome/i) && _ua.match(/OS X 10_6_(3|4)/i)) { // Safari 4 and 5 occasionally fail to load/play HTML5 audio on Snow Leopard due to bug(s) in QuickTime X and/or other underlying frameworks. :/ Known Apple "radar" bug. https://bugs.webkit.org/show_bug.cgi?id=32159
+ var complaint = document.createElement('li');
+ complaint.innerHTML = '<b>Note</b>: HTML5 audio disabled for this browser/OS due to load/play failures in Safari 4 + 5 on Snow Leopard 10.6.3/4, caused by bugs in QuickTime X and/or underlying frameworks. See <a href="https://bugs.webkit.org/show_bug.cgi?id=32159#c9">bugs.webkit.org #32519</a>. (Safari on Leopard + Win32, and iPad OK, however.)<br>Try <a href="?sm2-ignorebadua">HTML5 anyway?</a> ("water drop" MP3 playback seems to fail most often.)';
+ _id('html5-audio-notes').appendChild(complaint);
+ }
+ }
+
+ soundManager.onready(function() {
+ if (soundManager.supported()) {
+ _id('sm2-support').style.display = 'none';
+ doChristmasLights();
+ // if using HTML5, show some additional format support info
+ // written while watching The Big Lebowski for the Nth time. Donny, you're out of your element!
+ var s = soundManager;
+ if (s.useHTML5Audio && s.hasHTML5) {
+ var li = document.createElement('li');
+ li.className = 'html5support';
+ var items = [];
+ var needsFlash = false;
+ for (item in s.audioFormats) {
+ if (s.audioFormats.hasOwnProperty(item)) {
+ needsFlash = (soundManager.filePattern.test('.'+item));
+ items.push('<span class="'+(s.html5[item]?'true':'false')+(!s.html5[item] && needsFlash?' partial':'')+'" title="'+(s.html5[item]?'Native HTML5 support found':'No HTML5 support found'+(needsFlash?', using Flash fallback':', no Flash support either'))+'">'+(s.html5[item]?'<':'')+item+(s.html5[item]?'>':'')+'</span>');
+ }
+ }
+ li.innerHTML = 'This browser\'s <em class="true"><HTML5></em> vs. <em class="partial">Flash</em> support (best guess):<b>'+items.join('')+'</b>'+(!soundManager._use_maybe?' (Try <a href="#sm2-useHTML5Maybe=1" onclick="window.location.href=this.href;window.location.reload()" title="Try using probably|maybe for HTML5 Audio().canPlayType(), more buggy but may get HTML5 support on Chrome/OS X and other browsers.">less-strict HTML5 checking</a>?)':' (allowing <b>maybe</b> for <code>canPlayType()</code>, less-strict HTML5 audio support tests)');
+ _id('html5-audio-notes').appendChild(li);
+ _id('without-html5').style.display = 'inline';
+ } else {
+ _id('without-html5').style.display = 'none';
+ }
+ checkBadSafari();
+ // check inline player / HTML 5 bits
+ var items = _id('muxtape-html5').getElementsByTagName('a');
+ for (var i=0, j=items.length; i<j; i++) {
+ if (!soundManager.canPlayLink(items[i])) {
+ items[i].className += ' not-supported';
+ items[i].title += ' \n\nNOTE: Format apparently not supported by this browser.';
+ }
+ }
+ } else {
+ checkBadSafari();
+ }
+ });
+
+ soundManager.onerror = function() {
+ // failed to load
+ var o = _id('sm2-support');
+ var smLoadFailWarning = '<div style="margin:0.5em;margin-top:-0.25em"><h3>Oh snap!</h3><p>'+(soundManager.hasHTML5?'The flash portion of ':'')+'SoundManager 2 was unable to start. '+(soundManager.useHTML5Audio?(soundManager.hasHTML5?'</p><p>Partial HTML5 Audio() is present, but flash is needed for MP3 and/or MP4 support.':'<br>(No HTML5 Audio() support found, either.)'):'')+'<br>All links to audio will degrade gracefully.</p><p id="flashblocker">If you have a flash blocker, try allowing the SWF to run - it should be visible above.</p><p id="flash-offline">'+(!soundManager._overHTTP?'<b>Viewing offline</b>? You may need to change a Flash security setting.':'Other possible causes: Missing .SWF, or no Flash?')+' Not to worry, as guided help is provided.</p><p><a href="doc/getstarted/index.html#troubleshooting" class="feature-hot">Troubleshooting</a></p></div>';
+ var hatesFlash = (navigator.userAgent.match(/(ipad|iphone)/i));
+ o.innerHTML = smLoadFailWarning;
+ if (hatesFlash || soundManager.getMoviePercent()) {
+ // movie loaded at least somewhat, so don't show flashblock things
+ _id('flashblocker').style.display = 'none';
+ if (hatesFlash) {
+ // none of that here.
+ _id('flash-offline').style.display = 'none';
+ }
+ }
+ o.style.marginBottom = '1.5em';
+ o.style.display = 'block';
+ }
+
+ // side note: If it's not december but you want to smash things, try #christmas=1 in the homepage URL.
+
+// ]]>
+</script>
+<script type="text/javascript" src="demo/index.js"></script>
+<script type="text/javascript">
+// <![CDATA[
+function doChristmasLights() {
+ if ((document.domain.match(/schillmania.com/i) && new Date().getMonth() == 11) || window.location.toString().match(/christmas/i)) {
+ loadScript('http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js',function(){
+ loadScript('../demo/christmas-lights/christmaslights-home.js',function(){
+ if (typeof smashInit != 'undefined') {
+ setTimeout(smashInit,20);
+ }
+ });
+ });
+ }
+}
+// ]]>
+</script>
+<style type="text/css">
+
+/* one small hack. */
+.ui360 a.sm2_link {
+ position:relative;
+}
+
+.ui360 {
+ /* Firefox 3 doesn't show links otherwise? */
+ width:100%;
+}
+
+body #sm2-container object,
+body #sm2-container embed {
+ /* otherwise, firefox on win32 barfs on homepage. */
+ left:0px;
+ top:0px;
+}
+
+</style>
+</head>
+
+<body class="home">
+
+<div id="content">
+
+ <div id="top">
+ <div id="lights"></div>
+
+ <h1>A JavaScript Sound API supporting MP3, MPEG4 and HTML5 Audio.</h1>
+
+ <div id="nav">
+ <div id="version"></div>
+ <ul>
+
+ <li>
+ <strong><a href="#home">Home</a></strong>
+ </li>
+
+ <li>
+ <a href="#">Demos</a>
+ <ul>
+ <li><a href="demo/api/">API Examples</a></li>
+ <li><a href="demo/play-mp3-links/">Playable MP3 links</a></li>
+ <li><a href="demo/mp3-player-button/" class="exclude">Basic MP3 Play Button</a></li>
+ <li><a href="demo/page-player/">Muxtape-style UI</a></li>
+ <li><a href="demo/360-player/">360° Player UI</a></li>
+ <li><a href="demo/mpc/">Drum Machine (MPC)</a></li>
+ <li><a href="demo/animation/">DOM/Animation Demos</a></li>
+ <li><a href="demo/flashblock/">FlashBlock Handling</a></li>
+ <li><a href="demo/template/">Basic Template</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="doc/getstarted/">Getting Started</a>
+ <ul>
+ <li><a href="doc/getstarted/#how-sm2-works">How SoundManager 2 works</a></li>
+ <li><a href="doc/getstarted/#basic-inclusion">Including SM2 on your site</a></li>
+ <li><a href="doc/getstarted/#troubleshooting">Troubleshooting</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="doc/">Documentation</a>
+ <ul>
+ <li><a href="doc/#sm-config">SoundManager Properties</a></li>
+ <li><a href="doc/#sound-object-properties">Sound Object Properties</a></li>
+ <li><a href="doc/#smdefaults">Global Sound Defaults</a></li>
+ <li><a href="doc/#api">SoundManager Core API</a></li>
+ <li><a href="doc/#smsoundmethods">Sound Object (SMSound) API</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="doc/download/">Download</a>
+ <ul>
+ <li><a href="doc/download/#latest">Get SoundManager 2</a></li>
+ <li><a href="doc/download/#revision-history">Revision History</a></li>
+ </ul>
+
+ </li>
+
+ <li>
+ <a href="doc/technotes/">Technical Notes</a>
+ <ul>
+ <li><a href="doc/technotes/#requirements">System Requirements</a></li>
+ <li><a href="doc/technotes/#debug-output">Debug + Console Output</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <a href="doc/resources/">Resources</a>
+ <ul>
+ <li><a href="doc/resources/#licensing">Licensing</a></li>
+ <li><a href="doc/resources/#related">Related Projects</a></li>
+ <li><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/">SM2 support / discussion</a></li>
+ <li><a href="http://www.schillmania.com/content/react/contact/">Contact Info @ Schillmania.com</a></li>
+ </ul>
+ </li>
+
+ </ul>
+ <div class="clear"></div>
+ </div>
+
+ </div>
+
+ <div id="main" class="triple">
+
+ <div id="live-demos" class="columnar">
+
+ <div class="c1">
+ <h2>What SoundManager 2 does</h2>
+ <p>Audio features, accessible from JavaScript.</p>
+ </div>
+
+ <div class="c2">
+
+ <h3>About SoundManager 2, Features and Live Demos</h3>
+
+ <div style="position:relative;padding-top:0.5em;padding-bottom:0.75em">
+
+ <img src="demo/_image/speaker.png" alt="speaker icon" style="float:left;display:inline;width:68px;height:68px;margin:1em 1em 0px 0px" />
+
+ <h2 class="special" style="margin-top:0.33em">SoundManager 2 makes it easier to play audio using JavaScript.</h2>
+
+ <p style="margin-top:0.5em">By wrapping and extending HTML5 and Flash Audio APIs, SoundManager 2 brings reliable cross-platform audio to JavaScript. <a href="doc/getstarted/#intro" class="cta" style="white-space:nowrap">How it works <span>»</span></a></p>
+
+ <div class="clear"> </div>
+
+ </div>
+
+ <div id="demo-box">
+ <div id="sm2-container"><!-- SM2 flash component goes here --></div>
+ <div id="sm2-support" class="demo-block"></div>
+ <p id="demo-header"><strong style="font-size:1.1em;font-weight:bold;white-space:nowrap">Inline JavaScript Sound API Examples</strong></p>
+ <div id="demos">
+ <h3 class="wedge" style="border-bottom:none;margin-top:0px">Basic MP3 Buttons<span class="l"></span><span class="r"></span><a href="demo/mp3-player-button/" title="Basic MP3 Play Button demo" class="cta-more">More »</a></h3>
+ <div class="demo-block">
+ <p style="margin-bottom:0.25em;margin-left:0.25em">
+ Change <a href="demo/_mp3/coins.mp3" title="Play "Change"" class="sm2_button exclude inline-exclude norewrite" style="padding:0px">coins.mp3</a>
+ <span style="color:#999">|</span>
+ Glass 1 <a href="demo/christmas-lights/sound/glass0.mp3" class="sm2_button exclude inline-exclude norewrite" title="Play "Glass break 1"" style="padding:0px">glass0.mp3</a>
+ <span style="color:#999">|</span> 2 <a href="demo/christmas-lights/sound/glass1.mp3" class="sm2_button exclude inline-exclude threesixty-exclude norewrite" title="Play "Glass break 2"" style="padding:0px">glass1.mp3</a>
+ <span style="color:#999">|</span> 3 <a href="demo/christmas-lights/sound/glass2.mp3" class="sm2_button exclude inline-exclude threesixty-exclude norewrite" title="Play "Glass break 3"" style="padding:0px">glass2.mp3</a>
+ </p>
+ </div>
+ <h3 class="wedge" style="border-bottom:none;margin-top:0px">Playable MP3 links<span class="l"></span><span class="r"></span><a href="demo/play-mp3-links/" title="Playable MP3 links demo" class="cta-more">More »</a></h3>
+ <div class="demo-block">
+ <ul class="graphic" style="padding:0.5em 0px 0.25em 0.25em">
+ <li><a href="demo/_mp3/fancy-beer-bottle-pop.mp3" title="Demo audio: Popping a corked beer bottle. Slightly distorted." class="exclude button-exclude norewrite">A corked beer bottle</a></li>
+ </ul>
+ </div>
+ <h3 class="wedge" style="border-bottom:none;margin-top:0px">360° Player UI<span class="l"></span><span class="r"></span><a href="demo/360-player/" title="360° Player UI demo" class="cta-more">More »</a></h3>
+ <div class="demo-block" style="overflow:hidden">
+ <div style="margin-bottom:16px;margin-left:8px;margin-top:-4px">
+ <div class="ui360" style="float:left;display:inline;margin-right:16px"><a href="demo/_mp3/mak.mp3" title="360 demo: Angry Cow Sound" class="norewrite exclude button-exclude inline-exclude">Random</a></div>
+ <div class="ui360" style="position:absolute;left:50%"><a href="http://freshly-ground.com/data/audio/sm2/water-drop.mp3" title="360 Demo: Water Drop" class="exclude button-exclude inline-exclude">Water Drop</a></div>
+ <div class="clear"></div>
+ </div>
+ </div>
+
+ <h3 class="wedge" style="border-bottom:none;margin-top:0px">Muxtape-style UI <span class="sidenote">(+HTML5 tests)</span><span class="l"></span><span class="r"></span><a href="demo/page-player/" title="Muxtape-style UI demo (+HTML5 audio tests)" class="cta-more">More »</a></h3>
+ <div class="demo-block">
+ <ul class="playlist" style="margin-top:0.5em">
+ <li><a href="http://freshly-ground.com/data/audio/mpc/20060826 - Armstrong.mp3" class="button-exclude inline-exclude threesixty-exclude">Armstrong Beat</a></li>
+ <li><a href="http://freshly-ground.com/data/audio/mpc/20090119 - Untitled Groove.mp3" class="button-exclude inline-exclude threesixty-exclude">Untitled Groove</a></li>
+ <li><a href="http://freshly-ground.com/data/audio/sm2/quail-64kbps-he-aac-from-itunes-renamed-from-mp4.aac" title="48 kbps MPEG4 High-Efficiency AAC test sound: BC Quail" class="button-exclude inline-exclude threesixty-exclude">BC Quail <span class="sidenote">(HE-AAC)</span></a></li>
+ </ul>
+ <h4 style="margin:0.25em 0px 0px 0px;padding:0.5em 0px 0.5em 0.75em;font-size:0.9em;letter-spacing:0.01em;border:1px solid #eee;border-left:none;border-right:none;font-weight:normal;color:#333;border-top:none">HTML5 Audio()-only tests</h4>
+ <ul id="muxtape-html5" class="playlist" style="margin-top:0.5em">
+ <li><a href="http://freshly-ground.com/data/audio/sm2/20060924%20-%20Ghosts%20&%20Goblins%20Reconstructed.ogg" title="OGG sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">Ghosts+Goblins Reconstructed <span class="sidenote">(OGG)</span></a></li>
+ <li><a href="http://freshly-ground.com/data/audio/sm2/bottle-pop.wav" title="WAV sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">A corked beer bottle <span class="sidenote">(WAV)</span></a></li>
+ </ul>
+ <p class="note" style="margin-top:3px;margin-bottom:0px;margin-left:0.8em">More: <a href="demo/api/" title="SoundManager 2 API examples">API</a> | <a href="demo/mpc/" title="SoundManager 2 MPC/Drum Machine demo">Drum Machine</a> | <a href="demo/animation/" title="SoundManager 2 DOM / Animation demos" class="exclude">Animation</a></p>
+
+ </div>
+
+ <div class="clear"> </div>
+
+ <div style="position:relative;clear:both;margin-top:1em;text-align:right">
+ <span id="without-html5" style="display:none"><a href="#sm2-usehtml5audio=0" onclick="document.location.href=this.href;document.location.reload()" title="View this page without HTML5 Audio support">-html5</a> | </span>
+ <a href="#debug=1" id="with-debug" title="View this page with debug output mode enabled (console.log() or HTML-based)" onclick="document.location.href=this.href;document.location.reload()">+debug</a>
+ <script type="text/javascript">if (document.location.href.match(/debug=1/i)) document.getElementById('with-debug').style.display = 'none';</script>
+ </div>
+
+ </div>
+
+ </div>
+
+ <h4 style="clear:left;margin-top:0.5em">HTML5 Audio Support <span style="color:#888">(Beta-ish)</span></h4>
+ <ul id="html5-audio-notes" class="standard">
+ <li>100% Flash-free MP3 + MP4/AAC where supported. Works on iPad, iPhone iOS 4</li>
+ <li>Fallback to Flash for MP3/MP4 support, as needed</li>
+ <li>SM2 API is unchanged, transparent; HTML5/Flash switching handled internally</li>
+ <li>HTML5 API support approximates Flash 8 API features, minus ID3, plus buffering</li>
+ <li>Some other formats (WAV/OGG) supported via HTML5, depending on browser</li>
+ <li>See <a href="doc/#soundmanager-usehtml5audio" title="soundManager.useHTML5Audio HTML5 Audio() support feature documentation">soundManager<wbr>.useHTML5Audio</a> for implementation details</li>
+ </ul>
+
+ <h4>Basic API Features (Flash 8)</h4>
+ <ul class="standard">
+ <li>Load, stop, play, pause, mute, seek, pan, volume control from JavaScript</li>
+ <li>Events: onload(), whileloading(), whileplaying(), onfinish() and more</li>
+ <li>ID3V1 and ID3V2 tag support for MP3s (title, artist, genre etc.)</li>
+ </ul>
+
+ <h4>Shiny Flash 9-only Features</h4>
+
+ <div style="float:right;display:inline;margin:0px;text-align:center;font-size:x-small;white-space:nowrap">
+ <a href="demo/360-player/canvas-visualization.html" title="JavaScript + Canvas MP3 visualization demo" style="border:none;margin:0px;padding:0px"><img id="demo-360" src="demo/_image/360ui-screenshot3.png" alt="" style="margin:0px;padding:0px;border:none" /></a>
+ <div><a href="demo/360-player/canvas-visualization.html" title="JavaScript + Canvas MP3 visualization demo">360° UI + waveform/spectrum</a></div>
+ <div class="note" style="margin-top:0px">Beta-ish, somewhat experimental demo</div>
+ <script type="text/javascript">document.getElementById('demo-360').src='demo/_image/360ui-screenshot'+(1+parseInt(Math.random()*4))+'.png';</script>
+ </div>
+
+ <ul class="standard">
+ <li>RTMP / Flash Media Server streaming support (experimental) - see <a href="doc/#smsound-serverurl" title="SMSound.serverURL parameter">serverURL</a> for details</li>
+ <li>MPEG-4 (AAC, HE-AAC, H.264) audio support</li>
+ <li>"MultiShot" play (layered/chorusing effects)</li>
+ <li>Waveform/frequency spectrum data</li>
+ <li>Peak (L/R channel volume) data</li>
+ <li>Audio buffering state/event handling</li>
+ </ul>
+
+ <h4>General Tech Stuff</h4>
+ <ul class="standard">
+ <li>Full <a href="doc/" title="SoundManager 2 documentation">API Documentation</a> with examples and notes</li>
+ <li>console.log()-style <a href="doc/technotes/#debug-output" title="SoundManager 2 debug output">debug output</a> and <a href="doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool">troubleshooting tools</a></li>
+ <li>Community-based <a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2" title="discussion/support for SoundManager 2 on Get Satisfaction">discussion/support</a></li>
+ </ul>
+
+ <h4>As Heard On <span class="scratched-out">TV</span> The Internets</h4>
+ <p class="tight compact">A few nifty places SoundManager 2 has been seen in use on the Wild World Web:</p>
+ <div class="inthewild">
+ <a href="http://muxtape.com/" title="Muxtape"><img src="demo/_image/muxtape-logo.png" alt="Muxtape logo" /></a>
+ <a id="soundcloud" href="http://thecloudplayer.com/" title="Soundcloud / The Cloud Player"><span>SoundCloud / The Cloud Player</span></a>
+ <a href="http://8tracks.com/" title="8tracks" style="background:#fff"><img src="demo/_image/8tracks-logo.png" alt="8tracks logo" /></a>
+ <a id="lastfm" href="http://www.last.fm/" title="last.fm"><span>last.fm</span></a>
+ <a id="opera" href="http://www.opera.com/" title="Opera Software ASA (Media Player component)"><span>Opera Software ASA</span></a>
+ <a id="discogs" href="http://www.discogs.com/" title="Discogs"><img src="demo/_image/discogs.gif" alt="Discogs logo" /></a>
+ <a id="mixcrate" href="http://www.mixcrate.com/" title="Mixcrate"><span>Mixcrate</span></a>
+ </div>
+
+ <h4>Download!</h4>
+ <p style="margin-top:1.5em"><a href="doc/download/" class="feature">Get SoundManager 2</a></p>
+
+ </div>
+
+ <div class="clear"> </div>
+
+ <div class="columnar">
+
+ <div class="c1">
+ <h2>Playing MP3s with JavaScript</h2>
+ <p>Play audio in one line, or get fancy with multiple options.</p>
+ </div>
+
+ <div class="c2">
+ <h3>How To Play Audio Using SoundManager 2</h3>
+ <p>Simple ID / URL method:</p>
+ <code>soundManager.play('<span>mySound</span>','<span>/path/to/an.mp3</span>');</code>
+ <p>And, setting the volume:</p>
+ <code>soundManager.setVolume('<span>mySound</span>',<span>50</span>);</code>
+ <p>More flexible method supporting option parameters as an object literal:</p>
+<pre class="block"><code>var mySound = soundManager.createSound({
+ id: '<span>someSound</span>',
+ url: '<span>/path/to/some.mp3</span>',
+ volume: <span>50</span>,
+ onload: <span>soundLoadedFunction</span>
+});
+mySound.play();</code></pre>
+ <p><a href="demo/api/">See API Demos</a></p>
+ </div>
+
+ </div>
+
+ <div class="columnar">
+
+ <div class="c1">
+ <h2>Using SM2 on your site</h2>
+ <p>How to include SoundManager 2 from HTML, and some basic event handlers.</p>
+ </div>
+
+ <div class="c2">
+ <p>Include the SoundManager 2 core script, tell it where to look for the flash .SWF and provide an onload() handler.</p>
+<pre class="block"><code><script type="text/javascript" src="<span>/path/to/soundmanager2.js</span>"></script>
+<script type="text/javascript">
+soundManager.url = '<span>/path/to/swfs/</span>';
+soundManager.onload = function() {
+ <span>// SM2 is ready to go!</span>
+ <span>// soundManager.createSound(...) calls can now be made, etc.</span>
+}
+</script></code></pre>
+
+ <p><a href="demo/template/">See a basic template demo</a></p>
+
+ </div>
+
+ </div>
+
+ <div id="licensing" class="columnar">
+
+ <div class="c1">
+ <h2>Licensing</h2>
+ <p>BSD licensed.</p>
+ </div>
+
+ <div class="c2">
+ <p>SoundManager 2 is provided under a <a href="license.txt" title="SoundManager 2 BSD license" class="norewrite">BSD license</a>.</p>
+ </div>
+
+ </div>
+
+ <!-- columnar -->
+ </div>
+
+ <div class="clear"></div>
+
+ <div id="col3" class="c3">
+
+ <div id="get-satisfaction" class="box">
+ <div id="gsfn_list_widget">
+ <h2><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/" title="User discussion, FAQs and support for SoundManager 2" rel="nofollow">Discussion / Support</a><span class="l"></span><span class="r"></span></h2>
+ <div id="gsfn_content"></div>
+ <div class="powered_by"><a href="http://getsatisfaction.com/">Get Satisfaction support network</a></div>
+ </div>
+ <!-- /.box -->
+
+ </div>
+
+
+ <!-- /main -->
+ </div>
+
+ <!-- /content -->
+ </div>
+
+ <div id="control-template">
+ <!-- control markup inserted dynamically after each link -->
+ <div class="controls">
+ <div class="statusbar">
+ <div class="loading"></div>
+ <div class="position"></div>
+ </div>
+ </div>
+ <div class="timing">
+ <div id="sm2_timing" class="timing-data">
+ <span class="sm2_position">%s1</span> / <span class="sm2_total">%s2</span></div>
+ </div>
+ <div class="peak">
+ <div class="peak-box"><span class="l"></span><span class="r"></span>
+ </div>
+ </div>
+ </div>
+
+ <div id="spectrum-container" class="spectrum-container">
+ <div class="spectrum-box">
+ <div class="spectrum"></div>
+ </div>
+ </div>
+
+<script type="text/javascript">
+init();
+</script>
+
+</div>
+
+</body>
+
+</html>
|