Skip to content

@plamere /PlaylistWithDistribution.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Demo of of Echo Nest playlist generation with variety and distribution
!DOCTYPE html>
<html>
<head>
<title>Playlist Distribution 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="https://www.google.com/jsapi"></script>
<link type="text/css" href="demo_styles.css" rel="stylesheet" />
</head>
<body>
<h1 id='title'> Playlist Distribution Demo</h1>
<div class ='info'>
This is a demonstration of how the
<a href="http://developer.echonest.com/docs/v4/playlist.html#static">Echo Nest playlist API </a>
gives you control over the the number and type of artists appearing in a playlist.
</div>
<br>
<span class='box'> Seed artist:
<input title="Artist" type="text" size=24 id="artist"
onkeydown="if (event.keyCode == 13) newArtist()" name="artist" value='weezer'/>
</span>
<span class='box'> Variety:
<span id='range'> min <input type="range" name="variety" id=variety value='3' min="1" max="10" /> max
</span>
</span>
<span class='box'> Distribution:
<input type="radio" name="distribution" id="wandering" value="wandering" checked /> wandering
<input type="radio" name="distribution" id="focused" value="focused" /> focused
</span>
<button value="go" id="go" name="go" disabled onclick="newArtist()"> Go </button>
<div id="info"> </div>
<div id="all_results">
<div id='artists'>
<div id="histogram2"> </div>
</div>
<div id='tracks'>
<h2> The Playlist</h2>
<ol id="results"> </ol>
</div>
</div>
</body>
<script type="text/javascript">
$("#all_results").hide();
google.load("visualization", "1", {packages:["corechart"]});
function fetchArtistPlaylist(artist, wandering, variety) {
var url = 'http://developer.echonest.com/api/v4/playlist/static?api_key=GETYOUROWNKEY&callback=?';
$("#all_results").hide();
info("Creating the playlist ...");
$.getJSON(url, { 'artist': artist, 'format':'jsonp',
'results': 100, 'type':'artist-radio', 'variety' : variety,
'distribution' : wandering ? 'wandering' : 'focused' }, function(data) {
info("");
$("#results").empty();
$("#all_results").show();
var artists = {};
for (var i = 0; i < data.response.songs.length; i++) {
var song = data.response.songs[i];
if (! (song.artist_name in artists) ) {
artists[song.artist_name] = 0;
}
artists[song.artist_name]++;
var li = $("<li>").html("<span class='title'>" + song.title + "<span>"
+ " by <span class='artist'>" + song.artist_name + "</span>");
$("#results").append(li);
}
showArtistHistogram(artists);
});
}
function showArtistHistogramTable(artist) {
$("#histogram").empty();
var keys = [];
for (a in artists) {
console.log(a);
keys.push(a);
}
keys.sort(function(a,b) { return artists[b] - artists[a]; });
var ul = $("<ul>");
console.log(keys);
for (var i in keys) {
var artist = keys[i];
var li = $("<li>").html(artists[artist] + " " + "<span class='artist'>" + artist + "</span>");
$("#histogram").append(li);
}
}
function showArtistHistogram(artists) {
var keys = [];
for (a in artists) {
keys.push(a);
}
keys.sort(function(a,b) { return artists[b] - artists[a]; });
var rows = [];
for (var i in keys) {
var name = keys[i];
var count = artists[name];
rows.push( [name, count] );
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Artist');
data.addColumn('number', 'Count');
data.addRows(rows);
var options = {
title: 'Artist Histogram',
height: rows.length * 32,
width: 500,
fontSize: 12,
vAxis: {title: 'Artist', titleTextStyle: {color: 'blue'}},
titleTextStyle: {fontSize:18},
chartArea: { top: 32 },
legend: { position: 'none' },
};
var chart = new google.visualization.BarChart(document.getElementById('histogram2'));
chart.draw(data, options);
}
function newArtist() {
var artist = $("#artist").val();
var wandering = $("#wandering").is(':checked');
var variety = $("#variety").val() / 10.0;
fetchArtistPlaylist(artist, wandering, variety);
}
function info(txt) {
$("#info").text(txt);
}
$(document).ready(function() {
$("#go").removeAttr("disabled");
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.