<!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.setup({ url: '../../swf/', useFlashBlock: true, consoleOnly: false, bgColor: '#f6f6f6', debugMode: true, // enable flash debug output for this page debugFlash: true }); </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/template/">Basic Template</a></li> <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° 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> </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> <li><a href="../generated/soundmanager2.html">Generated Documentation</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/#serving-audio">Serving To HTML5 + Flash Clients</a></li> <li><a href="../technotes/#client-requests">How Clients Download Audio</a></li> <li><a href="../technotes/#mobile-device-limitations">Mobile Device Limitations</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-wrapper"> <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 is still in development.)</p> <p><strong>Solution:</strong> Javascript API using HTML5 Audio() + headless Flash via ExternalInterface, works almost everywhere. If HTML5 is supported but "non-free" MP3/MP4 formats are not, flash can be used as a fallback.</p> <p>SoundManager 2 wraps and extends both the HTML Audio and Flash Audio APIs, providing a single, unified sound API to Javascript; the API is consistent regardless of the technology working under the hood 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 2</h4> <p>The soundmanager2.js core can get down to 11 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.</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="https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess" 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><script src="<span>soundmanager2.js</span>"></script></pre> </td> <td>Development, testing, debugging</td> <td class="nw">153 KB</td> <td class="nw">41 KB</td> </tr> <tr> <td> <p>"No-debug", formatted (comments removed, whitespace retained) version</p> <pre><script src="<span>soundmanager2-nodebug.js</span>"></script></pre> </td> <td>Production, "clean" no-debug code</td> <td class="nw">78 KB</td> <td class="nw">17 KB</td> </tr> <tr> <td> <p>Minified (Google Closure Compiler-munged, no comments or whitespace), debug-enabled version</p> <pre><script src="<span>soundmanager2-jsmin.js</span>"></script></pre> </td> <td>Production, with debug code</td> <td class="nw">47 KB</td> <td class="nw">16 KB</td> </tr> <tr> <td> <p>Build-script optimized, minified, no-debug version</p> <pre><script src="<span>soundmanager2-nodebug-jsmin.js</span>"></script></pre> </td> <td>Production-optimized, debug code removed</td> <td class="nw">34 KB</td> <td class="nw booyaa" title="Best-case scenario for load time/performance">11 KB!</td> </tr> </table> <p>You then need to tell SM2 where to find the flash .SWF it will need (depending on HTML5 support), and optionally what version of Flash (~2.8 KB for flash 8, and ~8.5 KB for flash 9) depending on what API features you want:</p> <pre class="block"><code><script> soundManager.setup({ url: '<span>/path/to/swf-files/</span>', flashVersion: 9, <span><span>// optional: shiny features (default = 8) // optional: ignore Flash where possible, use 100% HTML5 mode // <a href="../#soundmanager-preferflash" title="soundManager.preferFlash documentation">preferFlash</a>: false,</span></span> onready: function() { <span><span>// Ready to use; <a href="../#soundmanager-createsound">soundManager.createSound()</a> etc. can now be called.</span></span> } }); </script></code></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"><- Flash + ExternalInterface, and/or HTML5 Audio() -></span> <span class="mid"><- HTTP -></span> <span>audio file</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 -> 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() 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 id="lazy-loading">Lazy-loading / Dynamically-loading SM2 on-the-fly</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 load the library dynamically (at or after <code>DOMContentReady</code>), and it will not attempt to init until you call <code>setup()</code> with a <code>url</code> parameter.</p> <p>Example:</p> <pre class="block"><code>function loadSM2() { <span><span>// -- load soundmanager2.js via <script>, createElement('script') or XHR etc. -- // imaginary loadJS() function with callback ...</span></span> loadJS('<span>/path/to/soundmanager2.js</span>', function() { <span><span>// once soundmanager2.js has loaded, call <a href="../#soundmanager-setup">soundManager.setup()</a>.</span></span> soundManager.setup({ url: '<span>/path/to/swfs/</span>', onready: function() { <span><span>// soundManager.createSound() etc. here</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.id</span>+'<span> loaded!</span>'); }</span>, volume: <span>50</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, when Flash support is required.</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 onready() or ontimeout() events are 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>Flash 8 or 9 may be required for SoundManager 2 to start, depending on HTML5 support. 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 -> 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 -> Flash</span></h3> <div class="details"> <p>At this point, Javascript attempts to respond to Flash's initial outgoing Flash -> 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 <-> JS communication. See the details of Flash -> JS for information.</p> <p><b>Special Firefox Note</b>: Some versions of Firefox (9.0 and newer?) may break JS/Flash in the file:// or offline case even when the path has been whitelisted in the Flash player security settings panel. IE, Chrome, Safari and Opera do not have this issue.</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>.</p> <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>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="support-wrapper"> <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/" rel="nofollow">Get Satisfaction support network</a></div> </div> <!-- /.box --> </div> </div> <div id="shortcuts"> </div> </div> <div class="clear"></div> <!-- /main --> </div> <!-- /main-wrapper --> </div> <!-- /content --> </div> <script type="text/javascript"> init(); sm2DebugInit(); </script> </body> </html>