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.