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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SoundManager 2 Template</title>
<style type="text/css">
#soundmanager-debug {
/* SM2 debug container (optional, use or customize this as you like - makes in-browser debug output more useable) */
position:fixed;_position:absolute;right:1em;bottom:1em;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:monaco,"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);
}
</style>
<!-- some CSS for this demo page, not required for SM2 -->
<link rel="stylesheet" href="template.css" />
<!-- SM2 BAREBONES TEMPLATE: START -->
<!-- include SM2 library -->
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<!-- And now, customize it! -->
<script type="text/javascript">
// soundManager.debugMode = false; // disable debug output
soundManager.url = '../../swf/'; // path to directory containing SoundManager2 .SWF file
soundManager.flashVersion = 8;
soundManager.useFlashBlock = false; // skip for now. See the flashblock demo when you want to start getting fancy.
soundManager.onload = function() {
// soundManager.createSound() etc. may now be called
soundManager._writeDebug('soundManager.onload() - your code executes here');
}
</script>
<!-- SM2 BAREBONES TEMPLATE: END -->
</head>
<body style="height:100%">
<div style="margin-right:43em">
<h1>SoundManager 2 Template Example</h1>
<p>This is a basic template for adding SoundManager to your page.</p>
<h2>How it works</h2>
<p>This page includes the SM2 script, which starts up on its own as appropriate. By default it will try to start as soon as possible.</p>
<p>The minimal code needed to get SoundManager 2 going is below, with <em><em>configurable parts</em></em>:</p>
<code>
<pre>
<span><!-- include SM2 library --></span>
<script type="text/javascript" src="<em><em>/path/to/soundmanager2.js</em></em>"></script>
<span><!-- configure it for your use --></span>
<script type="text/javascript">
soundManager.url = '<em><em>/path/to/sm2-flash-movies/</em></em>'; <span>// directory where SM2 .SWFs live</span>
<span>// Note that SoundManager will determine and append the appropriate .SWF file to the URL,
// eg. /path/to/sm2-flash-movies/soundmanager2.swf automatically.</span>
<span>// Beta-ish HTML5 audio support (force-enabled for iPad), flash-free sound for Safari + Chrome. Enable if you want to try it!</span>
<span>// soundManager.useHTML5Audio = true;</span>
<span>// do this to skip flash block handling for now. See the <a href="../flashblock/" title="SoundManager 2 flashblock handling demo" onclick="if (!document.domain) this.href=this.href+'index.html'">flashblock demo</a> when you want to start getting fancy.</span>
soundManager.useFlashBlock = false;
<span>// disable debug mode after development/testing..</span>
<span>// soundManager.debugMode = false;</span>
<span style="background:#eee;padding:0.25em">// Option 1: Simple onload() + createSound() method</span>
soundManager.onload = function() {
<span>// SM2 has loaded - now you can create and play sounds!</span>
<em><em>soundManager.createSound('helloWorld','/path/to/hello-world.mp3');
soundManager.play('helloWorld');</em></em>
};
<span style="background:#eee;padding:0.25em">// Option 2 (better): More flexible onload() + createSound() method</span>
soundManager.onload = function() {
<em><em>var mySound = soundManager.createSound({
id: 'aSound',
url: '/path/to/an.mp3'
<span>// onload: <span>[ event handler function object ],</span></span>
<span>// other options here..</span>
});
mySound.play();
</em></em>}
<span style="background:#eee;padding:0.25em">// Option 3 (best): onready() + createSound() methods, handle load/failure together:</span>
soundManager.onready(function() {
<span>// check if SM2 successfully loaded..</span>
<em><em>if (soundManager.supported()) {</em></em>
<span>// SM2 has loaded - now you can create and play sounds!</span>
<em><em>var mySound = soundManager.createSound({
id: 'aSound',
url: '/path/to/an.mp3'
<span>// onload: <span>[ event handler function object ],</span></span>
<span>// other options here..</span>
});
mySound.play();
} else {
<span>// (Optional) Hrmm, SM2 could not start. Show an error, etc.?</span>
}</em></em>
});
</script></pre></code>
<h2 id="flashblock-handling">Handling flash blockers</h2>
<p>It's good to let users see the flash component of SM2, so those with flash blockers can unblock it and allow SM2 to start. For more info on this, see the <a href="../flashblock/" title="SoundManager 2 with Flash block handling" onclick="if (!document.domain) this.href=this.href+'index.html'">Flashblock</a> example.</p>
<h2>Making SM2 wait for window.onload()</h2>
<p>If you prefer to have the library wait for window.onload() before calling soundManager.onload()/onerror() methods, you can modify SM2's "waitForWindowLoad" property:</p>
<code>soundManager.waitForWindowLoad = true;</code>
<h2 style="margin-top:1em">Disabling debug output</h2>
<p>SoundManager 2 will write to a debug <div> element or a javascript console if available, by default. To disable it, simply set the relevant property to false:</p>
<code>soundManager.debugMode = false;</code>
<p>To see related configuration code, refer to the source of this page which basically does all of the above "for real."</p>
<h2>Troubleshooting</h2>
<p>If SM2 is failing to start and throwing errors due to flash security, timeouts or other issues, check out the <a href="../../doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool" onclick="if (!document.domain) this.href=this.href.replace(/\#/,'index.html#')">troubleshooting tool</a> which can help you fix things.</p>
<h2>No-debug, compressed version of soundmanager2.js</h2>
<p>Once development is finished, you can also use the "minified" (down to 10% of original size with gzip!) version of SM2, which has debug output and comments removed for you: <a href="../../script/soundmanager2-nodebug-jsmin.js">soundmanager2-nodebug-jsmin.js</a>. Serve with gzip compression wherever possible for best bandwidth savings.</p>
</div>
</body>
</html>
|
