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 = 'http://www.example.org/image.jpg';
var vPlayer = new views.Player();
var newPlaylist = new models.Playlist(playlistTitle);

// Add tracks to playlist
newPlaylist.add('spotify:track:4cMmLBFaJrpPgQDC0djVAZ');
newPlaylist.add('spotify:track:5VpmCqOpS4lgZODFhJiI8B');

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

// Optionally add custom CSS class to player
vPlayer.node.classList.add('custom-classname');

// Find and replace image using jQuery
$(vPlayer.node).find('.sp-player-image').replaceWith(customImage.node);

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.