Spotify App API: Some Things

Spotify now has an application framework, yet the documentation is still fairly limited. Here are some things that aren’t in the documentation that will be helpful. (Note: I’m using jQuery in my application)

Starting Things Off

There are some imports and variables to declare in order to understand the examples below.

var sp = getSpotifyApi(1);
var views = sp.require("sp://import/scripts/api/views");
var models = sp.require("sp://import/scripts/api/models");
var ui = sp.require("sp://import/scripts/ui");

Display a playlist using Spotify’s List item

var list = new views.List(playlist, function (track) {
	return new views.Track(track, views.Track.FIELD.STAR |
				views.Track.FIELD.SHARE |
				views.Track.FIELD.NAME |
				views.Track.FIELD.ARTIST |
				views.Track.FIELD.DURATION |
				views.Track.FIELD.ALBUM);
});
$("#playlist").append(list.node);

The constructor for the List class takes three arguments. In the above example, I only use the first two, which are: a playlist object to display, and a method for returning exactly how to display the tracks in the playlist. There are a number of different fields that can be added into the tail end of the views.Track() constructor, but the ones listed are a good start.

To make the list use the light theme

list.node.classList.add("sp-light");

Display Artist/Album Image

The API includes a class for displaying images based on a URI that can be resized to fit a container.

var track = sp.trackPlayer.getNowPlayingTrack().track;
var img = new ui.SPImage(track.album.cover);
$("album-cover").append(img.node);

If you want to include Player controls over the image, use this:

var player = new views.Player();
$("#album-cover").empty().append($(document.createElement("a")).attr("href", track.uri));
var img = new ui.SPImage(track.album.cover);
$(player.image).empty();
$(player.image).append(img.node);
$("#album-cover").children().append(player.node);

You can programmatically set the context/playing status of the player using player.context = playlist.uri and player.playing = true. You can also use the player.play(track, playlist.uri) method to start things off.

Hopefully these few things help, and I’ll be sure to add a new post with additional examples as I come across them