Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
159 lines (139 sloc) 5.344 kb
<!DOCTYPE html>
<html>
<head>
<title>The Genre Radio Demo</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="../common/get_key_with_callback.js"></script>
<script src="../common/chosen.jquery.min.js" type="text/javascript"></script>
<link type="text/css" href="genre_styles.css" rel="stylesheet" />
<link rel="stylesheet" href="../common/chosen.css" />
</head>
<body>
<img width="100%" src='banner.png'>
<div id='content'>
<h1 id='title'> The Echo Nest Genre Radio Demo </h1>
<div class ='info'>
This web app creates genre radio for Spotify using the Echo Nest Playlist API. <br>For more
information see: <a href="http://blog.echonest.com">Creating Genre-Radio Playlists
with the Echo Nest API </a>.
</div>
<br>
<div>
<div id='seed'>
<select id='genre' data-placeholder="Choose a genre" class="chzn-select" style="width:350px;" tabindex="2">
<option value=""></option>
</select>
<button value="go" id="go" name="go" onclick="newGenre()"> Go </button>
</div>
<div id="info"> </div>
<div id="all_results">
<div id='tracks'>
<div id="results"> </div>
</div>
</div>
<div id='footer'>
Powered by <a href="http://the.echonest.com">The Echo Nest</a> and <a href="http://spotify.com">Spotify</a>.
<a href="https://github.com/plamere/en-demos/blob/master/genre/genre.html">Get the source</a>
</div>
</div>
</body>
<script type="text/javascript">
jQuery.ajaxSettings.traditional = true;
var apiKey = 'NO_API_KEY';
var host = 'http://developer.echonest.com/'
var embed = '<iframe src="https://embed.spotify.com/?uri=spotify:trackset:PREFEREDTITLE:TRACKS" style="width:640px; height:540px;" frameborder="0" allowtransparency="true"></iframe>';
function fetchGenrePlaylist(genre, wandering, variety) {
var url = host + 'api/v4/playlist/static?api_key=' + apiKey;
$("#all_results").hide();
info("Creating the playlist ...");
$.getJSON(url, { 'genre': genre, 'format':'json',
'bucket': [ 'id:spotify', 'tracks'], 'limit' : true,
'variety' : variety,
'dmca' : true,
'results': 12, 'type':'genre-radio', },
function(data) {
info("");
$("#results").empty();
if (! ('songs' in data.response)) {
info("Can't find that genre");
} else {
history.replaceState({}, document.title, '?genre=' + genre);
info(genre + ' playlist');
$("#all_results").show();
var tracks = "";
for (var i = 0; i < data.response.songs.length; i++) {
var song = data.response.songs[i];
var tid = song.tracks[0].foreign_id.replace('spotify:track:', '');
tracks = tracks + tid + ',';
}
var tembed = embed.replace('TRACKS', tracks);
tembed = tembed.replace('PREFEREDTITLE', genre + ' playlist');
var li = $("<span>").html(tembed);
$("#results").append(li);
}
}).error(
function() {
info("Sorry, trouble making a playlist for the genre " + genre);
} );
}
function fetchGenres() {
var url = host + 'api/v4/artist/list_genres?api_key=' + apiKey;
$.getJSON(url, { 'format':'json'},
function(data) {
var genres = data.response.genres;
var glist = $('#genre');
for (var i = 0, max = genres.length; i < max; i++) {
var genre = genres[i].name;
var opt = $("<option>").attr('value', genre).text(genre);
glist.append(opt);
}
$(".chzn-select").chosen();
});
}
function newGenre() {
var genre = $("#genre").val();
if (genre.length > 0) {
fetchGenrePlaylist(genre, false, .2);
} else {
info("You must pick a genre");
}
}
function info(txt) {
$("#info").text(txt);
}
function processParams() {
var params = {};
var q = document.URL.split('?')[1];
if(q != undefined){
q = q.split('&');
for(var i = 0; i < q.length; i++){
var pv = q[i].split('=');
var p = pv[0];
var v = pv[1];
params[p] = v;
}
}
if ('genre' in params) {
var genre = params['genre'];
genre = genre.replace(/%20/g, ' ');
fetchGenrePlaylist(genre, false, .2);
}
}
$(document).ready(function() {
// fetchApiKey will fetch the Echo Nest demo key for demos
// hosted on The Echo Nest, otherwise it fetch an empty key
fetchApiKey( function(api_key, isLoggedIn) {
if (!api_key) {
api_key = 'MY_ECHO_NEST_API_KEY';
}
apiKey = api_key;
$("#all_results").hide();
fetchGenres();
processParams();
$.ajaxSetup({
"error":function() { alert("error"); }
});
});
});
</script>
</html>
Jump to Line
Something went wrong with that request. Please try again.