plamere/spotify-echo-nest-playbutton.html

## spotify-echo-nest-playbutton.html
<!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>
	<!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>