-
Notifications
You must be signed in to change notification settings - Fork 32
/
index.html
317 lines (286 loc) · 15 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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>The Echo Nest / Spotify Developer </title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="styles.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">The Echo Nest / Spotify APIs</a>
</div>
<div class="navbar-collapse collapse">
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>The Echo Nest / Spotify APIs</h1>
<p class="lead"> Build your music apps with the industry’s best music APIs. </p>
<div>
<img width="320px" src="images/logo.png">
<img width="240px" src="images/spotify.png">
</div>
</div>
<hr>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-6">
<h2> What's this? </h2>
<p>
The Echo Nest and Spotify APIs provides broad and deep data on millions of artists and songs, making it
easy for you to create an awesome listening experience for your users. You can tap into the power of the
tightly linked Echo Nest and Spotify APIs to build world-class music apps that take advantage of all of the
capabilities and deep data provided by both APIs. The Spotify and Echo Nest teams are working to make it as
easy as possible for developers to use the Spotify and The Echo Nest APIs together. In particular we’re
working to make sure that the Echo Nest has the most up-to-date view of the Spotify catalog
and you can use Spotify artist and track IDs in any Echo Nest call that accepts Echo Nest artist and track IDs.
</ul>
</p>
</div>
<div class="col-md-6">
<h2> Getting Started </h2>
To get started, you’ll need to take two quick steps. It should take less than a minute!
<p>
<ol class="btn-grp">
<a class="btn btn-block btn-primary" href="https://developer.echonest.com/account/register">
Register for an Echo Nest API key </a>
<a class="btn btn-block btn-success"
href="https://developer.spotify.com/my-applications/#!/applications">
Register your Spotify application </a>
</ol>
Once you've created an account, have received your API key and application credentials, check out some of
our demos, take a look at the examples, get inspiration from the labs, download one of our client libraries
and start building cool stuff.
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<h2>Demos</h2>
<p>
We have a number of demonstration and example apps that show you how to do just about
anything possible with The Spotify and Echo Nest APIs, from retrieving basic artist data,
to advanced personalized, dynamic playlisting.
<h3> Examples </h3>
<p> The best way to understand an API is by diving in and seeing working examples in action. Check out the
examples on the Echo Nest / Spotify <a href="https://github.com/plamere/enspex">git repo</a>. </p>
<ul>
<li> <a href="http://static.echonest.com/enspex/web/ArtistBrowser/"> Similar Artist Browser</a>
Given a seed artist, this app shows images of similar artists.
<li> <a href="http://static.echonest.com/enspex/web/SimplePlaylist/"> Simple Playlist </a>
Creates an Echo Nest artist radio playlist with the
<a href="https://developer.spotify.com/technologies/widgets/spotify-play-button/">Spotify Play Button</a>.
<li> <a href="http://static.echonest.com/enspex/web/SimplePlaylistWebAPI/"> Simple Playlist with Web API</a>
Creates an Echo nest artist radio playlist using the
<a href="https://developer.spotify.com/web-api/">Spotify Web API</a>.
<li> <a href="http://static.echonest.com/enspex/web/ChillRadio/"> Chill Radio </a>
Creates an artist radio of low energy songs using the Spotify and Echo Nest APIs
<li> <a href="http://static.echonest.com/MyStarredItems/"> My Starred Items</a>
Demonstrates how to get the starred items for an authenticated user
<li> <a href="http://static.echonest.com/MySavedTracks/"> My Saved Tracks</a>
Demonstrates how to get the saved tracks for an authenticated user
<li> <a href="http://static.echonest.com/SortYourMusic/"> Sort Your Music</a>
Sort your playlists based upon Echo Nest parameters
</ul>
<h3> Demonstrations </h3>
These are more sophisticated apps that demonstrate the power of using The Echo Nest and the Spotify APIs together.
<ul>
<h3 id='3dmm'>The 3D Music Maze</h3>
<p> <i> Music exploration as a game</i> </p>
<img class='ico' src="images/3dmm.png">
<p>
The 3D Music Maze is a WebGL app that lets you wander around a Castle Wolfenstein style maze and
sample music and enjoy the album art.
<div> <a class='' href="http://static.echonest.com/GenreBrowser/">The Source</a> </div>
</p>
<br style="clear:both;" />
<div class='visit'>
<a class='btn btn-primary'
href="http://labs.echonest.com/3dServer/maze.html">The 3D Music Maze</a>
</div>
<hr>
<h3 id='3dmm'>The Genre Browser</h3>
<p> <i> Browse through the many hundreds of genres to discover new artists</i> </p>
<img class='ico' src="images/genre_browser.png">
<p>
With The Genre Browser you can learn about a new genres. You can read about the background and history of the genre,
listen to its music, learn about the genre’s key artists and more.
<div> <a class='' href="https://github.com/plamere/GenreBrowser">The Source</a> </div>
</p>
<br style="clear:both;" />
<div class='visit'>
<a class='btn btn-primary'
href="http://static.echonest.com/GenreBrowser/">The Genre Browser</a>
</div>
<hr>
<h3 id='3dmm'>Music Popcorn</h3>
<p> <i> Dynamic visualization of the genre space</i> </p>
<img class='ico' src="images/popcorn.png">
<p>
Music Popcorn is a visualization of the music space that lets you explore and learn about the many different music genres.
<div> <a class='' href="https://github.com/plamere/SpotifyPopcorn">The Source</a> </div>
</p>
<br style="clear:both;" />
<div class='visit'>
<a class='btn btn-primary'
href="http://static.echonest.com/SpotifyPopcorn/">Music Popcorn</a>
</div>
<hr>
<h3 id='btf'>Boil the Frog</h3>
<p> <i> Create seamless genre-transitioning playlists between artists</i> </p>
<img class='ico' src="images/frog.png">
<p>
Boil the Frog lets you create a playlist of songs that gradually takes you from one music style to
another. It's like the proverbial frog in the pot of water. If you heat up the pot slowly enough,
the frog will never notice that he's being made into a stew and jump out of the pot. With a Boil
the frog playlist you can do the same, but with music. You can generate a playlist that will take
the listener from one style of music to the other, without the listener ever noticing that they
are being made into a stew.
<a class='' href="http://github.com/plamere/BoilTheFrog">The Source</a>
</p>
<br style="clear:both;" />
<div class='visit'>
<a class='btn btn-primary' href="http://static.echonest.com/BoilTheFrog"> Boil the Frog</a>
</div>
<hr>
<h3 id='setlistener'>The Set Listener</h3>
<p> <i>Listen to your favorite artist's most recent show</i> </p>
<img class='ico' src="images/setlist.png">
<p>
Going to a show? Not totally familiar with an artist’s catalog? Give The Set
Listener a try. The Set Listener is a web app that will create a Spotify
playlist of an artist’s most recent show.
<a class='' href="https://github.com/plamere/SetListener">The Source</a>
</p>
<br style="clear:both;" />
<div class='visit'>
<a class='btn btn-primary' href="http://static.echonest.com/SetListener/">
The Set Listener</a>
</div>
<hr>
<h3 id='rtmt'>Roadtrip Mixtape</h3>
<p> <i> Create a mixtape of local artists for your roadtrip</i> </p>
<img class='ico' src="images/rtmt.png">
<p>
Roadtrip Mixtape is an application that you can use to create road trip playlists.
Type in the name of your
starting and ending points, and the application will create a playlist of music by artists that
from the area you are traveling through.
<div> <a class='' href="https://github.com/plamere/roadtrip-mixtape">The Source</a> </div>
</p>
<br style="clear:both;" />
<div class='visit'>
<a class='btn btn-primary'
href="http://labs.echonest.com/CityServer/roadtrip.html">Roadtrip Mixtape</a>
</div>
<hr>
<h3 id='acrostify'>Acrostify</h3>
<p> <i> Create a Spotify playlist with a secret message hidden as an acrostic.</i> </p>
<img class='ico' src="images/acrostify.png">
<p>
Acrostify creates a Spotify playlist that embeds a secret message in the first
character of each song in the playlist.
<div> <a class='' href="https://github.com/plamere/enspex/tree/master/web/Acrostify">The Source</a> </div>
</p>
<br style="clear:both;" />
<div class='visit'>
<a class='btn btn-primary'
href="http://static.echonest.com/enspex/web/Acrostify/">Acrostify</a>
</div>
<hr>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<h2>Resources</h2>
<p> Download one of our many <a href="http://developer.echonest.com/client_libraries.html">Echo Nest</a>
and <a href="https://developer.spotify.com/web-api/code-examples/">Spotify</a> client libraries.
Follow along with our tutorials (<a href="https://developer.echonest.com/tutorial-overview.html">Echo Nest</a>, <a
href="https://developer.spotify.com/web-api/tutorial/">Spotify</a>).
</p>
</div>
<div class="col-md-6">
<h2>API Documentation</h2>
<p> Detailed API documentation can be found online at:
<ul>
<li> <a href="http://developer.echonest.com">The Echo Nest API documentation</a>
<li><a href="https://developer.spotify.com/web-api/">The Spotify Web API documentation</a>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Need more help?</h2>
<p> If you have a problem or need more help with the Echo Nest or Spotify APIs check out our
<a href="http://developer.echonest.com/forums">Echo Nest support forums</a>
and the <a href="https://developer.spotify.com/support/">Spotify support page</a>.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<h2>How to use the Echo Nest and Spotify APIs together</h2>
We use The Echo Nest’s Project Rosetta Stone to make it easy to work with Spotify IDs with The Echo Nest API.
For example, Radiohead has a Spotify ID of 'spotify:artist:4Z8W4fKeB5YxbusRsdQVPb'. To find biographies for Radiohead
using The Echo Nest API, starting from the Spotify ID, you would issue a query like this:
<pre>
http://developer.echonest.com/api/v4/artist/biographies?api_key=YOUR_API_KEY&id=spotify:artist:4Z8W4fKeB5YxbusRsdQVPb
</pre>
Similarly, you can query for detailed information for a Spotify track with a query like so:
<pre>
http://developer.echonest.com/api/v4/song/profile?api_key=YOUR_API_KEY&track_id=spotify:track:4toSP60xmDNCFuXly8ywNZ&bucket=id:spotify&bucket=audio_summary
</pre>
<p>
You can also retrieve Spotify IDs from any Echo Nest call that returns artist, song or track info. To do this, you
use the bucket=id:spotify parameter on any call that returns artists, songs or tracks. As an example, to find artists
similar to Radiohead, with Spotify foreign IDs returned, issue a call like this:
<pre>
http://developer.echonest.com/api/v4/artist/similar?api_key=YOUR_API_KEY&id=spotify:artist:4Z8W4fKeB5YxbusRsdQVPb&bucket=id:spotify
</pre>
<p>
The returned list of similar artists include the spotify IDs in the output like so:
<pre>
{
"foreign_ids": [
{
"catalog": "spotify",
"foreign_id": "spotify:artist:4CvTDPKA6W06DRfBnZKrau"
}
],
"id": "ARH1N081187B9AC562",
"name": "Thom Yorke"
}
</pre>
</div>
</div>
<footer>
<p>© The Echo Nest 2014</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>