<!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 Template</title> <style type="text/css"> #soundmanager-debug { /* SM2 debug container (optional, use or customize this as you like - makes in-browser debug output more useable) */ position:fixed;_position:absolute;right:1em;bottom:1em;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:monaco,"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90); } </style> <!-- some CSS for this demo page, not required for SM2 --> <link rel="stylesheet" href="template.css" /> <!-- SM2 BAREBONES TEMPLATE: START --> <!-- include SM2 library --> <script type="text/javascript" src="../../script/soundmanager2.js"></script> <!-- And now, customize it! --> <script type="text/javascript"> soundManager.setup({ // debugMode: false, // disable debug output url: '../../swf/', // path to directory containing SoundManager2 .SWF file flashVersion: 8, useFlashBlock: false, // skip for now. See the flashblock demo when you want to start getting fancy. onready: function() { // soundManager.createSound() etc. may now be called soundManager._writeDebug('soundManager.onready() - your code executes here'); } }); </script> <!-- SM2 BAREBONES TEMPLATE: END --> </head> <body style="height:100%"> <div style="margin-right:43em"> <h1>SoundManager 2 Template Example</h1> <p>This is a basic template for adding SoundManager to your page.</p> <h2>How it works</h2> <p>This page includes the SM2 script, which starts up on its own as appropriate. By default it will try to start as soon as possible.</p> <p>The minimal code needed to get SoundManager 2 going is below, with <em><em>configurable parts</em></em>:</p> <code> <pre> <span><!-- include SM2 library --></span> <script type="text/javascript" src="<em><em>/path/to/soundmanager2.js</em></em>"></script> <span><!-- configure it for your use --></span> <script type="text/javascript"> soundManager.setup({ url: '<em><em>/path/to/sm2-flash-files/</em></em>', <span>// directory where SM2 .SWFs live</span> <span>/* * Note that SoundManager will determine and append the appropriate .SWF file to the URL, * eg. /path/to/sm2-flash-files/soundmanager2.swf automatically. * You should not put soundmanager2.swf in there yourself. */</span> <span>// Beta-ish HTML5 audio support (force-enabled for iPad), flash-free sound for Safari + Chrome. Enable if you want to try it!</span> <span>// useHTML5Audio: true,</span> <span>// do this to skip flash block handling for now. See the <a href="../flashblock/" title="SoundManager 2 flashblock handling demo" onclick="if (!document.domain && !this.href.match(/index/i)) this.href=this.href+'index.html'">flashblock demo</a> when you want to start getting fancy.</span> useFlashBlock: false, <span>// disable debug mode after development/testing..</span> <span>// debugMode: false</span> }); <span style="background:#eee;padding:0.25em">// Option 1: Simple onready() + createSound() method</span> soundManager.onready(function() { <span>// SM2 has loaded - now you can create and play sounds!</span> <em><em>soundManager.createSound('helloWorld','/path/to/hello-world.mp3'); soundManager.play('helloWorld');</em></em> }); <span style="background:#eee;padding:0.25em">// Option 2 (better): More flexible onready() + createSound() method</span> soundManager.onready(function() {<em><em> var mySound = soundManager.createSound({ id: 'aSound', url: '/path/to/an.mp3' <span>// onload: <span>[ event handler function object ],</span></span> <span>// other options here..</span> }); mySound.play(); </em></em>}); <span style="background:#eee;padding:0.25em">// Option 3 (best): onready() + createSound() / ontimeout() methods for success/failure:</span> soundManager.onready(function() {<em><em> <span>// SM2 has loaded - now you can create and play sounds!</span> var mySound = soundManager.createSound({ id: 'aSound', url: '/path/to/an.mp3' <span>// onload: <span>[ event handler function object ],</span></span> <span>// other options here..</span> }); mySound.play(); </em></em>}); soundManager.ontimeout(function() {<em><em> <span>// (Optional) Hrmm, SM2 could not start. Show an error, etc.?</span> </em></em>}); </script></pre></code> <h2 id="flashblock-handling">Handling flash blockers</h2> <p>It's good to let users see the flash component of SM2, so those with flash blockers can unblock it and allow SM2 to start. For more info on this, see the <a href="../flashblock/" title="SoundManager 2 with Flash block handling" onclick="if (!document.domain && !this.href.match(/index/i)) this.href=this.href+'index.html'">Flashblock</a> example.</p> <h2>Making SM2 wait for <code>window.onload()</code></h2> <p>If you prefer to have the library wait for <code>window.onload()</code> before making <code>onready()</code> / <code>ontimeout()</code> callbacks, you can specify <code>waitForWindowLoad: true</code>.</p> <h2 style="margin-top:1em">Disabling debug output</h2> <p>SoundManager 2 will write debug output via <code>console.log()</code> if available, by default. To disable it, simply specify <code>debugMode: false</code>.</p> <p>You can also write HTML-based debug output to the DOM via <code>consoleOnly: false</code> and/or <code>useConsole: false</code>.</p> <p>To see related configuration code, refer to the source of this page which basically does all of the above "for real."</p> <h2>Troubleshooting ("failed to start": Viewing offline, missing SWF, flash blockers etc.)</h2> <p>If SM2 is failing to start and throwing errors due to flash security, timeouts or other issues, check out the <a href="../../doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool" onclick="checkDomain()">troubleshooting tool</a> for tips.</p> <h2>No-debug, compressed version of soundmanager2.js</h2> <p>Once development is finished, you can also use the "minified" (down to ~8% of original size with gzip!) version of SM2, which has debug output and comments removed for you: <a href="../../script/soundmanager2-nodebug-jsmin.js">soundmanager2-nodebug-jsmin.js</a>. Serve with gzip compression wherever possible for best bandwidth savings.</p> </div> </body> </html>