/
index.html
206 lines (141 loc) · 8.64 KB
/
index.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SoundManager 2 Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#soundmanager-debug {
/* SM2 debug container (optional, use or customize this as you like - makes in-browser debug output more useable) */
position:fixed;_position:absolute;right:1em;bottom:1em;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:monaco,"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);
}
</style>
<!-- some CSS for this demo page, not required for SM2 -->
<link rel="stylesheet" href="template.css" />
<!-- SM2 BAREBONES TEMPLATE: START -->
<!-- include SM2 library (see builds for optimized versions) -->
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<!-- configure SM2 for your use -->
<script type="text/javascript">
soundManager.setup({
// location: path to SWF files, as needed (SWF file name is appended later.)
url: '../../swf/',
// optional: version of SM2 flash audio API to use (8 or 9; default is 8 if omitted, OK for most use cases.)
// flashVersion: 9,
// optional: use Flash for MP3/MP4/AAC formats, even if HTML5 support present. useful if HTML5 is quirky.
// preferFlash: true
// use soundmanager2-nodebug-jsmin.js, or disable debug mode (enabled by default) after development/testing
// debugMode: false,
// good to go: the onready() callback
onready: function() {
// SM2 has started - now you can create and play sounds!
var mySound = soundManager.createSound({
id: 'aSound',
url: '../_mp3/click-high.mp3'
// onload: function() { console.log('sound loaded!', this); }
// other options here..
});
mySound.play();
},
// optional: ontimeout() callback for handling start-up failure, flash required but blocked, etc.
ontimeout: function() {
// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
// See the flashblock demo when you want to start getting fancy.
}
});
</script>
<!-- SM2 BAREBONES TEMPLATE: END -->
<script type="text/javascript">
// helper function for this page only, demo purposes
function checkDomain() {
if (!document.domain && !this.href.match(/index/i)) {
this.href=this.href+'index.html';
}
}
</script>
</head>
<body style="height:100%">
<div style="max-width:75em">
<h1>SoundManager 2 Template Example</h1>
<p>This page covers the basics of adding SoundManager 2 to your project.</p>
<h2>How it works</h2>
<p>The minimal code needed to get SoundManager 2 going is below, with <em><em>configurable parts highlighted</em></em>. You can copy/paste it to get started. This page is also running the template code; If available, look at your JavaScript console for debug output from SM2.</p>
<h2>Dependencies</h2>
<p>You'll need to copy the files inside the <b>script/</b> and <b>swf/</b> subdirectories included with the SoundManager 2 package into your project.</p>
<ul class="file-structure">
<li>
soundmanager2/
<ul>
<li class="core">
script/ <span>- API core, soundmanager2.js</span>
</li>
<li class="core">
swf/ <span>- API core, SoundManager 2 .SWF files</span>
</li>
</ul>
</li>
</ul>
<p>At the bare minimum, you will need <b>soundmanager2.js</b>, <b>soundmanager2.swf</b> and <b>soundmanager2_debug.swf</b> for the default flash 8-based configuration. (Optionally, SM2 can use a Flash 9-based audio API which has MP4 support, data visualization and a few other features.)</p>
<h2 id="minimal">Template Code: Basic Version</h2>
<p>This is a compact version of the template you can copy/paste to get started. For new users, see the <a href="#commented-template">commented version</a>.</p>
<pre class="block"><code><script src="<em><em>/path/to/soundmanager2.js</em></em>"></script>
<script>
soundManager.setup({
url: '<em><em>/path/to/swf-files/</em></em>',
onready: function() {
var mySound = soundManager.createSound({
id: '<em><em>aSound</em></em>',
url: '<em><em>/path/to/an.mp3</em></em>'
});
mySound.play();
},
ontimeout: function() {
<span><span>// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?</span></span>
}
});
</script></code></pre>
<h2 id="commented-template">Template Code: Commented Version</h2>
<pre class="block"><code><span><span><!-- include SM2 library (see <a href="../../doc/getstarted/#basic-inclusion" title="SoundManager 2: Script build versions" onclick="checkDomain()">builds</a> for optimized versions) --></span></span>
<script type="text/javascript" src="<em><em>/path/to/soundmanager2.js</em></em>"></script>
<span><span><!-- configure SM2 for your use --></span></span>
<script type="text/javascript">
soundManager.setup({
<span><span>// location: path to SWF files, as needed (SWF file name is appended later.)</span></span>
url: '<em><em>/path/to/swf-files/</em></em>',
<span><span>// optional: version of SM2 flash audio API to use (8 or 9; default is 8 if omitted, OK for most use cases.)
// flashVersion: <em><em>9</em></em>,
// use soundmanager2-nodebug-jsmin.js, <i>or</i> disable debug mode (enabled by default) after development/testing
// debugMode: <em><em>false</em></em>,
// good to go: the onready() callback</span></span>
onready: function() {
<span><span>// SM2 has started - now you can create and play sounds!</span></span>
var mySound = soundManager.createSound({
id: '<em><em>aSound</em></em>',
url: '<em><em>/path/to/an.mp3</em></em>'
<span><span>// onload: function() { console.log('sound loaded!', this); }
// <a href="../../doc/#smdefaults" onclick="checkDomain()">other options</a> here..</span></span>
});
mySound.play();
},
<span><span>// optional: ontimeout() callback for handling start-up failure</span></span>
ontimeout: function() {
<span><span>// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
// See the <a href="../flashblock/" title="SoundManager 2 flashblock handling demo" onclick="checkDomain()">flashblock demo</a> when you want to start getting fancy.</span></span>
}
});
</script></code></pre>
<h2 id="html5-notes">HTML5 Support Notes</h2>
<p>Read up on <a href="../../doc/#soundmanager-usehtml5audio" onclick="checkDomain()">HTML5 audio support</a>, if you're feeling adventurous. iPad/iPhone and devices without flash installed will always use 100% HTML5 mode. By default, SM2 will use 100% HTML5 mode where supported. If you want to override this, specify <code>preferFlash: true</code> and Flash will be used (if present) for playing MP3 and MP4 (AAC) formats.</p>
<h2 id="flashblock-handling">Handling flash blockers</h2>
<p>It's good to let users see the flash component of SM2, so those with flash blockers can unblock it and allow SM2 to start. For more info, see the <a href="../flashblock/" title="SoundManager 2 with Flash block handling" onclick="checkDomain()">Flashblock</a> example.</p>
<h2 style="margin-top:1em">Disabling debug output</h2>
<p>SoundManager 2 will write debug output via <code>console.log()</code> if available, by default. To disable it, simply specify <code>debugMode: false</code>.</p>
<p>You can also write HTML-based debug output to the DOM via <code>consoleOnly: false</code> and/or <code>useConsole: false</code>.</p>
<p>To see related configuration code, refer to the source of this page which basically does all of the above "for real."</p>
<h2>Troubleshooting ("failed to start": Viewing offline, missing SWF, flash blockers etc.)</h2>
<p>If SM2 is failing to start and throwing errors due to flash security, timeouts or other issues, check out the <a href="../../doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool" onclick="checkDomain()">troubleshooting tool</a> for tips.</p>
<h2>No-debug, compressed version of soundmanager2.js</h2>
<p>Once development is finished, you can also use the "minified" (down to ~8% of original size with gzip!) version of SM2, which has debug output and comments removed for you: <a href="../../script/soundmanager2-nodebug-jsmin.js">soundmanager2-nodebug-jsmin.js</a>. Serve with gzip compression wherever possible for best bandwidth savings.</p>
</div>
</body>
</html>