This repository has been archived by the owner on Nov 8, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 10
/
demo.html
151 lines (114 loc) · 6.3 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Audio Test</title>
<link rel="stylesheet" href="css/audio.css">
</head>
<body>
<h1>HTML5 WP Audio Player</h1>
<p>This project is a version of the awesome <a href="http://wpaudioplayer.com/standalone/">WordPress Audio Player</a> by <a href="http://www.1pixelout.net/">Martin Laine</a> for browsers that support HTML5’s <code><audio></code> tag, with fallback to the original WP Audio Player for browsers that don’t.</p>
<p>Audio sample is <a href="http://palacecat.bandcamp.com/track/crookshanks">“Crookshanks” by Palace Cat</a>, via <a href="http://duplokat.tumblr.com/post/12695092003/geek-friday-ringtone">duplokat</a></p>
<p><em>See the standalone <a href="http://wpaudioplayer.com/standalone/">WordPress Audio Player</a> page for information using and configuring the Flash player.</em></p>
<h2>Standard</h2>
<div class="audio-js-box wp-css">
<audio class="audio-js" controls preload data-description="Palace Cat - Crookshanks">
<source src="audio/Palace Cat - Crookshanks.mp3" type="audio/mpeg">
<source src="audio/Palace Cat - Crookshanks.ogg" type="audio/ogg">
<source src="audio/Palace Cat - Crookshanks.wav" type="audio/wav">
<!-- Minimum width of player is 81px -->
<object type="application/x-shockwave-flash" data="WP-audio-player/player.swf" id="audioplayer576" height="24" width="81">
<param name="movie" value="WP-audio-player/player.swf">
<param name="FlashVars" value="playerID=audioplayer576&soundFile=audio/Palace%20Cat%20-%20Crookshanks.mp3&noinfo=no&titles=Crookshanks&artists=Palace%20Cat">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<p><a href="audio/Palace Cat - Crookshanks.mp3">Download this audio file.</a></p>
</object>
</audio>
</div>
<hr>
<h2>Standard (open at start)</h2>
<div class="audio-js-box wp-css open-at-start">
<audio class="audio-js" controls preload data-description="Palace Cat - Crookshanks">
<source src="audio/Palace Cat - Crookshanks.mp3" type="audio/mpeg">
<source src="audio/Palace Cat - Crookshanks.ogg" type="audio/ogg">
<source src="audio/Palace Cat - Crookshanks.wav" type="audio/wav">
<!-- Minimum width of player is 81px -->
<object type="application/x-shockwave-flash" data="WP-audio-player/player.swf" id="audioplayer576" height="24" width="81">
<param name="movie" value="WP-audio-player/player.swf">
<param name="FlashVars" value="playerID=audioplayer576&soundFile=audio/Palace%20Cat%20-%20Crookshanks.mp3&noinfo=no&titles=Crookshanks&artists=Palace%20Cat">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<p><a href="audio/Palace Cat - Crookshanks.mp3">Download this audio file.</a></p>
</object>
</audio>
</div>
<hr>
<h2>Right-to-Left (play button on left)</h2>
<div class="audio-js-box wp-css wp-rtl">
<audio class="audio-js" controls preload data-description="Palace Cat - Crookshanks">
<source src="audio/Palace Cat - Crookshanks.mp3" type="audio/mpeg">
<source src="audio/Palace Cat - Crookshanks.ogg" type="audio/ogg">
<source src="audio/Palace Cat - Crookshanks.wav" type="audio/wav">
<!-- Minimum width of player is 81px -->
<object type="application/x-shockwave-flash" data="WP-audio-player/player.swf" id="audioplayer576" height="24" width="81">
<param name="movie" value="WP-audio-player/player.swf">
<param name="FlashVars" value="playerID=audioplayer576&soundFile=audio/Palace%20Cat%20-%20Crookshanks.mp3&noinfo=no&titles=Crookshanks&artists=Palace%20Cat">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<p><a href="audio/Palace Cat - Crookshanks.mp3">Download this audio file.</a></p>
</object>
</audio>
</div>
<hr>
<h2>Right-to-Left (play button on left, open at start)</h2>
<div class="audio-js-box wp-css wp-rtl open-at-start">
<audio class="audio-js" controls preload data-description="Palace Cat - Crookshanks">
<source src="audio/Palace Cat - Crookshanks.mp3" type="audio/mpeg">
<source src="audio/Palace Cat - Crookshanks.ogg" type="audio/ogg">
<source src="audio/Palace Cat - Crookshanks.wav" type="audio/wav">
<!-- Minimum width of player is 81px -->
<object type="application/x-shockwave-flash" data="WP-audio-player/player.swf" id="audioplayer576" height="24" width="81">
<param name="movie" value="WP-audio-player/player.swf">
<param name="FlashVars" value="playerID=audioplayer576&soundFile=audio/Palace%20Cat%20-%20Crookshanks.mp3&noinfo=no&titles=Crookshanks&artists=Palace%20Cat">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<p><a href="audio/Palace Cat - Crookshanks.mp3">Download this audio file.</a></p>
</object>
</audio>
</div>
<hr>
<h2>The original Flash version</h2>
<object type="application/x-shockwave-flash" data="WP-audio-player/player.swf" id="audioplayer2" height="24" width="360">
<param name="movie" value="WP-audio-player/player.swf">
<param name="FlashVars" value="playerID=audioplayer2&soundFile=audio/Palace%20Cat%20-%20Crookshanks.mp3&noinfo=no&titles=Crookshanks&artists=Palace%20Cat">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<p><a href="audio/Palace Cat - Crookshanks.mp3">Download this audio file.</a></p>
</object>
<script src="js/audio.js"></script>
<script>
// Run the script on page load.
// If using jQuery
// $(function(){
// AudioJS.setup();
// });
// If using Prototype
// document.observe("dom:loaded", function() {
// AudioJS.setup();
// });
// If not using a JS library
// (function(){
// AudioJS.setup();
// });
// Since I'm calling this at the end of the HTML, I can probably get away
// with executing the setup without waiting for a load event.
AudioJS.setup(false, {controlsAtStart: true});
</script>
</body>
</html>