The thoughts, opinions and sometimes the rants of Mark Evans

Spotify Apps - Using Player View

| Comments

One of the components most apps might want to use is the Spotify Player, this is the widget that allows you to play / pause albums, tracks and playlists.

Something I was quite interested in doing was having the ability to customise the player with my own images, by default Spotify will use the cover for the album or track or a mosaic of images if you are playing a playlist.

To override this default functionality took a bit of research but here is how I did it. This example creates a custom playlist with a couple of tracks and then attaches that to the player using jQuery’s replaceWith() method.

// Get Spotify API
var sp = getSpotifyApi(1);
var models = sp.require('sp://import/scripts/api/models');
var views = sp.require('sp://import/scripts/api/views');

var playlistTitle = 'Test Playlist';
var image = '';
var vPlayer = new views.Player();
var newPlaylist = new models.Playlist(playlistTitle);

// Add tracks to playlist

// Setup Player
vPlayer.context = newPlaylist;
var customImage = new views.Image(image, newPlaylist.uri, playlistTitle);

// Optionally add custom CSS class to player

// Find and replace image using jQuery

Once that is done you can easily embed the widget by appending it to the DOM and your all set with your customised player image.