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
|
<!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 Demo: Play MP3 Links on a page</title>
<meta name="robots" content="noindex" />
<style type="text/css">
/*
-------------------------------------------------------------
In-page demo CSS - see external CSS for actual relevant stuff.
--------------------------------------------------------------
*/
#soundmanager-debug {
/* SM2 debug container (optional, makes debug more useable) */
position:absolute;position:fixed;*position:absolute;bottom:10px;right:10px;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);
}
body {
font:75% normal verdana,arial,tahoma,"sans serif";
}
h1, h2, h3 {
font:2.5em arial,tahoma,verdana;
font-weight:normal;
margin-bottom:0px;
}
h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */
margin-top:0.5em;
}
h2, h3 {
color:#333;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h1 a,
h1 a:hover {
color:#000;
text-decoration:none;
}
h1 a:hover {
text-decoration:underline;
}
ul.notes {
margin-left:0px;
padding-left:1.5em;
}
.note {
margin-top:0px;
font-style:italic;
color:#999;
}
pre {
font-size:1.2em;
_font-size:1em;
}
#left {
max-width:56em;
}
code {
font-size:120%;
line-height:1.5em;
color:#006600;
font-weight:bold;
}
p {
line-height:1.75em;
}
</style>
<link rel="stylesheet" type="text/css" href="css/inlineplayer.css" />
<link rel="stylesheet" type="text/css" href="../flashblock/flashblock.css" />
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript" src="script/inlineplayer.js"></script>
</head>
<body>
<div id="left">
<h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Play MP3s inline with javascript using SoundManager 2">SoundManager 2</a> / Make MP3 links play in-place</h1>
<h2>Inline MP3 Player Example: Fancy* CSS 3 version</h2>
<p class="note">*CSS 3 border-radius supported only by Firefox 2.x+, Safari (2.x?) - sadly, not IE 8.</p>
<div id="sm2-container">
<!-- SM2 flash goes here -->
</div>
<ul class="graphic">
<li><a href="../jsAMP-preview/audio/rain.mp3">Rain</a></li>
<li><a href="../jsAMP-preview/audio/walking.mp3">Walking</a></li>
<!-- files from the web (note that ID3 information will *not* load from remote domains without permission, Flash restriction) -->
<li><a href="http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3">Barrlping with Carl (featureblend.com)</a></li>
<li><a href="http://www.freshly-ground.com/data/audio/binaural/Mak.mp3">Angry cow sound?</a></li>
<li><a href="http://www.freshly-ground.com/data/audio/binaural/Things that open, close and roll.mp3">Things that open, close and roll</a></li>
<li><a href="http://www.freshly-ground.com/misc/music/20060826%20-%20Armstrong.mp3">20060826 - Armstrong</a></li>
<li><a href="http://freshly-ground.com/data/video/Rain%20on%20Car%20Roof.aac">Rain On Car Roof (AAC Audio)</a></li>
</ul>
<h2>How It Works</h2>
<ul class="notes">
<li>Lightweight (single JS click event handler)</li>
<li>Uses existing SoundManager 2 API</li>
<li>CSS for UI, easy to modify to taste</li>
</ul>
<p>This example uses <a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 Javascript Sound API">SoundManager 2</a> to find links to MP3 files, and makes them playable "in-place" on a page. The script assigns CSS classes to links to indicate their state (playing/paused, etc.)</p>
<p>Links pointing to MP3s are assigned an onclick handler which intercepts the click (preventing the browser from following the link and unloading the page. SM2 will then create sound objects as needed to play the MP3s.</p>
<h3>Static Examples</h3>
<p style="margin-top:0px">CSS classes are dynamically applied as follows:</p>
<ul class="graphic">
<li><a href="#" class="sm2_link" title="'Click to play' state">Default: class="sm2_link"</a></li>
<li><a href="#" class="sm2_link sm2_playing" title="'Click to pause' state">Playing: class="sm2_link sm2_playing"</a></li>
<li><a href="#" class="sm2_link sm2_paused" title="'Click to resume' state">Paused: class="sm2_link sm2_paused"</a></li>
</ul>
<p>:hover effects are also active.</p>
<h2>Flat (CSS-only) style</h2>
<ul class="flat">
<li><a href="../jsAMP-preview/audio/going_outside.mp3">Going Outside</a></li>
<li><a href="../jsAMP-preview/audio/office_lobby.mp3">Office Lobby Entrance</a></li>
<!-- files from the web (note that ID3 information will *not* load from remote domains without permission, Flash restriction) -->
<li><a href="http://www.freshly-ground.com/data/audio/binaural/Rain 3.mp3">Rain 3</a></li>
<li><a href="http://www.freshly-ground.com/data/audio/binaural/Frogs @ Yahoo!.mp3">Frogs @ Yahoo!</a></li>
<li><a href="http://www.freshly-ground.com/data/audio/binaural/Walking past sprinklers, mailbox.mp3">Walking past sprinklers, mailbox</a></li>
<li><a href="http://www.freshly-ground.com/data/audio/binaural/Cup of Coffee.mp3">Cup of Coffee</a></li>
</ul>
<h3>Static Examples</h3>
<ul class="flat">
<li><a href="#" class="sm2_link" title="'Click to play' state">Default: class="sm2_link"</a></li>
<li><a href="#" class="sm2_link sm2_playing" title="'Click to pause' state">Playing: class="sm2_link sm2_playing"</a></li>
<li><a href="#" class="sm2_link sm2_paused" title="'Click to resume' state">Paused: class="sm2_link sm2_paused"</a></li>
</ul>
<h3>Forcing play (or exclusion) of links</h3>
<p>If you have a link to a PHP file that serves MP3 files eg. /music.php?fileID=123, it won't be picked up by the script as containing a known, playable .mp3 extension. To tell the script it should be treated as playable, include a <code>type="audio/mpeg"</code> MIME type attribute, or CSS <code>class="inline-playable"</code> in the link. eg:</p>
<p>
<code><a href="/music.php?fileID=123" type="audio/mpeg">A song</a></code>
</p>
<p>Or via CSS class name:</p>
<code><a href="/music.php?fileID=123" class="inline-playable">A song</a></code>
</p>
<p>
To exclude an .MP3 or otherwise-playable link from being handled by SM2, use <code>class="inline-exclude"</code> and it will be ignored.
</p>
<p>
<a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 home">SoundManager 2 project page</a> (not an MP3 link)
</p>
<h3>Basic CSS</h3>
<pre>
If you want to make your own UI from scratch, here is the base:
Default + hover state, "click to play":
a.sm2_link {}
a.sm2_link:hover {}
Playing + hover state, "click to pause":
a.sm2_playing {}
a.sm2_playing:hover {}
Paused + hover state, "click to resume":
a.sm2_paused {}
a.sm2_paused:hover {}
</pre>
<h3>Other Options</h3>
<p>By default, one sound will be played at a time; you can easily change a "config" object value to turn on playlist-like behaviour (i.e., play the next MP3 when the current one finishes.)</p>
<pre>
// (within inlineplayer.js)
this.config = {
playNext: false // stop after one sound, or play through list until end
}
</pre>
<h3>I'd like to use this.</h3>
<p>See this <a href="basic.html" title="basic template: inline mp3 player">basic demo</a> for reference.</p>
</div>
</body>
</html>
|
