wyrian/js/libs/soundmanager/demo/template/index.html

<!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.debugMode = false; // disable debug output
soundManager.url = '../../swf/'; // path to directory containing SoundManager2 .SWF file
soundManager.flashVersion = 8;
soundManager.useFlashBlock = false; // skip for now. See the flashblock demo when you want to start getting fancy.

soundManager.onload = function() {
  // soundManager.createSound() etc. may now be called
  soundManager._writeDebug('soundManager.onload() - 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>&lt;!-- include SM2 library --&gt;</span>
&lt;script type="text/javascript" src="<em><em>/path/to/soundmanager2.js</em></em>"&gt;&lt;/script&gt;

<span>&lt;!-- configure it for your use --&gt;</span>
&lt;script type="text/javascript"&gt;

soundManager.url = '<em><em>/path/to/sm2-flash-movies/</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-movies/soundmanager2.swf automatically.</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>// soundManager.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=this.href+'index.html'">flashblock demo</a> when you want to start getting fancy.</span>
soundManager.useFlashBlock = false;

<span>// disable debug mode after development/testing..</span>
<span>// soundManager.debugMode = false;</span>

<span style="background:#eee;padding:0.25em">// Option 1: Simple onload() + createSound() method</span>

soundManager.onload = 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 onload() + createSound() method</span>

soundManager.onload = function() {

  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() {

  <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();

});

soundManager.ontimeout(function() {

  <span>// (Optional) Hrmm, SM2 could not start. Show an error, etc.?</span>

});


&lt;/script&gt;</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=this.href+'index.html'">Flashblock</a> example.</p>

 <h2>Making SM2 wait for window.onload()</h2>
 <p>If you prefer to have the library wait for window.onload() before calling soundManager.onload()/onerror() methods, you can modify SM2's "waitForWindowLoad" property:</p>
<code>soundManager.waitForWindowLoad = true;</code>
 <h2 style="margin-top:1em">Disabling debug output</h2>
 <p>SoundManager 2 will write to a debug &lt;div&gt; element or a javascript console if available, by default. To disable it, simply set the relevant property to false:</p>
<code>soundManager.debugMode = false;</code>
 <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</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="if (!document.domain) this.href=this.href.replace(/\#/,'index.html#')">troubleshooting tool</a> which can help you fix things.</p>
 <h2>No-debug, compressed version of soundmanager2.js</h2>
 <p>Once development is finished, you can also use the "minified" (down to 10% 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>
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp 2011-02-13 12:28:40 +00:00			`<!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.debugMode = false; // disable debug output`
			`soundManager.url = '../../swf/'; // path to directory containing SoundManager2 .SWF file`
			`soundManager.flashVersion = 8;`
			`soundManager.useFlashBlock = false; // skip for now. See the flashblock demo when you want to start getting fancy.`

			`soundManager.onload = function() {`
			`// soundManager.createSound() etc. may now be called`
			`soundManager._writeDebug('soundManager.onload() - 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>`
Remove whitespace [Gun.io WhitespaceBot] 2011-12-19 20:46:06 +00:00			`<p>This is a basic template for adding SoundManager to your page.</p>`
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp 2011-02-13 12:28:40 +00:00			`<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.url = '<em><em>/path/to/sm2-flash-movies/</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-movies/soundmanager2.swf automatically.</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>// soundManager.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=this.href+'index.html'">flashblock demo</a> when you want to start getting fancy.</span>`
			`soundManager.useFlashBlock = false;`

			`<span>// disable debug mode after development/testing..</span>`
			`<span>// soundManager.debugMode = false;</span>`

			`<span style="background:#eee;padding:0.25em">// Option 1: Simple onload() + createSound() method</span>`

			`soundManager.onload = 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 onload() + createSound() method</span>`

			`soundManager.onload = function() {`

			`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() {`

			`<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();`

			`});`

			`soundManager.ontimeout(function() {`

			`<span>// (Optional) Hrmm, SM2 could not start. Show an error, etc.?</span>`

			`});`


			`</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=this.href+'index.html'">Flashblock</a> example.</p>`

			`<h2>Making SM2 wait for window.onload()</h2>`
			`<p>If you prefer to have the library wait for window.onload() before calling soundManager.onload()/onerror() methods, you can modify SM2's "waitForWindowLoad" property:</p>`
			`<code>soundManager.waitForWindowLoad = true;</code>`
			`<h2 style="margin-top:1em">Disabling debug output</h2>`
			`<p>SoundManager 2 will write to a debug <div> element or a javascript console if available, by default. To disable it, simply set the relevant property to false:</p>`
			`<code>soundManager.debugMode = false;</code>`
			`<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</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="if (!document.domain) this.href=this.href.replace(/\#/,'index.html#')">troubleshooting tool</a> which can help you fix things.</p>`
			`<h2>No-debug, compressed version of soundmanager2.js</h2>`
			`<p>Once development is finished, you can also use the "minified" (down to 10% 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>`
Remove whitespace [Gun.io WhitespaceBot] 2011-12-19 20:46:06 +00:00
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp 2011-02-13 12:28:40 +00:00			`</div>`

			`</body>`
			`</html>`