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
|
<!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>jsAMP MP3 Player v0.99a.20071010 - Technology Preview Demo</title>
<meta name="robots" content="noindex" />
<meta name="author" content="Scott Schiller" />
<meta name="language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="javascript sound library api" />
<meta name="description" content="Demo page for soundmanager mp3 player" />
<link rel="stylesheet" type="text/css" href="css/player.css" title="dark" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/player-light.css" title="light" media="screen" />
<style type="text/css">
#demo-info {
position:relative;
padding:1em;
background:#000;
opacity:0.75;
filter:alpha(opacity=75);
color:#fff;
max-width:51em;
}
#demo-info h1 {
margin:0px 0px 2em 0px;
font-size:1.5em;
color:#99ccff;
}
#demo-info p {
line-height:1.5em;
}
#demo-info a {
color:#99ccff;
}
#demo-info a:hover {
color:#fff;
}
#close {
position:absolute;
right:0px;
top:0px;
display:block;
width:1em;
line-height:1em;
padding:0.1em;
margin:0.5em;
height:1em;
text-decoration:none;
color:#fff;
border:1px solid #666;
text-align:center;
overflow:hidden;
}
#close:hover {
background:#333;
}
#demo-info.closed * {
display:none;
}
#demo-info.closed .minimal {
display:block;
margin:0px;
padding:0px;
}
#demo-info.closed .minimal * {
display:inline;
}
</style>
<script type="text/javascript">
function setActiveStyleSheet(title) {
var i, a, main;
for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
</script>
<script type="text/javascript" src="../../script/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="script/jsamp-preview.js"></script>
</head>
<body>
<div>
<!-- skin / control stuff -->
<div id="demo-info">
<h1>jsAMP: Example SoundManager 2 Application</h1>
<pre style="font-size:1.25em">
---------------------------------------------------------
* GENERAL DISCLAIMER: jsAMP is UNSUPPORTED DEMO CODE. *
jsAMP is provided "as-is" and as an example application
using the API functionality provided by SoundManager 2.
(It's also a dev. sanity QA check / API test suite.)
I don't recommend throwing it on your band/label's site
expecting it to "just work" - you have been warned. ;)
You are welcome to use this in your own projects, but
be aware jsAMP may be buggy, use at your own risk etc.
If you are looking for a JS/DHTML/Flash MP3 player,
check the related projects section of the SM2 project
page for other resources.
---------------------------------------------------------
</pre>
<p>jsAMP is a JavaScript MP3 player which uses the <a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 project home">SoundManager 2 API</a> to provide JS-driven audio. It's an example of the kind of stuff you could build using SoundManager. All player logic is handled via Javascript, but SoundManager 2 (JS + Flash) provide the actual sound layer. It's also convenient in that no Flash knowledge is needed, it's all handled by SM2.</p>
<p>jsAMP picks up all <a> elements linking to MP3 files in the page, and creates a playlist (view source for details.) It gets ID3 information when loading local/same-domain files or as permissions allow, as well.</p>
<p>To see the playlist, click the "down arrow" <img src="image/sec-right-arr0.png" alt="Playlist toggle" title="Playlist toggle" /> at right on the UI.</p>
<p>Click and drag the title bar to move the player around. When a track is loaded, click to seek or drag and drop the slider to a given position. (Safari seems to have a few minor UI issues in this version, FYI.) IE 6 also receives a somewhat-degraded, GIF-based experience.</p>
<p><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2 Project Home</a></p>
<p class="minimal">Skin: <a href="#" onclick="setActiveStyleSheet('light');return false">light</a> | <a href="#" onclick="setActiveStyleSheet('dark');return false">dark</a> || <a href="#" onclick="bg.getRandom();return false">this background sucks</a></p>
<a id="close" href="#" title="close" onclick="document.getElementById('demo-info').className='closed';return false">-</a>
</div>
<div id="player-template" class="sm2player">
<!-- player UI (bar) -->
<div class="ui">
<div class="left">
<a href="#" title="Pause/Play" onclick="soundPlayer.togglePause();return false" class="trigger pauseplay"><span></span></a>
</div>
<div class="mid">
<div class="progress"></div>
<div class="info"><span class="caption text">%{artist} - %{title} [%{album}], (%{year}) (%{time})</span></div>
<div class="default">jsAMP Technology Preview v0.99a.20071010 (Seriously alpha - use at own risk! :))</div>
<div class="seek">Seek to %{time1} of %{time2} (%{percent}%)</div>
<div class="divider"> --- </div>
<a href="#" title="" class="slider"></a>
</div>
<div class="right">
<div class="divider"></div>
<div class="time" title="Time">0:00</div>
<a href="#" title="Previous" class="trigger prev" onclick="soundPlayer.oPlaylist.playPreviousItem();return false"><span></span></a>
<a href="#" title="Next" class="trigger next" onclick="soundPlayer.oPlaylist.playNextItem();return false"><span></span></a>
<a href="#" title="Shuffle" class="trigger s1 shuffle" onclick="soundPlayer.toggleShuffle();return false"><span></span></a>
<a href="#" title="Repeat" class="trigger s2 loop" onclick="soundPlayer.toggleRepeat();return false"><span></span></a>
<a href="#" title="Mute" class="trigger s3 mute" onclick="soundPlayer.toggleMute();return false"><span></span></a>
<a href="#" title="Volume" onmousedown="soundPlayer.volumeDown(event);return false" onclick="return false" class="trigger s4 volume"><span></span></a>
<a href="#" title="Playlist" class="trigger dropdown" onclick="soundPlayer.togglePlaylist();return false"><span></span></a>
</div>
</div>
<div class="sm2playlist-box">
<!-- playlist / controls -->
<div id="playlist-template" class="sm2playlist">
<div class="hd"><div class="c"></div></div>
<div class="bd">
<ul>
<!-- playlist items created, inserted here
<li><a href="/path/to/some.mp3"><span>Artist - Song Name, etc.</span></a></li>
-->
</ul>
</div>
<div class="ft"><div class="c"></div></div>
</div>
<!-- close container -->
</div>
</div>
<div style="position:absolute;left:0px;top:-9999px;width:30em">
<p>This is a normal list of HTML links to MP3 files, which jsAMP picks up and turns into a playlist.</p>
<ul>
<li><a href="audio/going_outside.mp3">Going Outside</a></li>
<li><a href="audio/office_lobby.mp3">Office Lobby Entrance</a></li>
<li><a href="../_mp3/mak.mp3">Angry cow sound?</a></li>
<li><a href="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/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>
<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>
</ul>
</div>
</div>
<script type="text/javascript">
var bg = {
images: ['bg1','bg2','bg3'],
i: 0,
getRandom: function(n) {
this.i = (typeof n != 'undefined'?n:(++this.i>=this.images.length?0:this.i));
document.body.style.background = "#000 url(backgrounds/"+this.images[this.i]+".jpg) no-repeat 0px 0px";
}
}
bg.getRandom(parseInt(Math.random()*bg.images.length));
</script>
<script type="text/javascript">
if (window.location.toString().match(/flash9/)) soundManager.flashVersion = 9;
soundManager.url = '../../swf/';
</script>
</body>
</html>
|
