|
<!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> |
