glenux/wyrian
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
wyrian/js/libs/soundmanager/doc/getstarted/index.html
Gun.io Whitespace Robot 2b2bf47f55 Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 15:46:06 -05:00

552 lines
29 KiB
HTML
Raw Blame History

<!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 Tutorial: Getting Started</title>
<meta name="robots" content="noindex" />
<meta name="description" content="SoundManager 2 tutorial, example code, how to get started guide including and configuring SoundManager 2 for playing MP3 audio via Javascript." />
<meta name="keywords" content="soundmanager2 tutorial, javascript sound, javascript audio, javascript play mp3, javascript sound control, mp3, mp4, mpeg4" />
<meta name="robots" content="all" />
<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" />
<link rel="stylesheet" type="text/css" media="screen" href="../../demo/index.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../troubleshoot/debug.css" />
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript" src="../../demo/index.js"></script>
<script type="text/javascript">
soundManager.useFlashBlock = true;
soundManager.debugMode = true;
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '../../swf/';
soundManager.onload = function() {
}
</script>
<script type="text/javascript" src="../../troubleshoot/debug.js"></script>
</head>
<body>
<div id="content">
<div id="top">
<h1>SoundManager 2: Getting Started</h1>
<div id="nav">
<ul>
<li>
<a href="../../">Home</a>
</li>
<li>
<a href="#">Demos</a>
<ul>
<li><a href="../../demo/api/">API Examples</a></li>
<li><a href="../../demo/play-mp3-links/" class="exclude">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&deg; 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>
<strong><a href="../getstarted/">Getting Started</a></strong>
<ul>
<li><a href="../getstarted/#how-sm2-works">How SoundManager 2 works</a></li>
<li><a href="../getstarted/#basic-inclusion">Including SM2 on your site</a></li>
<li><a href="../getstarted/#troubleshooting">Troubleshooting</a></li>
</ul>
</li>
<li>
<a href="..">Documentation</a>
<ul>
<li><a href="../#sm-config">SoundManager Properties</a></li>
<li><a href="../#sound-object-properties">Sound Object Properties</a></li>
<li><a href="../#smdefaults">Global Sound Defaults</a></li>
<li><a href="../#api">SoundManager Core API</a></li>
<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
</ul>
</li>
<li>
<a href="../download/">Download</a>
<ul>
<li><a href="../download/#latest">Get SoundManager 2</a></li>
<li><a href="../download/#revision-history">Revision History</a></li>
</ul>
</li>
<li>
<a href="../technotes/">Technical Notes</a>
<ul>
<li><a href="../technotes/#requirements">System Requirements</a></li>
<li><a href="../technotes/#debug-output">Debug + Console Output</a></li>
</ul>
</li>
<li>
<a href="../resources/">Resources</a>
<ul>
<li><a href="../resources/#licensing">Licensing</a></li>
<li><a href="../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 class="columnar">
<div class="c1">
<h2>How SoundManager Works</h2>
<p>It starts out easy, but you can go down the rabbit hole if you want.</p>
</div>
<div class="c2">
<div class="f-block">
<!--
<p style="margin-top:1px"><strong><strong>SoundManager 2 makes it easier to play MP3 audio cross browser / platform, using Javascript.</strong></strong></p>
-->
<h3>SoundManager 2 Tutorial: What, Why, How</h3>
<p><strong>Problem:</strong> Browsers lack good, consistent native audio support. (HTML 5's <code>Audio()</code> is the future, but does not have majority support yet.)</p>
<p><strong>Solution:</strong> Javascript API via Flash + ExternalInterface, works almost everywhere. If HTML5 audio support is enabled, flash fallback used for browsers that don't support "non-free" MP3 + MP4 formats.</p>
<p>SoundManager 2 wraps and extends both the Flash and HTML Audio Sound APIs, providing a single, unified sound API to Javascript; the API is the same, whether HTML or Flash is ultimately used to play sound. (The flash portion is hidden, transparent to both developers and end users.)</p>
</div>
<div class="f-block c-basic-use">
<h4 id="basic-inclusion">Including SoundManager</h4>
<p>The soundmanager2.js core can get down to 10 KB over the wire, depending on what version you use. A few versions of the SM2 script are available, balancing code size between commented, debug-enabled and production-optimized builds.</p>
<p>Regardless of which build you use, take advantage of <a href="http://developer.yahoo.com/performance/rules.html#gzip" title="Best Practices for Speeding Up Your Web Site (Yahoo Developer Network)">gzip compression</a> on your server for big savings. As shown below, SoundManager 2 compresses quite well with gzip; the full debug-enabled version served <i>with</i> gzip is smaller than even the minified, no-debug version served without it.</p>
<table id="sm2-filesizes" cellpadding="0" cellspacing="0">
<tr>
<th>Build version</th>
<th>Recommended use</th>
<th class="nw">File size</th>
<th class="nw">+ <a href="http://www.sergeychernyshev.com/blog/speed-up-your-site-drop-in-htaccess-file/" title="Friends don't let friends run websites without gzip!">gzip</a></th>
</tr>
<tr>
<td>
<p>Original, formatted debug-enabled version with comments. Passes <a href="http://jslint.com" title="jslint, the JavaScript code quality tool.">jslint</a>.</p>
<pre>&lt;script src="<span>soundmanager2.js</span>"&gt;&lt;/script&gt;</pre>
</td>
<td>Development, testing, debugging</td>
<td class="nw">90 KB</td>
<td class="nw">~25 KB</td>
</tr>
<tr>
<td>
<p>Minified (Google Closure Compiler-munged, no comments or whitespace), debug-enabled version</p>
<pre>&lt;script src="<span>soundmanager2-jsmin.js</span>"&gt;&lt;/script&gt;</pre>
</td>
<td>Production, with debug code</td>
<td class="nw">42 KB</td>
<td class="nw">~14 KB</td>
</tr>
<tr>
<td>
<p>Build-script optimized, minified, no-debug version</p>
<pre>&lt;script src="<span>soundmanager2-nodebug-jsmin.js</span>"&gt;&lt;/script&gt;</pre>
</td>
<td>Production-optimized, debug code removed</td>
<td class="nw">30 KB</td>
<td class="nw booyaa" title="Best-case scenario for load time/performance">~9.5 KB!</td>
</tr>
</table>
<p>You then need to tell SM2 where to find the flash .SWF it will need (if no HTML5 support), and optionally what version of Flash (~3 KB for flash 8, ~10 KB for flash 9) depending on what API features you want, as well as other features:</p>
<pre>
&lt;script&gt;
soundManager.url = '<span>/path/to/swf-files/</span>';
soundManager.flashVersion = 9; <span><span>// optional: shiny features (default = 8)</span></span>
soundManager.useFlashBlock = false; <span><span>// optionally, enable when you're ready to <a href="../../demo/flashblock/" title="SoundManager 2 flash block handling demo">dive in</a></span></span>
<span><span>// enable <a href="../#soundmanager-usehtml5audio">HTML5 audio support</a>, if you're feeling adventurous. iPad/iPhone will always get this.</span></span>
<span><span>// soundManager.useHTML5Audio = true;</span></span>
soundManager.onready(function() {
<span><span>// Ready to use; soundManager.createSound() etc. can now be called.</span></span>
});
&lt;/script&gt;</pre>
<p>If you plan to eventually use the flash block handling feature (disabled in this example), you'll want to look at the <a href="../../demo/flashblock/" title="SoundManager 2 flash block handling demo">flash block demo</a> and include the relevant CSS it uses.</p>
<h4 id="basic-template">Basic SoundManager Template</h4>
<p>For a live example of a page including SoundManager 2, check the <a href="../../demo/template/" title="SoundManager 2 template example" onclick="checkDomain(this)">bare-bones template</a>.</p>
<h4 id="file-structure">SoundManager File Structure</h4>
<p>Or, "What you get when you download SM2."</p>
<p>The core audio API bits require <code>script/soundmanager2.js</code> and the SWF files <code>swf/soundmanager2.swf</code> and <code>swf/soundmanager2_flash9.swf</code>, as well as the <code>_debug</code> versions of the SWFs. The flash 9 SWF enables some extra API features, and is only used if you set <code>soundManager.flashVersion = 9</code> (the default is 8.)</p>
<ul class="file-structure">
<li>
soundmanager2/
<ul>
<li>
demo/ <span>- Examples, MP3 player UIs etc.</span>
</li>
<li>
doc/ <span>- API method documentation, notes, troubleshooting</span>
</li>
<li class="core">
script/ <span>- API core, soundmanager2.js</span>
</li>
<li>
src/ <span>- AS2/AS3 Flash source used to build SWFs (for flash development)</span>
</li>
<li class="core">
swf/ <span>- API core, SoundManager 2 .SWF files</span>
</li>
<li>
troubleshoot/ <span>- Tool for finding/fixing startup issues</span>
</li>
</ul>
</li>
</ul>
<h4 id="tech-architecture">How SoundManager 2 Really Works</h4>
<p>SoundManager 2 is the result of Javascript talking to a hidden Flash movie. The Flash layer is not something you have to work with directly, but it is the component which makes audio control possible behind the scenes.</p>
<div class="figure">
<div class="code">
<span>soundmanager2.js</span> <span class="mid">&lt;-flash externalinterface magic-&gt;</span> <span>soundmanager2.swf</span> <span class="mid">&lt;- HTTP -&gt;</span> <span>.mp3/.mp4</span>
</div>
</div>
<p>Flash can expose methods to Javascript via ExternalInterface, allowing bi-directional calls to be made and thus providing additional functionality to Javascript.</p>
<p>For the real gory details on the behind-the-scenes action of JS + Flash, see <a href="http://www.schillmania.com/content/entries/2010/how-soundmanager2-works/" title="How SoundManager 2 works (JS + ExternalInterface + Flash)">How SoundManager 2 Works</a> on schillmania.com.</p>
</div>
<div class="f-block f-onload">
<h4>Startup / Initialization</h4>
<p>In brief, here is now SM2 starts up:</p>
<ul>
<li>soundmanager2.js loads</li>
<li>new SoundManager() constructor call, event listeners attached for dom ready/init</li>
<li>document.createElement('embed') (or 'object' for IE), append Flash .SWF to document</li>
<li>SWF loads, Flash makes call to JS function: "Hi, JS!"</li>
<li>JS -&gt; Flash test (JS calls Flash function): "Hello, Flash!"</li>
<li>-- startup is complete, soundManager.onready() fires --</li>
</ul>
<p class="in">A single Javascript include will link in all of the required code for the library, which will automatically begin loading either at <code>onDOMContentLoaded()</code> if supported, or alternately, after <code>window.onload()</code> (eg., IE 6 and others.) The default behaviour is to start "as soon as possible", but the library can be configured to wait for <code>window.onload()</code> in all cases as well. Loading and initialisation are separate events.</p>
<p class="in">Once initialised, SM2 will call event handlers/listeners registered via <code>soundManager.onready()</code>. There are also "old-skool" onload()/onerror() event handlers which you can define just as you would with <code>window.onload()</code>.</p>
<p>If you want to lazy-load or defer SM2, see <a href="#lazy-loading" title="Lazy-loading SM2 and SM2_DEFER object">Lazy-loading and SM2_DEFER</a>.</p>
<h4>SoundManager onready() / ontimeout() and onload() / onerror() Event Handlers</h4>
<p><code>onready()</code> is a flexible method that can be used to queue numerous listeners for SM2's successful start-up. Simply pass a callback function, which will be called when SM2 has successfully started:</p>
<pre class="block"><code>soundManager.onready(function() {
<span><span>// SM2 is ready to go!</span></span>
makeSomeNoise(); <span><span>// soundManager.createSound(), etc.</span></span>
});</code></pre>
<p><code>ontimeout()</code> is used to add listeners for SM2 init failures, which can happen due to missing or blocked Flash support. They are not necessarily fatal as in the flash block case, where <code>onready()</code> calls can follow <code>ontimeout()</code> if the user unblocks flash after a failed init attempt.</p>
<pre class="block"><code>soundManager.ontimeout(function() {
<span><span>// SM2 could not start. Flash blocked, missing or security error? Complain, etc.?</span></span>
});</code></pre>
<h4>SoundManager onload() + onerror()</h4>
<p>A more traditional, less-flexible style of event handling is to assign single onload() / onerror() handlers. You should use <code>onready()</code> as it can be assigned at any time once soundManager has been defined, and is more robust.</p>
<pre class="block"><code>soundManager.onload = function() {
<span><span>// SM2 is ready to go!</span></span>
makeSomeNoise(); <span><span>// soundManager.createSound(), etc.</span></span>
}
soundManager.onerror = function() {
<span><span>// SM2 could not start, no sound support, something broke etc. Handle gracefully.</span></span>
disableSoundInMyApp(); <span><span>// for example</span></span>
}</code></pre>
<h4 id="lazy-loading">Lazy-loading SM2 (deferred start-up): SM2_DEFER</h4>
<p>Let's say you wanted to load and start SM2 after your page has loaded, using Javascript to insert a script node etc., or otherwise only start SM2 conditionally. You can edit soundmanager2.js and take out the SoundManager() constructor call at the bottom, <i>or</i> set the global variable SM2_DEFER = true which will have the same effect.</p>
<p>Example:</p>
<pre class="block"><code>function lazy_load_sm2() {
window.SM2_DEFER = true;
<span><span>// -- load soundmanager2.js via &lt;script&gt;, createElement('script') or XHR etc. --
// imaginary load_script() function ..</span></span>
load_script('<span>/path/to/soundmanager2.js</span>', function() {
<span><span>// once soundmanager2.js has loaded and has parsed, construct + init.</span></span>
window.soundManager = new SoundManager(); <span><span>// Flash expects window.soundManager.</span></span>
soundManager.beginDelayedInit(); <span><span>// start SM2 init.</span></span>
});
}</code></pre>
<p>For a live demo, check out the <a href="../../demo/template/deferred-example.html" title="SoundManager 2 deferred loading example">deferred loading example</a>.</p>
</div>
</div>
</div>
<div class="columnar">
<div class="c1">
<h2>Sound Options Object Format</h2>
<p>Object Literal, JSON-style data passed to <code>createSound()</code> and <code>play()</code></p>
</div>
<div class="c2">
<div class="f-block s-onload"> <!-- f-createsound s-sid s-url s-autoload s-autoplay s-onload -->
<h3 id="object-literal-format">Object Literal Format</h3>
<p>Sounds can be created with instance-specific parameters in an object literal (JSON-style) format, where omitted parameters inherit default values as defined in soundManager.</p>
<pre class="block"><code>soundManager.createSound({
id: '<span>mySound</span>',
url: '<span>/path/to/some.mp3</span>',
autoLoad: <span>true</span>,
autoPlay: <span>false</span>,
onload: <span>function() {
alert('<span>The sound </span>'+<span>this.sID</span>+'<span> loaded!</span>');
}</span>,
volume: <span>50</span>
</span>});</code></pre>
<p>This object can also be passed as an optional argument to the <code class="in">play</code> method, overriding options set at creation time.</p>
<p>For a full list of available options, see <a href="../#sound-properties" title="SoundManager 2 API info: Sound Properties" onclick="resetFilter()">Sound Properties Object</a></p>
</div>
</div>
</div>
<div class="columnar">
<div class="c1">
<h2>"Use Responsibly"</h2>
<p>Only you can prevent audio pollution?</p>
</div>
<div class="c2">
<div class="f-block">
<h3>A Word Of Vice</h3>
<p>Not every button, link, element or paragraph on the web needs to zoom, move, change colour <em>and</em> be noisy, repetitive and annoying all at the same time. Use your own discretion!</p>
<p>Sites which automatically start playing background sound, and/or don't have volume or mute controls are the kind of things you should avoid building. As a developer, gentle reader, you may eventually find yourself in such a situation. Please do your part in enhancing the web with sound if you use SM2, while at the same time keeping it audibly usable. :)</p>
</div>
</div>
</div>
<div id="troubleshooting" class="columnar">
<div id="troubleshooting-flash8" class="c1">
<h2 id="troubleshooting-flash9">Troubleshooting</h2>
<p>Console-style messaging, useful for troubleshooting start-up and runtime issues.</p>
</div>
<div id="troubleshooting-flash9-highperformance" class="c2">
<h3>SoundManager 2 Start-up and Debug Tools</h3>
<p>This troubleshooting tool can come in handy for debugging SM2 start-up problems.</p>
<p class="note">Flash options: <a href="#troubleshooting-flash8" onclick="window.location.replace(this.href);window.location.reload()">Flash 8</a> (default), <a href="#troubleshooting-flash9" onclick="window.location.replace(this.href);window.location.reload()">Flash 9</a> (normal) or <a href="#troubleshooting-flash9-highperformance" onclick="window.location.replace(this.href);window.location.reload()">Flash 9 + highPerformance + fastPolling</a> modes.</p>
<div id="sm2-test">
<ul class="items">
<li id="d-onload" class="default">
<h3><span class="yay">OK</span><span class="boo">FAIL</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>SoundManager 2 start-up</span></h3>
<div id="sm2-startup" class="details">
<p>soundManager.onload() or soundManager.onerror() is ultimately called when start-up completes.</p>
<p>If you're seeing a failure, refer to the below for troubleshooting details for common causes.</p>
</div>
</li>
<li id="d-hasflash" class="default">
<h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>Flash</span></h3>
<div class="details">
<p>The Flash 8 plugin is a minimal requirement for SoundManager 2, but the exact requirement varies based on soundManager.flashVersion. You are currently using <b id="d-flashversion">[unknown]</b>.</p>
</div>
</li>
<li id="d-swf" class="default">
<h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>Flash SWF</span></h3>
<div class="details">
<p>SoundManager 2 must load a flash movie before initialisation can proceed. If you have errors here, check that soundManager.url is correctly defined and that the URL being loaded is correct.</p>
<p>If the Flash movie URL is OK, Flash security or flash blockers are the likely cause. Check the section below.</p>
</div>
</li>
<li id="d-flashtojs" class="default">
<h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>Flash -&gt; JS</span></h3>
<div class="details">
<p>Once the flash component of SM2 has loaded, it tries to make a call to Javascript-land. This is a common point of failure, for security reasons.</p>
<ul>
<li>
<p><b>Have a flash blocker?</b> Check that the <a href="#flashdebug">SM2 flash movie</a> (below) is loading and is not being blocked.</p>
</li>
<li>
First time opening SM2 after downloading it? Is your browser URL at file:// or c:/path/ or otherwise not using HTTP? Flash security "whitelisting" is required to allow Flash + JS to work when offline, placing it in the "LocalTrusted" Flash security sandbox rather than "localWithFile".
<div id="d-flashtojs-offline" style="padding-bottom:1em">
<h4>Offline viewing: Adding a "trusted location" to the Flash Security Settings Panel</h4>
<p>The Flash Player Global Security Settings Panel is a web-based control panel which allows you to configure Flash security. You will need to add the path of the SoundManager 2 project in order for it to work "offline" (ie., when viewing via file:// or c:/)</p>
<p id="ss"><a href="#screenshots" onclick="document.getElementById('ss-box').style.display = 'block';document.getElementById('ss').style.display='none';return false">Show me how</a>: Adding a "trusted location"</p>
<div id="ss-box" style="display:none">
<h4>Illustrated guide: Adding a "trusted location" in Flash</h4>
<p>Below: Adding a location, and selecting "Browse for folder" (or directory), to whitelist the SoundManager 2 project directory for offline viewing.</p>
<p><img src="../../troubleshoot/fpgss-add-location.png" alt="Adding a location: Browse for the file or directory to whitelist" style="width:100%;_width:auto;min-width:72px;max-width:396px" /></p>
<p><img src="../../troubleshoot/fpgss-added-location.png" alt="Whitelisted location has now been added, JS + Flash will work under this path" style="width:100%;_width:auto;min-width:72px;max-width:396px" /></p>
</div>
<p><a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html" target="_blank" class="feature">Launch the Flash Security Settings Panel</a></p>
</div>
</li>
<li style="margin-top:0.5em">Flash blockers (FlashBlock, "click to flash" etc.) preventing flash load and start-up - need whitelisting/"allow this domain" to work smoothly. If you suspect blocking is the issue, try the <a href="../../demo/flashblock/">SoundManager 2 Flashblock demo</a>.</li>
<li style="margin-top:0.5em">Online viewing (HTTP/S): Same-domain security rules apply to HTML + Flash content by default (crossdomain.xml/allowDomain() in .AS source required to override.)</li>
</ul>
<p>See <a href="#flashdebug" title="SoundManager 2 flash debug output">Flash debug output</a> for more security error details.</p>
<div id="d-flashtojs-online">
<h4>Online viewing: Cross-domain security restrictions</h4>
<p>HTML page on domain A loading .SWF from domain B: Flash security prevents JS + Flash when a cross-domain XML permission file is not available on domain B, and/or flash movie was not compiled with allowDomain('domainA') or allowDomain('*') - note that the SWF distributed with SM2 does not use this by default; try using the cross-domain version of the SWF, or compile your own which whitelists your own domain(s).</p>
<h4>Flash Blockers</h4>
<p>Browser extensions/add-ons like "FlashBlock" and "click to flash" can prevent the .SWF from loading, and this will mean SM2 will time-out and fail waiting for a response from Flash. For development, it's best to whitelist the domain(s) or the .SWF for SM2 to allow it to work.</p>
<p>Have a flash blocker installed? Want to test it? Try the <a href="../../demo/flashblock">SoundManager 2 Flashblock demo</a>.</p>
</div>
</div>
</li>
<li id="d-jstoflash" class="default">
<h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>JS -&gt; Flash</span></h3>
<div class="details">
<p>At this point, Javascript attempts to respond to Flash's initial outgoing Flash -&gt; JS call, completing the test for JS/flash communication. If SM2 does not receive a response from flash, it will eventually fail.</p>
<p>Offline viewing conditions and cross-domain security rules will prevent Flash &lt;-&gt; JS communication. See the details of Flash -&gt; JS for information.</p>
</div>
</li>
<li id="d-soundtest" class="default">
<h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>Sound test</span></h3>
<div class="details">
<p>Here, a simple createSound() call is made to test SM2's actual operation. A sound should load and play provided SM2 was able to start successfully.</p>
</div>
</li>
</ul>
</div>
<p>Flash detection code from <a href="http://www.featureblend.com/javascript-flash-detection-library.html" title="Javascript flash detection library">Flash Detect</a> (featureblend.com)</p>
<h3 id="flashdebug">Flash Movie Debug Output</h3>
<p>When <code>soundManager.debugFlash = true</code>, Flash will write debug info as text to the flash movie. This can be helpful for troubleshooting Flash/JS issues when timeouts or security errors are involved which prevent Flash from talking to Javascript, potentially hiding useful debug information. A CSS class of <code>flash_debug</code> will also be appended to the Flash <code>#sm2-container</code> DIV element when enabled, if you wish to style it differently.</p>
<p>You can also specify ?debug=1 in the URL to the SWF, and it will write debug output. Try <a href="../../swf/soundmanager2_debug.swf?debug=1" title="Test debug output" class="norewrite">soundmanager2_debug.swf?debug=1</a>, or <a href="../../swf/soundmanager2_flash9_debug.swf?debug=1" title="Test debug output, Flash 9" class="norewrite">soundmanager2_flash9_debug.swf?debug=1</a>.
<div id="sm2-container">
<!-- flash movie with debug output goes here -->
</div>
<h3>Live Debug Output</h3>
<p>SoundManager 2 relies on Javascript and Flash communicating via ExternalInterface, and this is subject to a number of timing, loading and browser security conditions. Because of this complexity, debug information is essential for troubleshooting start-up, loading, initialization and error conditions between Flash and Javascript.</p>
<p class="in">With debug mode enabled via <code>soundManager.debugMode = true</code>, SM2 can write helpful troubleshooting information to javascript <code>console.log()</code>-style interfaces. Additionally, output can be written to an optional DIV element with the ID of "<code>soundmanager-debug</code>".</p>
<p>If loading from the local filesystem (offline eg. file://, not over HTTP), Flash security is likely preventing SM2 from talking to Javascript. You will need to add this project's directory to the trusted locations in the <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html">Flash global security settings panel</a>, or simply view this page over HTTP.</p>
<p>Below is a live example of debug output.</p>
<div id="live-debug" class="block">
<div id="soundmanager-debug" class="code">
<!-- live debug goes here -->
</div>
</div>
<p>For more examples of live debug output, see the <a href="../../demo/template/" title="Basic SoundManager 2 template">Basic Template</a>, <a href="../../demo/api/" title="API demo">API demo</a> and other demos in the top navigation.</p>
<h3>Standalone version of troubleshooting tool</h3>
<p class="in">For debugging your development/production environment with this widget, see the <a href="../../troubleshoot/" title="SoundManager 2: Standalone debug widget">troubleshooting</a> subdirectory of the SoundManager 2 package.</p>
</div>
</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>
<div id="shortcuts">
</div>
</div>
<div class="clear"></div>
<!-- /main -->
</div>
<!-- /content -->
</div>
<script type="text/javascript">
init();
sm2DebugInit();
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink