Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>Echo Nest + Spotify Play Button 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'> Echo Nest + Spotify Play Button Demo</h1>
<div class ='info'>
A demo of how the
<a href="http://developer.echonest.com/docs/v4/playlist.html#static">Echo Nest playlist API</a>
can work with the new Spotify Widget. See <a
href="http://musicmachinery.com/2012/04/11/the-spotify-play-button-a-lightening-demo/">MusicMachinery</a> for more
details.
This version uses multiple single-track players. Also see the <a href="SpotifyTrackList.html">single multi-track
player version</a>.
</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>
<button value="go" id="go" name="go" disabled onclick="newArtist()"> Go </button>
<div id="info"> </div>
<div id="all_results">
<div id='tracks'>
<h2> The Playlist</h2>
<div id="results"> </div>
</div>
</div>
</body>
<script type="text/javascript">
jQuery.ajaxSettings.traditional = true;
var embed = '<iframe src="https://embed.spotify.com/?uri=TRACK_URI" style="width:300px; height:380px;" frameborder="0" allowTransparency="true">';
function fetchArtistPlaylist(artist, wandering, variety) {
var url = 'http://developer.echonest.com/api/v4/playlist/static?api_key=FHPFXUKUGHZWWUXPR&callback=?';
$("#all_results").hide();
info("Creating the playlist ...");
$.getJSON(url, { 'artist': artist, 'format':'jsonp',
'bucket': [ 'id:spotify-WW', 'tracks'], 'limit' : true,
'results': 12, 'type':'artist-radio', 'variety' : variety,
'distribution' : wandering ? 'wandering' : 'focused' }, function(data) {
info("");
$("#results").empty();
$("#all_results").show();
for (var i = 0; i < data.response.songs.length; i++) {
var song = data.response.songs[i];
var tid = song.tracks[0].foreign_id.replace('-WW', '');
var tembed = embed.replace('TRACK_URI', tid);
var li = $("<span>").html(tembed);
$("#results").append(li);
}
});
}
function newArtist() {
var artist = $("#artist").val();
fetchArtistPlaylist(artist, false, .2);
}
function info(txt) {
$("#info").text(txt);
}
$(document).ready(function() {
$("#go").removeAttr("disabled");
$("#all_results").hide();
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment