In Project-3, we're going to look at some of the basics of interacting with APIs. We'll be focusing on two: Spotify's Web API and Echo Nest's API. We use these APIs to construct a small, Spotify playlist which visualizes some EchoNest data, lets you sort by things like title and tempo, and displays album art.
We've tried something a bit new in this project. In addition to building the project up commit-by-commit, we've added many more comments to the code than we have in the past, and we've attempted to categorize the comments to make reading through the function and structure of the app a little easier.
To use the Spotify Play Button embeds, you'll need to install Spotify (you can sign up for a free account). Spotify's Play Button interacts with your local Spotify installation enabling you to click a Play Button on a website and have your local Spotify app begin playing the song.
Using EchoNest's API, add another column of information on each track and modify the sorting logic to let you sort by the new data.
Choose another piece of data from EchoNest's API to visualize using a Processing sketch, either for a currently playing song or for all the songs. You may find the Analyzer Documentation useful in understanding the full range of under-documented API features. Similarly, the EchoNest lab may be a good starting point for brainstorming extensions and/or seeing how they work.
In each Spotify embed iframe, you'll notice a small, Spotify logo in the lower right. Using the coverURL function in spotify.js, you can access an album cover without a Spotify logo. Use this to modify the .inter overlay and include a circular div with an appropriately positioned background to hide the Spotify logo until you click on the .inter overlay.
MUSIXMATCH offers an API which, among other things, lets you query songs' lyrics. Add functionality to the project where the lyrics from the current track are faded in when currentTrack is switched.
You'll notice that this app sucks. Which is to say, the user experience is very painful because we basically have to wait for a Spotify iframe and three API queries to EchoNest and Spotify for every song 'til we display anything. Design a solution to this. You might indicate the page is loading with some sort of progress bar or sequentially inserts songs as they are loaded so that users aren't left hanging.
- Spotify's Play Button Embed Documentation
- Spotify's Web API Documentation
- "Deconstructing Spotify's built-in HTTP server"
- EchoNest's API Documentation
- EchoNest's Analyzer Documentation
- JSON versus JSONP Tutorial - Live
- "What's in an HTTP request?" and "HTTP Request/Response Basics" are good places to start to understand how we might use HTTP to interact with APIs. For a lot more detail about what's going on behind the scenes, you can check out "How Does the Internet Work?"
- "Ways to circumvent the same-origin policy" is a nice overview of some of the ways people handle the limits on cross-domain communication which we struggled with in this project.
--
Please either file an issue on this repository if you have a question which does not concern your code, or please file an issue on your own repository if you'd like us to take a look at a problem you have.