1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
|
<!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° 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><script src="<span>soundmanager2.js</span>"></script></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><script src="<span>soundmanager2-jsmin.js</span>"></script></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><script src="<span>soundmanager2-nodebug-jsmin.js</span>"></script></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>
<script>
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>
</script></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 magic-></span> <span>soundmanager2.swf</span> <span class="mid"><- HTTP -></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 -> 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/onload/onerror Event Handlers</h4>
<p><code>onready()</code> is the most flexible and can be used to queue numerous listeners for SM2's start-up. It is a single handler for completion of start-up. Simply pass a callback function, and check <code>soundManager.supported()</code> to know whether sound is available or not:</p>
<pre class="block"><code>soundManager.onready(function() {
if (soundManager.supported()) {
<span><span>// SM2 is ready to go!</span></span>
makeSomeNoise(); <span><span>// soundManager.createSound(), etc.</span></span>
} else {
<span><span>// unsupported/error case</span></span>
}
});</code></pre>
<p>The above example is simplified, slightly; <code>onready()</code> also passes an object literal parameter to your handler that indicates success/fail, so you can check state without having to use <code>soundManager.supported()</code>. For more examples and detail, see <a href="../#soundmanager-onready">soundManager.onready()</a>.</p>
<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 <script>, 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 -> 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>
</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>
|
