forked from sydlawrence/suggestify
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (112 loc) · 4.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<title>Suggester</title>
<link rel="stylesheet" href="sp://import/css/adam.css">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<h1> Here's a generated track list from echo nest and the current track</h1>
<ul id="results"> </ul>
<script type="text/javascript">
// get the standard spotify api
var sp = getSpotifyApi(1);
// get the spotify models
var m = sp.require('sp://import/scripts/api/models');
// get the track that is currently playing
function getCurrentlyPlaying() {
var currentTrack = m.player.track;
// if nothing currently playing
if (currentTrack == null) {
console.log("No track currently playing");
}
// winner we have a track
else {
var track = currentTrack.data;
var artist = track.artists[0].name;
// fetch Suggestions
fetchSuggestions(artist, 20);
}
}
// play a track in the player
function playTrack(track) {
// play the track from it's uri, here you can pass the whole track object, but it will switch to album view away from the app
m.player.play(track.uri);
}
// using artist name and song name, find the spotify track
function fetchSpotifyTrack(artist,song) {
// build the search query
var query = artist + " " + song;
// using the search model
var search = new m.Search(query,function(results) {
// spotify may return more than one possible track
for (var i= 0; i< results.results.length;i++) {
// get the actual track
var track = results.results[i].data;
// check that the artist name is the same
if (track.artists && track.artists[0].name === artist) {
// check that the track name is the same
if (track.name === song) {
// create a list element
var li = $("<li/>");
// don't forget not all songs are available everywhere
if (track.availableForPlayback) {
var a = $("<a href='"+track.href+"'/>");
a.html(artist + " - " + song);
// play it on click
a.click(function() {
playTrack(track);
return false;
});
li.append(a);
} else {
li.html(artist + " - " + song);
// NOT AVAILABLE show in red
li.css('color','#f00')
}
// add the list item
$("#results").append(li);
// we no longer what to loop
break;
}
}
}
});
}
// fetch track suggestions from echonest
function fetchSuggestions(artist, size) {
var echoNestAPIKey = "GPQCPTGUIZ43M2FSV";
// find similar songs using echonest
var url = 'http://developer.echonest.com/api/v4/playlist/basic?api_key='+echoNestAPIKey+'&callback=?';
// in this demo i will only use artist-radio so that we don't need extra requests.
$.getJSON(url, {
artist: artist,
format: 'jsonp',
results: size,
type: 'artist-radio'
}, function(data) {
if (data.response && data.response.status.code === 0) {
$("#results").empty();
for (var i = 0; i < data.response.songs.length; i++) {
// we now have the echo nest song
var song = data.response.songs[i];
// fetch spotify tracks from these songs using their metadata api
fetchSpotifyTrack(song.artist_name, song.title);
}
} else {
info("failed getting results");
}
});
}
// when the track changes, we need to listen for an event
sp.trackPlayer.addEventListener("playerStateChanged", function (event) {
// if there is actually a song
if (event.data.curtrack) {
getCurrentlyPlaying();
}
});
// check on start
getCurrentlyPlaying();
</script>
</body>
</html>