-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
168 lines (145 loc) · 7.32 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>bbplayer by darrenderidder</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<link rel="stylesheet" href="css/bbplayer-minimal.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>bbplayer</h1>
<p>A modern, minimalist html5 audio player.</p>
<p class="view"><a href="https://github.com/73rhodes/bbplayer">View the Project on GitHub <small>darrenderidder/bbplayer</small></a></p>
<ul>
<li><a href="https://github.com/73rhodes/bbplayer/zipball/master">Download <strong>ZIP File</strong></a></li>
<li><a href="https://github.com/73rhodes/bbplayer/tarball/master">Download <strong>TAR Ball</strong></a></li>
<li><a href="https://github.com/73rhodes/bbplayer">View On <strong>GitHub</strong></a></li>
</ul>
</header>
<section>
<h2>
<a name="demo" class="anchor" href="#demo"><span class="octicon octicon-link"></span></a>Demo</h2>
<div class="bbplayer">
<span class="bb-rewind"></span>
<span class="bb-play"></span>
<span class="bb-forward"></span>
<div class="playerWindow">
<div class="bb-track-display">
<span class="bb-trackTime">--:--</span>
<span class="bb-trackTitle"> </span>
<span class="bb-trackLength">--:--</span>
</div>
<div class="bb-album-display">
<span class="bb-artist">Brian Browne Trio</span> -
<span class="bb-album">Blue Browne</span>
</div>
</div>
<!--
<span class="bb-albumCover"> </span>
-->
<audio loop>
<source
src="media/Blue Browne.ogg" type="audio/ogg"
data-album="Blue Browne"
data-artist="Brian Browne Trio"
data-image="media/Blue Browne small.jpg"/>
<source
src="media/Blue Browne.mp3" type="audio/mpeg"
data-album="Blue Browne"
data-artist="Brian Browne Trio"
data-image="media/Blue Browne small.jpg"/>
<source
src="media/Georgia.ogg" type="audio/ogg"
data-album="Blue Browne"
data-artist="Brian Browne Trio"
data-image="media/Beatles small.jpg"/>
<source
src="media/Georgia.mp3" type="audio/mpeg"
data-album="Blue Browne"
data-artist="Brian Browne Trio"
data-image="media/Beatles small.jpg"/>
HTML5 Audio Not Available
</audio>
<!--
<div>Optional debug panel:</div>
<div class="bb-debug"></div>
-->
</div>
<br/><br/>
<!--
<p><a href="http://darrenderidder.github.com/bbplayer"><img src="https://lh3.ggpht.com/-tC8Zj6Bpg04/UcMquJhtiLI/AAAAAAAABgI/cXg6RtQrgMc/s1600/bbplayer.png" alt="bbplayer"></a></p>
-->
<h2>
<a name="about" class="anchor" href="#about"><span class="octicon octicon-link"></span></a>About</h2>
<p>bbplayer is a minimalist HTML5 Audio player. With bbplayer you can:</p>
<ul>
<li>make a playlist of tracks</li>
<li>design your own buttons or use the ones included</li>
<li>put more than one player on a page, but them play one at a time</li>
<li>support all browsers with MP3 and OGG formats</li>
</ul><p>bbplayer uses CSS classes. Start with a <em>bbplayer</em> class containing controls like
<em>bb-rewind</em>, <em>bb-play</em>, <em>bb-forward</em>, etc. and the HTML5 <em>audio</em> element; bbplayer.js
takes care of the rest.</p>
<h2>
<a name="how-to" class="anchor" href="#how-to"><span class="octicon octicon-link"></span></a>How-to</h2>
<p>
Add the stylesheet in the `head` of your HTML page:
</p>
<div class="highlight highligh-HTML"><pre>
<span class="nt"><</span>link <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"css/bbplayer.css"</span><span class="nt">></span>
</pre></div>
<p>
Add controls, audio and sources:
</p>
<div class="highlight highlight-HTML"><pre><span class="nt"><div</span> <span class="na">class=</span><span class="s">"bbplayer"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"bb-rewind"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"bb-play"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"bb-forward"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"bb-trackTime"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"bb-trackLength"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"bb-trackTitle"</span><span class="nt">></span></span>
<span class="nt"><audio></span>
<span class="c"><!-- </span>
<span class="c"> playlist of audio files in MP3 and</span>
<span class="c"> OGG format for cross browser support</span>
<span class="c"> --></span>
<span class="nt"><source</span> <span class="na">src=</span><span class="s">"media/bluebrowne.mp3"</span><span class="nt">/></span>
<span class="nt"><source</span> <span class="na">src=</span><span class="s">"media/bluebrowne.ogg"</span><span class="nt">/></span>
<span class="nt"><source</span> <span class="na">src=</span><span class="s">"media/georgia.mp3"</span><span class="nt">/></span>
<span class="nt"><source</span> <span class="na">src=</span><span class="s">"media/georgia.ogg"</span><span class="nt">/></span>
<span class="nt"></audio></span>
<span class="nt"></div></span>
</pre></div>
<p>Then include <strong>bbplayer.js</strong>:</p>
<div class="highlight highlight-HTML"><pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"js/bbplayer.js"</span><span class="nt">></script></span>
</pre></div>
<p>See
<strong><a href="http://73rhodes.github.io/bbplayer/bbplayer.html">bbplayer.html</a></strong>
for an example.</p>
</section>
<footer>
<p>This project is maintained by <a href="https://github.com/73rhodes">73rhodes</a></p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
</footer>
</div>
<script src="javascripts/scale.fix.js"></script>
<script src="js/bbplayer.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2831300-4', '73rhodes.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>