/
index.html
345 lines (316 loc) · 15.1 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
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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!doctype html>
<html itemscope itemtype="http://schema.org/Product">
<head>
<title>Project Wrltzr</title>
<meta property="og:title" content="Project Wrltzr"/>
<meta property="og:url" content="http://raibaz.github.com/wrltzr"/>
<meta property="og:image" content="http://raibaz.github.com/wrltzr/img/logo.png"/>
<meta itemprop="name" content="Project Wrltzr">
<meta itemprop="description" content="The most intelligent webradio in the world">
<script src="util/console.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.youtube.com/player_api" type="text/javascript"></script>
<!-- Soundcloud custom player -->
<link rel="stylesheet" href="lib/soundcloud/sc-player-standard.css"/>
<script async src="lib/soundcloud/soundcloud.player.api.js" type="text/javascript"></script>
<script async src="lib/soundcloud/sc-player.js" type="text/javascript"></script>
<!-- jQuery UI -->
<script src="lib/jquery-ui/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/jquery-ui/overcast/jquery-ui-1.8.18.custom.css"/>
<!-- Bootstrap -->
<script async src="lib/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="smartradio.css">
<!-- Mixeeba integration -->
<script type='text/javascript'>
// Setup options (more in step 4 below)
var opts = {
_emailId : 'raibaz@gmail.com',
_showFormat : false,
_introCopy: '<b>Buy from:</b>'
};
window._mixeebaify = opts;
// Add the Mixeeba JavaScript via an asynchronous script tag
(function() {
mixeebaScript = document.createElement('script');
mixeebaScript.type = 'text/javascript';
mixeebaScript.async = true;
if (document.location.protocol == 'http:') {
mixeebaScript.src = 'http://js.mixeeba.fm/track';
s = document.getElementsByTagName('script')[0];
s.parentNode.appendChild(mixeebaScript)
}
})();
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#search_tags').click(do_search_tags);
$('#user-inputs').submit(do_search_tags);
$('#skip_song').click(skip_song);
$('#delete_next_song').click(do_delete_next_song);
$('#like_song').click(like_song);
$('#dislike_song').click(dislike_song);
$('#play_random_song').click(do_play_random_song);
$('#reload_embed').click(do_reload_embed);
$('#use_simple_scores').click(do_use_simple_scores);
$('#use_complex_scores').click(do_use_complex_scores);
$.getScript('smartradio.js', function() {
console.log('finished loading smartradio.js');
init_settings();
});
});
function do_search_tags() {
var query = $('#query').val();
if(query.length == 0) {
return;
}
console.log(query);
$('#results').html('');
$('#song-data').show();
$('#commands').show();
$('#song_commands').show();
$('#ads').show();
available_songs = {};
search_type = $('#search_type').val();
$('#available_services :checked').each(function(index, value) {
$(this).attr('pending', 'true');
if(search_type == "artist") {
get_service($(this).attr('name')).search_artist(query, search_callback);
} else if(search_type == 'tag') {
get_service($(this).attr('name')).search_tags(query, search_callback);
} else {
get_service($(this).attr('name')).search_all(query, search_callback);
}
});
_gaq.push(['_trackEvent', 'user_inputs', 'search', query + "_" + search_type, 0, true]);
return false;
}
function search_callback(results) {
if(typeof(results) == 'string' ) {
$('#'+results).removeAttr('pending');
console.log("Removed pending for service " + results);
} else {
add_songs(results);
$('#' + results[0].service.name).removeAttr('pending');
console.log("Removed pending for service " + results[0].service.name);
}
var can_go = true;
$('#available_services :checked').each(function(index, value) {
if($(this).attr('pending')) {
console.log("Found service " + $(this).attr('name') + " pending");
can_go = false;
return false;
}
});
if(!can_go) {
return;
}
compute_next_song();
play_next_song();
}
function skip_song() {
play_next_song();
_gaq.push(['_trackEvent', 'user_inputs', 'skip_song', current_song.key, 0, true]);
return false;
}
function do_delete_next_song() {
delete_next_song();
_gaq.push(['_trackEvent', 'user_inputs', 'delete_next_song', next_song.key, 0, true]);
return false;
}
function like_song() {
update_all_scores(1);
$('#like_song').tooltip('show');
setTimeout(function() {
$('#like_song').tooltip('hide');
}, 2500);
_gaq.push(['_trackEvent', 'user_inputs', 'like_song', current_song.key, 0, true]);
return false;
}
function dislike_song() {
current_song.disliked = true;
update_all_scores(-1);
$('#dislike_song').tooltip('show');
setTimeout(function() {
$('#dislike_song').tooltip('hide');
}, 2500);
_gaq.push(['_trackEvent', 'user_inputs', 'dislike_song', current_song.key, 0, true]);
return false;
}
function do_play_random_song() {
play_random_song();
_gaq.push(['_trackEvent', 'user_inputs', 'play_random_song', current_song.key, 0, true]);
return false;
}
function do_reload_embed() {
reload_embed();
_gaq.push(['_trackEvent', 'user_inputs', 'reload_embed', current_song.key, 0, true]);
return false;
}
function do_use_simple_scores() {
$('#use_simple_scores').button('toggle');
global_configuration.use_normalized_scores = true;
add_similar_songs();
compute_next_song();
return false;
}
function do_use_complex_scores() {
$('#use_complex_scores').button('toggle');
global_configuration.use_normalized_scores = false;
add_similar_songs();
compute_next_song();
return false;
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1866848-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!-- FB SDK -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=393236134020452";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#modal_whats_this" id="whats_this" data-toggle="modal">What's this?</a></li>
</ul>
<ul class="nav pull-right social-sharers">
<li><div class="fb-like" data-href="http://raibaz.github.com/wrltzr" data-send="false" data-layout="button_count" data-width="120" data-show-faces="false"></div></li>
<li><div class="g-plusone" data-size="medium" data-href="http://raibaz.github.com/wrltzr/" style="position: relative; top: 3px;"></div></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div id="top" class="row-fluid">
<div class="row-fluid">
<div id="heading" class="span7">
<img id="logo" src="img/logo.png"/><h1>Wrltzr</h1>
</div>
<div class="span5">
<div class="well">
<form id="user-inputs" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="query">What do you want to listen to?</label><div class="controls"><input type="text" id="query" name="query"/></div>
</div>
<div class="control-group">
<label class="control-label" for="search_type">You are looking for: </label><div class="controls"><select id="search_type" name="search_type"><option value="artist">Artist</option><option value="tag">Tag</option></select></div>
</div>
</form>
</div>
</div>
</div>
<div class="row-fluid" id="controls">
<div class="span7">
<div id="player"> </div>
<div class="well" id="song-data">
<div id="song_info" class="mixeebaify-track"> </div>
<div id="song_commands">Like this song? <a href id="like_song" title="Ok, you will probably listen to more songs like this one!" data-trigger="manual">Yes</a>/<a href id="dislike_song" title="Ok, you won't hear this song again and similar ones will be less likely to appear!" data-trigger="manual">No</a></div>
<div id="sharers">
<span id="twitter-sharer">
<iframe allowtransparency="true" id="twitter-iframe" frameborder="0" scrolling="no" style="width:70px; height:20px;"></iframe>
</span>
<span id="facebook-sharer">
<a id="facebook-share-link" target="_blank" href=""><img src="img/facebook-share-icon.gif" alt="Facebook share"/></a>
</span>
</div>
<div id="commands">
<div id="next_song">Next song: <span id="next_song_info"> </span> <a href id="skip_song">Play</a> / <a href id="delete_next_song">Delete</a></div>
<div id="change_embed">[Not the right song for this title? <a href id="reload_embed">Search for it again</a>]</div>
<br/>
<div id="random_song">Play a <a href id="play_random_song">random song</a></div>
</div>
</div>
</div>
<div class="span5">
<div class="sliders well">
<fieldset id="available_services"> </fieldset>
<span class="service-horizontal">
<span style="float: left">Impress me!</span><div style="float: left" id="artist_bump"> </div><span style="float: left">Be diligent</span><div class="settings-icon"><i class="icon-question-sign icon-white service-icon" title="Do you want to listen to stuff that closely resembles what you searched for, or are you open to serendipity and music you probably didn't know of? Use this slider to control the nature of your music stream"></i></div>
</span>
</div>
<!--div class="sliders well" id="settings-well">
<fieldset id="settings">
<span class="service" id="scoring-method" style="display: none">
<span>Scoring method:</span>
<div class="btn-group" id="scoring-buttons" data-toggle="buttons-radio">
<button class="btn btn-inverse btn-mini active" id="use_simple_scores">Simple</button>
<button class="btn btn-inverse btn-mini" id="use_complex_scores">Complex</button>
</div>
<div class="settings-icon"><i class="icon-question-sign icon-white service-icon" title="If set to 'simple', the choice of the next song to play will take into account only the order in which songs are returned by each service when searching; Otherwise, if set to 'complex', it will take into account more complex parameters when available, such as the number of users favoriting each song or the song hotness, as returned by the services."></i></div>
</span>
</fieldset>
</div-->
<div class="control-group">
<input type="button" class="btn" id="search_tags" value="Go!"/>
</div>
<div class="" id="ads">
<script type="text/javascript">
google_ad_client = "pub-0134046674271031";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text_image";
google_color_border = "CCCCCC";
google_color_bg = "#2C2C2C";
google_color_link = "CCCCCC";
google_color_text = "CCCCCC";
google_color_url = "666666";
google_ui_features = "rc:6";
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</div>
</div>
</div>
<div id="footer" class="">
<div id="footer-content" class="">
<span>Project Wrltzr is a marvellous idea brought to life by <a href="http://www.raibaz.com/">Raibaz</a>. If you have any suggestions, feature requests, or bug reports please feel free to post them on <a href="http://github.com/Raibaz/wrltzr">GitHub</a>.</span>
</div>
</div>
<ul id="results"/>
</div>
<div class="modal fade" id="modal_whats_this">
<div class="modal-header">
<h2>What's this?</h2>
</div>
<div class="modal-body">
Wrltzr (pronounced "Wurlitzer", like the famous jukebox brand) is a project for a smart radio that combines intelligence for many music streaming services, attempting to give you the best possible music stream related to what you want to listen to.<br/><br/>
Using a single service often provides a limited experience, due to users tagging music without any sense or to music catalogs being too limited; by combining knowledge coming from different services, Project Wrltzr is able to provide you a coherent yet serendipitous listening experience.<br/><br/>
Besides, you can customize your radio experience to make it suit your taste: by moving the sliders for each music service, you can prioritize results coming from one or another, in case you feel closer to a service or you don't like what a service is proposing you, and with the controls on the right you can have your music respond even better to your own taste: the music you will listen to is chosen wisely by the amazing intelligence behind Wrltzr, but it is also always customizable to fit your needs.<br/><br/>
Please note, however, that this is a project under <strong>heavy</strong> development, so expect new features and bugs to come and go at a quick pace, and if you want, please provide support, contributions or ideas: they will be extremely welcome.
</div>
</div>
<div class="modal fade" id="modal_motivational">
<div class="modal-header">
<h2>Do you like this radio?</h2>
</div>
<div class="modal-body">
Please, take some time to support this project by clicking on one of the ads. Show me some love!
</div>
</div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>