-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathsample.html
154 lines (128 loc) · 6.34 KB
/
sample.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
<!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-US" xml:lang="en-US">
<head>
<title>NiftyPlayer - a small and simple Flash MP3 player!</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" language="javascript" src="niftyplayer.js"></script>
</head>
<body>
<div class="mainwrapper">
<div class="title">
<h1>niftyPlayer </h1>
<div class="caption">A Scriptable, Lightweight Flash MP3 Player</div>
</div>
<h2>Demo</h2>
<div class="sectiontext">
<p>This is what <strong>niftyPlayer</strong> looks like:</p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="37" id="niftyPlayer1" align="">
<param name=movie value="niftyplayer.swf?file=betty.mp3&as=0">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<embed src="niftyplayer.swf?file=betty.mp3&as=0" quality=high bgcolor=#FFFFFF width="165" height="37" name="niftyPlayer1" align="" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
<p>...and it is controllable with JavaScript:</p>
<a href="javascript:niftyplayer('niftyPlayer1').playToggle()">play toggle</a>
(or
<a href="javascript:niftyplayer('niftyPlayer1').play()">play</a>
|
<a href="javascript:niftyplayer('niftyPlayer1').pause()">pause</a>
)
<a href="javascript:niftyplayer('niftyPlayer1').stop()">stop</a>
<br />
<a href="javascript:niftyplayer('niftyPlayer1').load('betty.mp3')">load file 1</a>
|
<a href="javascript:niftyplayer('niftyPlayer1').load('creeeeak.mp3')">load file 2</a>
|
<a href="javascript:niftyplayer('niftyPlayer1').loadAndPlay('creeeeak.mp3')">load file 2 and play it</a>
<br />
<br />
<a href="javascript:niftyplayer('niftyPlayer1').registerEvent('onPlay', 'alert(\'Playing!\')')">register onPlay event</a> (then click the play button to see the result)
<br />
<a href="javascript:alert(niftyplayer('niftyPlayer1').getState())">get current file state</a>
</div>
<h2>Upsides</h2>
<div class="sectiontext">
<ol>
<li>Small (~4kb)</li>
<li>Free, open-source</li>
<li>No Flash knowledge required: file URL is specified in HTML</li>
<li>JavaScript-ready! You may even bypass the Flash interface altogether!</li>
<li>Autostart capability</li>
<li>Draggable/Clickable seek bar</li>
<li>Simple operation with Play/Pause and Stop buttons</li>
<li>Buffering with progress bar</li>
<li>Buffering is stoppable! (through Stop button)</li>
<li>Volume control</li>
<li>Very verbal</li>
<li>Retries upon encountering errors</li>
</ol>
</div>
<h2>Downsides</h2>
<div class="sectiontext">
<ol>
<li>No playlist capability (<a href="flashmp3alizer.html">but can be done in JavaScript!</a>)</li>
<li>No photo-slideshow or video capability</li>
<li>Sound must be MP3 (flash limitation)</li>
<li>I'm sure there's more, but I can't really think of any other. But, hey, did I mention it's open-source? You can always change the code :)</li>
</ol>
</div>
<h2>Usage</h2>
<div class="sectiontext">
<p>Copy and paste the code below into your HTML file, then replace all values in red accordingly.</p>
<pre>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" <font color="blue">width="165" height="38"</font> id="niftyPlayer1" align="">
<param name=movie value="niftyplayer.swf?<font color="red">file=betty.mp3</font>&<font color="red">as=1</font>">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<embed src="niftyplayer.swf?<font color="red">file=betty.mp3</font>&<font color="red">as=1</font>" quality=high bgcolor=#FFFFFF <font color="blue">width="165" height="38"</font> name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object></pre>
<p>If you'd like to use the JS extension, include the code below in your HTML file (it usually goes inside the <code>head</code> section). You may set the height and width of the Flash (in blue, above) to 0 to make it disappear -- or use CSS, alternatively.</p>
<pre><script type="text/javascript" language="javascript" src="niftyplayer.js"></script></pre>
<p>Also, you may want to check out the <a href="flashmp3alizer.html">FlashMP3alizer script</a> too.
</div>
<h2>Reference</h2>
<div class="sectiontext">
<table cellpadding="10">
<tr>
<th align="left">Parameter
</th>
<th align="left">Explanation
</th>
</tr>
<tr>
<td><code>file=betty.mp3</code>
</td>
<td>substitute betty.mp3 for the file you want to play
</td>
</tr>
<tr>
<td><code>as=1</code>
</td>
<td>this specifies whether you want the file to auto-start playing. you may ommit <code>as</code> if you don't want it to auto-start.
</td>
</tr>
</table>
</div>
<h2>Download</h2>
<div class="sectiontext">
<p>Note: Please do not <a href="http://en.wikipedia.org/wiki/Hotlink">hotlink</a> to <strong>NiftyPlayer</strong>. I do have to pay for bandwidth, you know? :)</p>
<p><b><a href="niftyplayer.zip">Get the NiftyPlayer here!</a></b></p>
<p>(This program is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>, which, to put it in non-legal terms, allows you to share, use and modify it. Even for commercial purposes. Check out the <a href="http://en.wikipedia.org/wiki/Mit_license">Wikipedia article</a> on this license for more.)</p>
</div>
<h2>Acknowldgements</h2>
<div class="sectiontext">
<p>Part of the JavaScript code was pretty much copied from this website
<a href="http://www.moock.org/webdesign/flash/fscommand/">http://www.moock.org/webdesign/flash/fscommand/</a>.
They offer a great explanation of Flash/Javascript interoperation.</p>
<p>The info they give may be a little outdated by now, though...</p>
</div>
<h2>News</h2>
<div class="sectiontext">
<p>Version 1.7 is out: Bug-fix release. Introduces the <code>getState()</code> JavaScript function.</p>
<p>Now with "News" section!</p>
</div>
</div>
</body>
</html>