Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100755 192 lines (182 sloc) 9.089 kb
b051e48 @jaipandya open graph namespace declaration
authored
1 <!doctype html>
1baaec8 @jaipandya hello world
authored
2 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
4 <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
5 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
b051e48 @jaipandya open graph namespace declaration
authored
6 <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#>
1baaec8 @jaipandya hello world
authored
7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
fa6f01e @jaipandya changed the tagline of the project
authored
10 <title>Beatbar - Media player that beats in the browser address bar</title>
1838971 @jaipandya text changes
authored
11 <meta name="description" content="The big O inside the address bar represents the current mouse position. Move the mouse pointer on the document to left and right to move O in the corresponding directions. When it appears over the controls, click the mouse button to take an action.">
1baaec8 @jaipandya hello world
authored
12 <meta name="author" content="Jai Pandya">
13
14 <meta name="viewport" content="width=device-width">
15
16 <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
17 <link rel="stylesheet" href="css/bootstrap.css">
18 <link rel="stylesheet" href="css/bootstrap-responsive.css">
19 <link rel="stylesheet" href="css/style.css">
20
21 <!-- open graph meta tags -->
d331ed5 @jaipandya changed open graph page title
authored
22 <meta property="og:title" content="Beatbar - media player that beats in the browser address bar" />
aeb8fef @jaipandya fixing open graph warnings
authored
23 <meta property="og:description" content="The big O inside the address bar represents the current mouse position. Move the mouse pointer on the document to left and right to move O in the corresponding directions. When it appears over the controls, click the mouse button to take an action." />
1baaec8 @jaipandya hello world
authored
24 <meta property="og:type" content="website" />
aeb8fef @jaipandya fixing open graph warnings
authored
25 <meta property="og:url" content="http://jaipandya.github.com/beatbar/" />
1baaec8 @jaipandya hello world
authored
26 <meta property="og:image" content="http://jaipandya.github.com/beatbar/img/facebook.jpg" />
30c4b9c @jaipandya adding fb admins section
authored
27 <meta property="fb:admins" content="621098783" />
1baaec8 @jaipandya hello world
authored
28
29 <script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
30 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
31 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
32 <!-- include SM2 library -->
33 <script type="text/javascript" src="js/libs/soundmanager/soundmanager2.js"></script>
34 <script src="js/libs/keymaster.js"></script>
35
36 <!-- Initialize soundManager -->
37 <script type="text/javascript">
38 soundManager.url = 'swf/';
39 soundManager.flashVersion = 9; // optional: shiny features (default = 8)
40 soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
41 soundManager.debugFlash = false;
42 soundManager.debugMode = false;
43 soundManager.useConsole = true;
44 </script>
d6cb386 @jaipandya added docco generated documentation
authored
45 <script src="js/beatbar.js"></script>
1baaec8 @jaipandya hello world
authored
46 <script src="http://connect.soundcloud.com/sdk.js" type="text/JavaScript"></script>
47 <script type="text/JavaScript">
48 // Initialize SoundCloud API
49 // Get some tracks
50 // Initialize Beatbar with the returned array of track URLs
51 var tracks, beatbar;
52 SC.initialize({
53 client_id: "04dd99b58b8be275394ad3ca3dd660e4"
54 });
55 SC.get('/tracks', {
56 'tags':'country',
57 'filter':'public,streamable',
58 'order':'hotness',
59 'bpm[to]':120,
60 'duration[to]':80000
61 }, function(data){
62 tracks = $.map(data, function(track, i){
63 return track.stream_url + '?client_id=' + SC.options.client_id;
64 });
65 soundManager.onready(function() {
66 beatbar = new Beatbar();
67 });
68 }
69 );
70 $(document).ready(function(){
71 $('#play-button').click(function(){
72 var config = {
73 playlist : tracks
74 };
75 beatbar.init(config);
76 $(this).addClass('disabled');
77 })
78 });
79 </script>
80 <!-- Google analytics tracking code -->
81 <script type="text/javascript">
82
83 var _gaq = _gaq || [];
84 _gaq.push(['_setAccount', 'UA-3405077-23']);
85 _gaq.push(['_trackPageview']);
86
87 (function() {
88 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
89 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
90 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
91 })();
92
93 </script>
94 </head>
95 <body>
2e6da09 @jaipandya added twitter and facebook buttons
authored
96 <!-- facebook SDK-->
97 <div id="fb-root"></div>
98 <script>(function(d, s, id) {
99 var js, fjs = d.getElementsByTagName(s)[0];
100 if (d.getElementById(id)) return;
101 js = d.createElement(s); js.id = id;
102 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=230145113756041";
103 fjs.parentNode.insertBefore(js, fjs);
104 }(document, 'script', 'facebook-jssdk'));</script>
105 <!-- twitter SDK -->
106 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
1baaec8 @jaipandya hello world
authored
107 <div class="container">
108 <div class='masthead'>
109 <img id='arrow' src='img/arrow.jpg' width='174' height='199' />
110 <div class="intro">
111 <a id='play-button' class="btn btn-large btn-success" href="#">Start playing</a>
112 <h1>Beatbar</h1>
2e6da09 @jaipandya added twitter and facebook buttons
authored
113 <div class='social row'>
114 <div class='span1 offset5 fblike'>
115 <fb:like send="false" layout="button_count" width="200" show_faces="false"></fb:like>
116 </div>
117 <div class='span1 tweetbtton'>
1838971 @jaipandya text changes
authored
118 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jaipandya.github.com/beatbar" data-text="Beatbar - a media player that beats in the browser address bar" data-via="jaipandya" data-related="jaipandya">Tweet</a>
2e6da09 @jaipandya added twitter and facebook buttons
authored
119 </div>
120 </div>
1d89a9e @jaipandya text changes
authored
121 <p>Media player that beats in the browser address bar</p>
1baaec8 @jaipandya hello world
authored
122 </div>
123 <img src='img/screenshot.jpg' width='1140' height='294' />
124 </div>
125 <div class="description row">
126 <div class='span8 offset2'>
127 <h2>Usage</h1>
128 <p>
cb13841 @jaipandya text changes
authored
129 The big O inside the address bar represents the current mouse position.
1baaec8 @jaipandya hello world
authored
130 Move the mouse pointer on the document to left and right to move O in the corresponding directions.
fa6f01e @jaipandya changed the tagline of the project
authored
131 When it appears over the controls, click the mouse button to take an action.<br />
1baaec8 @jaipandya hello world
authored
132 </p>
133 <h2>Keyboard shortcuts</h2>
134 <table class="table table-bordered">
135 <thead>
136 <tr>
137 <th>Key</th>
138 <th>Description</th>
139 </tr>
140 </thead>
141 <tbody>
142 <tr>
143 <td><span class="label">p / k</span></td>
144 <td>Previous</td>
145 </tr>
146 <tr>
147 <td><span class="label">n / j</span></td>
148 <td>Next</td>
149 </tr>
150 <tr>
151 <td><span class="label">Space</span></td>
152 <td>Play / Pause</td>
153 </tr>
154 <tr>
155 <td><span class="label">Right</span></td>
156 <td>Seek forward by 5 seconds</td>
157 </tr>
158 <tr>
159 <td><span class="label">Left</span></td>
160 <td>Seek backward by 5 seconds</td>
161 </tr>
162 <tr>
163 <td><span class="label">Up / Down</span></td>
164 <td>Increase / Decrease volume</td>
165 </tr>
166 </tbody>
167 </table>
168 <h2>FAQs</h2>
169 <p class='faq'>
170 <strong>Q</strong>: How does it work?<br />
171 <strong>A</strong>: Beatbar uses <a href="http://www.schillmania.com/projects/soundmanager2/">soundManager</a> awesomeness to play audio. Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single JavaScript API. The player streams audio from <a href="http://soundcloud.com">SoundCloud</a> using their JS SDK.<br />
172 </p>
173
174 <p class='faq'>
175 <strong>Q</strong>: Why inside address bar?<br />
a5d087c @jaipandya Added some content in the README and put documentation links on homepage
authored
176 <strong>A</strong>: Because <a href="http://twitter.com/cameronmcefee">@cameronmcefee</a> and <a href="http://twitter.com/probablycorey">@probablycorey</a> had left this experiment for me. (Read <a href="http://cameronmcefee.com/parallax-url">parallex URL</a> and <strong>URL hunter</strong>)<br />
177 </p>
178
179 <p class='faq'>
180 <strong>Q</strong>: Source code?<br />
920b142 @jaipandya fixed link pointing to github repo
authored
181 <strong>A</strong>: Check out <a href="http://jaipandya.github.com/beatbar/docs/beatbar.html">annotated source code</a> or explore it on <a href="http://github.com/jaipandya/beatbar">github</a>.
1baaec8 @jaipandya hello world
authored
182 </p>
183 </div>
184 </div>
185 <div class="footer">
186 <p>
e9318dd @jaipandya chipping in my twitter handle in the footer
authored
187 <a href="http://jai.im">Jai Pandya</a> | <a href="http://twitter.com/jaipandya">@jaipandya</a> | <a href='http://github.com/jaipandya'>Fork me on github</a>
1baaec8 @jaipandya hello world
authored
188 </p>
189 </div>
190 </div>
191 </body>
192 </html>
Something went wrong with that request. Please try again.