209 lines
8.6 KiB
HTML
209 lines
8.6 KiB
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>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
|
<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 (see builds for optimized versions) -->
|
||
|
|
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
|
||
|
|
|
||
|
|
<!-- configure SM2 for your use -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
soundManager.setup({
|
||
|
|
|
||
|
|
// location: path to SWF files, as needed (SWF file name is appended later.)
|
||
|
|
|
||
|
|
url: '../../swf/',
|
||
|
|
|
||
|
|
// optional: version of SM2 flash audio API to use (8 or 9; default is 8 if omitted, OK for most use cases.)
|
||
|
|
// flashVersion: 9,
|
||
|
|
|
||
|
|
// use soundmanager2-nodebug-jsmin.js, or disable debug mode (enabled by default) after development/testing
|
||
|
|
// debugMode: false,
|
||
|
|
|
||
|
|
// good to go: the onready() callback
|
||
|
|
|
||
|
|
onready: function() {
|
||
|
|
|
||
|
|
// SM2 has started - now you can create and play sounds!
|
||
|
|
|
||
|
|
var mySound = soundManager.createSound({
|
||
|
|
id: 'aSound',
|
||
|
|
url: '../_mp3/click-high.mp3'
|
||
|
|
// onload: function() { console.log('sound loaded!', this); }
|
||
|
|
// other options here..
|
||
|
|
});
|
||
|
|
|
||
|
|
mySound.play();
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
// optional: ontimeout() callback for handling start-up failure, flash required but blocked, etc.
|
||
|
|
|
||
|
|
ontimeout: function() {
|
||
|
|
|
||
|
|
// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
|
||
|
|
// See the flashblock demo when you want to start getting fancy.
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- SM2 BAREBONES TEMPLATE: END -->
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
// helper function for this page only, demo purposes
|
||
|
|
function checkDomain() {
|
||
|
|
if (!document.domain && !this.href.match(/index/i)) {
|
||
|
|
this.href=this.href+'index.html';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="height:100%">
|
||
|
|
|
||
|
|
<div style="max-width:75em">
|
||
|
|
|
||
|
|
<h1>SoundManager 2 Template Example</h1>
|
||
|
|
<p>This page covers the basics of adding SoundManager 2 to your project.</p>
|
||
|
|
|
||
|
|
<h2>How it works</h2>
|
||
|
|
<p>The minimal code needed to get SoundManager 2 going is below, with <em><em>configurable parts highlighted</em></em>. You can copy/paste it to get started. This page is also running the template code; If available, look at your JavaScript console for debug output from SM2.</p>
|
||
|
|
|
||
|
|
<h2>Dependencies</h2>
|
||
|
|
|
||
|
|
<p>You'll need to copy the files inside the <b>script/</b> and <b>swf/</b> subdirectories included with the SoundManager 2 package into your project.</p>
|
||
|
|
|
||
|
|
<ul class="file-structure">
|
||
|
|
<li>
|
||
|
|
soundmanager2/
|
||
|
|
<ul>
|
||
|
|
<li class="core">
|
||
|
|
script/ <span>- API core, soundmanager2.js</span>
|
||
|
|
</li>
|
||
|
|
<li class="core">
|
||
|
|
swf/ <span>- API core, SoundManager 2 .SWF files</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
|
||
|
|
<p>At the bare minimum, you will need <b>soundmanager2.js</b>, <b>soundmanager2.swf</b> and <b>soundmanager2_debug.swf</b> for the default flash 8-based configuration. (Optionally, SM2 can use a Flash 9-based audio API which has MP4 support, data visualization and a few other features.)</p>
|
||
|
|
|
||
|
|
<h2 id="minimal">Template Code: Basic Version</h2>
|
||
|
|
|
||
|
|
<p>This is a compact version of the template you can copy/paste to get started. For new users, see the <a href="#commented-template">commented version</a>.</p>
|
||
|
|
|
||
|
|
<pre class="block"><code><script src="<em><em>/path/to/soundmanager2.js</em></em>"></script>
|
||
|
|
<script>
|
||
|
|
soundManager.setup({
|
||
|
|
url: '<em><em>/path/to/swf-files/</em></em>',
|
||
|
|
onready: function() {
|
||
|
|
var mySound = soundManager.createSound({
|
||
|
|
id: '<em><em>aSound</em></em>',
|
||
|
|
url: '<em><em>/path/to/an.mp3</em></em>'
|
||
|
|
});
|
||
|
|
mySound.play();
|
||
|
|
},
|
||
|
|
ontimeout: function() {
|
||
|
|
<span><span>// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?</span></span>
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script></code></pre>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<h2 id="commented-template">Template Code: Commented Version</h2>
|
||
|
|
|
||
|
|
<pre class="block"><code><span><span><!-- include SM2 library (see <a href="../../doc/getstarted/#basic-inclusion" title="SoundManager 2: Script build versions" onclick="checkDomain()">builds</a> for optimized versions) --></span></span>
|
||
|
|
<script type="text/javascript" src="<em><em>/path/to/soundmanager2.js</em></em>"></script>
|
||
|
|
|
||
|
|
<span><span><!-- configure SM2 for your use --></span></span>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
soundManager.setup({
|
||
|
|
|
||
|
|
<span><span>// location: path to SWF files, as needed (SWF file name is appended later.)</span></span>
|
||
|
|
|
||
|
|
url: '<em><em>/path/to/swf-files/</em></em>',
|
||
|
|
|
||
|
|
<span><span>// optional: version of SM2 flash audio API to use (8 or 9; default is 8 if omitted, OK for most use cases.)
|
||
|
|
// flashVersion: <em><em>9</em></em>,
|
||
|
|
|
||
|
|
// use soundmanager2-nodebug-jsmin.js, <i>or</i> disable debug mode (enabled by default) after development/testing
|
||
|
|
// debugMode: <em><em>false</em></em>,
|
||
|
|
|
||
|
|
// good to go: the onready() callback</span></span>
|
||
|
|
|
||
|
|
onready: function() {
|
||
|
|
|
||
|
|
<span><span>// SM2 has started - now you can create and play sounds!</span></span>
|
||
|
|
|
||
|
|
var mySound = soundManager.createSound({
|
||
|
|
id: '<em><em>aSound</em></em>',
|
||
|
|
url: '<em><em>/path/to/an.mp3</em></em>'
|
||
|
|
<span><span>// onload: function() { console.log('sound loaded!', this); }
|
||
|
|
// <a href="../../doc/#smdefaults" onclick="checkDomain()">other options</a> here..</span></span>
|
||
|
|
});
|
||
|
|
|
||
|
|
mySound.play();
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
<span><span>// optional: ontimeout() callback for handling start-up failure</span></span>
|
||
|
|
|
||
|
|
ontimeout: function() {
|
||
|
|
|
||
|
|
<span><span>// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
|
||
|
|
// See the <a href="../flashblock/" title="SoundManager 2 flashblock handling demo" onclick="checkDomain()">flashblock demo</a> when you want to start getting fancy.</span></span>
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script></code></pre>
|
||
|
|
|
||
|
|
<h2 id="onready-ontimeout">Options: <code>soundManager.onready()</code> + <code>soundManager.ontimeout()</code></h2>
|
||
|
|
|
||
|
|
<p>If you would like to keep things separate, you can register callback handlers by calling <code><a href="../../doc/#soundmanager-onready" onclick="checkDomain()">soundManager.onready()</a></code> and <code><a href="../../doc/#soundmanager-ontimeout" onclick="checkDomain()">soundManager.ontimeout()</a></code> independently.</p>
|
||
|
|
|
||
|
|
<h2 id="html5-notes">HTML5 Support Notes</h2>
|
||
|
|
<p>Read up on <a href="../../doc/#soundmanager-usehtml5audio" onclick="checkDomain()">HTML5 audio support</a>, if you're feeling adventurous. iPad/iPhone and devices without flash installed will always attempt to use it.</p>
|
||
|
|
|
||
|
|
|
||
|
|
<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, see the <a href="../flashblock/" title="SoundManager 2 with Flash block handling" onclick="checkDomain()">Flashblock</a> example.</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>
|