diff options
Diffstat (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/template')
5 files changed, 488 insertions, 0 deletions
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/template/deferred-example.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/deferred-example.html new file mode 100755 index 0000000..2f33a55 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/deferred-example.html @@ -0,0 +1,127 @@ +<!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: Deferred loading / Lazy-loading / Dynamic script loading Example</title>
+<meta name="description" content="How to load soundmanager2.js on-the-fly using JavaScript, and start it dynamically after window.load() has already fired using beginDelayedInit()." />
+<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 -->
+
+<script type="text/javascript">
+
+function loadScript(sURL,onLoad) {
+ try {
+ var loadScriptHandler = function() {
+ var rs = this.readyState;
+ if (rs == 'loaded' || rs == 'complete') {
+ this.onreadystatechange = null;
+ this.onload = null;
+ if (onLoad) {
+ onLoad();
+ }
+ }
+ }
+ function scriptOnload() {
+ this.onreadystatechange = null;
+ this.onload = null;
+ window.setTimeout(onLoad,20);
+ }
+ var oS = document.createElement('script');
+ oS.type = 'text/javascript';
+ if (onLoad) {
+ oS.onreadystatechange = loadScriptHandler;
+ oS.onload = scriptOnload;
+ }
+ oS.src = sURL;
+ document.getElementsByTagName('head')[0].appendChild(oS);
+ } catch(e) {
+ // oh well
+ }
+}
+
+function msg(s) {
+ document.getElementById('sm2-status').innerHTML = s;
+}
+
+window.onload = function() {
+ msg('Window loaded, waiting 1 second...');
+ setTimeout(function(){
+ msg('Loading soundmanager2.js...');
+ loadScript('../../script/soundmanager2.js',function(){
+ // SM2 script has loaded
+ soundManager.url = '../../swf/';
+ soundManager.onready(function() {
+ if (soundManager.supported()) {
+ soundManager.createSound({
+ id:'foo',
+ url:'../_mp3/mouseover.mp3'
+ }).play();
+ }
+ msg(soundManager.supported()?'started OK':'Loaded OK, but unable to start: unsupported/flash blocked, etc.');
+ });
+ soundManager.beginDelayedInit(); // ensure start-up in case document.readyState and/or DOMContentLoaded are unavailable
+ });
+ },1000);
+}
+
+</script>
+</head>
+
+<body style="height:100%">
+
+<div style="margin-right:43em">
+ <h1>SoundManager 2: Lazy Loading Example</h1>
+ <p>This is an example of dynamically loading SoundManager 2 using JS, after window.onload() has fired.</p>
+ <h2>How it works</h2>
+ <p>This page waits until window.onload(), delays 1 second and loads soundmanager2.js, which should then start up.</p>
+
+<p>SoundManager 2 status: <b id="sm2-status">Waiting for window.onload()...</b></p>
+
+<pre>window.onload = function() {
+ <span>// Window loaded, waiting 1 second...</span>
+ setTimeout(function() {
+ <span>// Loading soundmanager2.js...</span>
+ loadScript('../../script/soundmanager2.js',function() {
+ <span>// SM2 script has loaded</span>
+ soundManager.url = '../../swf/';
+ soundManager.onready(function() {
+ if (soundManager.supported()) {
+ soundManager.createSound({
+ id:'foo',
+ url:'../_mp3/mouseover.mp3'
+ }).play();
+ }
+ <span>// msg(soundManager.supported()?'started OK':'Loaded OK, but unable to start: unsupported/flash blocked, etc.');</span>
+ });
+ soundManager.beginDelayedInit(); <span>// ensure start-up in case document.readyState and/or DOMContentLoaded are unavailable</span>
+ });
+ },1000);
+}</pre>
+
+ <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" (60% smaller) version of SM2, which has debug output and comments removed for you: <a href="../../script/soundmanager2-nodebug-jsmin.js">soundmanager2-nodebug-jsmin.js</a>. If you can, serve this with gzip compression for even greater bandwidth savings!</p>
+
+</div>
+
+</body>
+</html>
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/template/html5-dtd-test.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/html5-dtd-test.html new file mode 100755 index 0000000..4d1b102 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/html5-dtd-test.html @@ -0,0 +1,77 @@ +<!DOCTYPE html>
+<html>
+<head>
+<title>SoundManager 2: HTML 5 DTD test</title>
+<meta name="description" content="A test page using SoundManager 2 under an HTML 5 DOCTYPE." />
+<script>
+
+// -- Movie size/positioning test case, Firefox/Win32 --
+
+// SM2 normally works at 6x6px SWF size, position:fixed bottom/left:0px.
+// Was failing with this case using HTML 5 doctype? ..
+// Started working when 8x8px SWF size was used.
+
+// Previous notes, courtesy Jacob Seidelin ...
+
+// This fails to load in Firefox 3.6 (Win7) but will load after one of the following changes:
+// 1. Remove the doctype or set it to eg.
+// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+// 2. Set soundManager.useHighPerformance = false
+// 3. Set soundManager.debugFlash = true
+
+function loadScript(sURL,onLoad) {
+ try {
+ var loadScriptHandler = function() {
+ var rs = this.readyState;
+ if (rs == 'loaded' || rs == 'complete') {
+ this.onreadystatechange = null;
+ this.onload = null;
+ if (onLoad) {
+ onLoad();
+ }
+ }
+ }
+ function scriptOnload() {
+ this.onreadystatechange = null;
+ this.onload = null;
+ window.setTimeout(onLoad,20);
+ }
+ var oS = document.createElement('script');
+ oS.type = 'text/javascript';
+ if (onLoad) {
+ oS.onreadystatechange = loadScriptHandler;
+ oS.onload = scriptOnload;
+ }
+ oS.src = sURL;
+ document.getElementsByTagName('head')[0].appendChild(oS);
+ } catch(e) {
+ // oh well
+ }
+}
+
+window.onload = function() {
+ loadScript('../../script/soundmanager2.js', function() {
+ soundManager.flashVersion = 9;
+ soundManager.flash9Options.useEQData = true;
+ soundManager.flash9Options.useWaveformData = true;
+ soundManager.allowPolling = true;
+ soundManager.url = '../../swf/'; // path to directory containing SoundManager2 .SWF file
+ soundManager.onload = function() {
+ alert('Loaded!');
+ };
+ soundManager.debugMode = true;
+ soundManager.useHighPerformance = true;
+ soundManager.debugFlash = false;
+ soundManager.beginDelayedInit(); // ensure things start, in case document.readyState / domReady are missed (eg. Firefox 3.5.5/win32 with HTML5 DTD, no document.readyState??)
+ });
+}
+
+</script>
+
+</head>
+
+<body>
+
+</body>
+</html>
+
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/template/index.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/index.html new file mode 100755 index 0000000..214342c --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/index.html @@ -0,0 +1,131 @@ +<!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><!-- 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() {
+ <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() methods, handle load/failure together:</span>
+
+soundManager.onready(function() {
+ <span>// check if SM2 successfully loaded..</span>
+ <em><em>if (soundManager.supported()) {</em></em>
+ <span>// SM2 has loaded - now you can create and play sounds!</span>
+ <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();
+ } else {
+ <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=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>
+
+</div>
+
+</body>
+</html>
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/template/template.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/template.css new file mode 100755 index 0000000..448853e --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/template.css @@ -0,0 +1,67 @@ +/*
+
+ DEMO ONLY, just to make the demo page pretty.
+
+ You don't need this stuff for SM2 to work. :)
+
+*/
+
+body {
+ font-size:75%;
+}
+
+code, pre {
+ font-family:"lucida console",monaco,courier,terminal,system;
+ font-size:100%;
+ color:#2233cc;
+}
+
+em em {
+ font-weight:normal;
+ font-style:normal;
+ color:#339933;
+}
+
+h1,
+h2.special {
+ letter-spacing:-1px;
+}
+
+h1, h2, h3, h4 {
+ font-family:"helvetica neue",helvetica,verdana,arial,tahoma,"sans serif";
+ font-size:1em;
+ margin:0px;
+ padding:0px;
+ vertical-align:middle;
+}
+
+h1 {
+ font-size:2em;
+}
+
+h2 {
+ font-family:helvetica,arial,verdana,tahoma,"sans serif";
+ font-size:1.5em;
+}
+
+h3 {
+ font-size:1.17em;
+ border-bottom:1px solid #ccc;
+ padding-bottom:0.25em;
+ margin-top:1.5em;
+}
+
+h4 {
+ margin:1.5em 0px 0.5em 0px;
+ font-size:1.1em;
+}
+
+
+p {
+ font:normal 1em verdana,tahoma,arial,"sans serif";
+}
+
+code span,
+pre span {
+ color:#666;
+}
\ No newline at end of file diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/template/xhtml-test.xhtml b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/xhtml-test.xhtml new file mode 100755 index 0000000..a77db8f --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/template/xhtml-test.xhtml @@ -0,0 +1,86 @@ +<!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.onload = function() {
+ // soundManager.createSound() etc. may now be called
+ soundManager._writeDebug('soundManager.onload() - your code executes here');
+}
+
+</script>
+
+<!-- SM2 BAREBONES TEMPLATE: END -->
+
+
+
+</head>
+
+<body>
+<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.url = '<em><em>/path/to/sm2-flash-movies/</em></em>'; <span>// directory where SM2 .SWFs live</span>
+
+<span>// Note that SounndManager will determine and append the appropriate .SWF file to the URL.</span>
+
+<span>// disable debug mode after development/testing..
+// soundManager.debugMode = false;</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>
+}
+
+</script></pre></code>
+
+ <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>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>No-debug, compressed version of soundmanager2.js</h2>
+ <p>Once development is finished, you can also use the "minified" (60% smaller) version of SM2, which has debug output and comments removed for you: <a href="../../script/soundmanager2-nodebug-jsmin.js">soundmanager2-nodebug-jsmin.js</a>. If you can, serve this with gzip compression for even greater bandwidth savings!</p>
+
+</div>
+
+</body>
+</html>
|