Angular2 service to connect to the Spotify Web API
Based off eddiemoore's angular-spotify. Big thanks to him
Install angular2-spotify via npm. Use the --save property to save into your package.json file.
npm install angular2-spotify --save
Configure your SystemJS like such:
System.config({
map: {
'angular2-spotify': 'node_modules/angular2-spotify',
'angular2': 'node_modules/angular2',
'rxjs': 'node_modules/rxjs',
},
packages: {
'angular2-spotify': { fomat: 'register', defaultExtension: 'js' },
'angular2': { fomat: 'register', defaultExtension: 'js' },
'rxjs': { fomat: 'register', defaultExtension: 'js' },
app: { format: 'register', defaultExtension: 'js' }
}
});
System.import('app/main')
.then(null, console.error.bind(console));
Add HTTP_PROVIDERS to your app bootstrap
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
bootstrap(AppComponent, [
HTTP_PROVIDERS
]);
Provide Spotify Service into your component (only provide in your root componenent, but remember to import the service to every class you want to use it)
import {Component, provide} from 'angular2/core';
import SpotifyService from 'angular2-spotify/angular2-spotify';
@Component({
providers: [
SpotifyService,
provide("SpotifyConfig", {
useValue: {
clientId: '<CLIENT_ID>',
redirectUri: '<CALLBACK_URI>',
scope: '<SCOPE>',
// If you already have an auth token
authToken: '<AUTH_TOKEN>'
}
})
]
})
export class AppComponent {...}
Most of the functions in Spotify do not require you to authenticate your application. However if you do need to gain access to playlists or a user's data then add the necessary scopes:
For example:
providers: [
SpotifyService,
provide("SpotifyConfig", {
useValue: {
clientId: 'ABC123DEF456GHfddId789JKL',
redirectUri: 'http://www.example.com/callback.html',
scope: 'user-follow-modify user-follow-read playlist-read-private playlist-read-collaborative playlist-modify-public playlist-modify-private user-library-read user-library-modify user-read-private',
// If you already have an authToken
authToken: localStorage.getItem('angular2-spotify-token')
}
})
]
Inject Spotify into a component to gain access to all the functions available
constructor(private spotifyService: SpotifyService) {
}
Get Spotify catalog information for a single album.
this.spotifyService.getAlbum('AlbumID or Spotify Album URI');
Example:
this.spotifyService.getAlbum('0sNOF9WDwhWunNAHPD3Baj').subscirbe(data => {
console.log(data);
});
Get Spotify catalog information for multiple albums identified by their Spotify IDs.
this.spotifyService.getAlbums('Array or comma separated list of Album IDs');
Example:
this.spotifyService
.getAlbums('41MnTivkwTO3UUJ8DrqEJJ,6JWc4iAiJ9FjyK0B59ABb4,6UXCm6bOO4gFlDQZV5yL37')
.subscirbe(data => {
console.log(data);
});
Get Spotify catalog information about an album’s tracks. Optional parameters can be used to limit the number of tracks returned.
this.spotifyService.getAlbumTracks('AlbumID or Spotify Album URI', options);
- limit - Optional. The maximum number of tracks to return. Default: 20. Minimum: 1. Maximum: 50.
- offset - Optional. The index of the first track to return. Default: 0 (the first object). Use with limit to get the next set of tracks.
Example:
this.spotifyService.getAlbumTracks('6akEvsycLGftJxYudPjmqK').subscirbe(data => {
console.log(data);
});
Get Spotify catalog information for a single artist identified by their unique Spotify ID or Spotify URI.
this.spotifyService.getArtist('Artist Id or Spotify Artist URI');
Example
this.spotifyService.getArtist('0LcJLqbBmaGUft1e9Mm8HV').subscirbe(data => {
console.log(data);
});
Get Spotify catalog information for several artists based on their Spotify IDs.
this.spotifyService.getArtists('Comma separated string or array of Artist Ids');
Example:
this.spotifyService
.getArtists('0oSGxfWSnnOXhD2fKuz2Gy,3dBVyJ7JuOMt4GE9607Qin')
.subscirbe(data => {
console.log(data);
});
Get Spotify catalog information about an artist’s albums. Optional parameters can be passed in to filter and sort the response.
this.spotifyService.getArtistAlbums('Artist Id or Spotify Artist URI', options);
- album_type - Optional A comma-separated list of keywords that will be used to filter the response. If not supplied, all album types will be returned. Valid values are:
- album
- single
- appears_on
- compilation
Example: { album_type: 'album,single' }
- country - Optional. An ISO 3166-1 alpha-2 country code. Supply this parameter to limit the response to one particular country. Note if you do not provide this field, you are likely to get duplicate results per album, one for each country in which the album is available!
- limit - The number of album objects to return. Default: 20. Minimum: 1. Maximum: 50. For example: { limit: 2 }
- offset - Optional. The index of the first album to return. Default: 0 (i.e., the first album). Use with limit to get the next set of albums.
Example:
this.spotifyService.getArtistAlbums('1vCWHaC5f2uS3yhpwWbIA6').subscirbe(data => {
console.log(data);
});
Get Spotify catalog information about an artist’s top tracks by country.
this.spotifyService.getArtistTopTracks('Artist Id or Spotify Artist URI', 'Country Code');
- The country: an ISO 3166-1 alpha-2 country code.
Example:
this.spotifyService
.getArtistTopTracks('1vCWHaC5f2uS3yhpwWbIA6', 'AU')
.subscirbe(data => {
console.log(data);
});
Get Spotify catalog information about artists similar to a given artist. Similarity is based on analysis of the Spotify community’s listening history.
this.spotifyService.getRelatedArtists('Artist Id or Spotify Artist URI');
Example:
this.spotifyService.getRelatedArtists('1vCWHaC5f2uS3yhpwWbIA6').subscirbe(data => {
console.log(data);
});
Discover new releases and featured playlists. User needs to be logged in to gain access to these features.
Get a list of Spotify featured playlists
this.spotifyService.getFeaturedPlaylists(options);
- locale - string - Optional. The desired language, consisting of a lowercase ISO 639 language code and an uppercase ISO 3166-1 alpha-2 country code, joined by an underscore. For example: es_MX, meaning "Spanish (Mexico)". Provide this parameter if you want the results returned in a particular language (where available).
- country - string - Optional. A country: an ISO 3166-1 alpha-2 country code. Provide this parameter if you want the list of returned items to be relevant to a particular country. If omitted, the returned items will be relevant to all countries.
- timestamp - string - Optional. A timestamp in ISO 8601 format: yyyy-MM-ddTHH:mm:ss. Use this parameter to specify the user's local time to get results tailored for that specific date and time in the day. If not provided, the response defaults to the current UTC time. Example: "2014-10-23T09:00:00" for a user whose local time is 9AM.
Example:
this.spotifyService
.getFeaturedPlaylists({ locale: "nl_NL", country: "NL" })
.subscirbe(data => {
console.log(data);
});
Get a list of new album releases featured in Spotify
this.spotifyService.getNewReleases(options);
- country - string - Optional. A country: an ISO 3166-1 alpha-2 country code. Provide this parameter if you want the list of returned items to be relevant to a particular country. If omitted, the returned items will be relevant to all countries.
Example:
this.spotifyService.getNewReleases({ country: "NL" }).subscirbe(data => {
console.log(data);
});
Get a list of categories used to tag items in Spotify (on, for example, the Spotify player’s “Browse” tab).
this.spotifyService.getCategories(options);
- country - string - Optional. A country: an ISO 3166-1 alpha-2 country code. Provide this parameter if you want the list of returned items to be relevant to a particular country. If omitted, the returned items will be relevant to all countries.
- locale - string - Optional. The desired language, consisting of an ISO 639 language code and an ISO 3166-1 alpha-2 country code, joined by an underscore. For example: es_MX, meaning "Spanish (Mexico)". Provide this parameter if you want the category metadata returned in a particular language.
- limit - number - Optional. The maximum number of categories to return. Default: 20. Minimum: 1. Maximum: 50.
- offset - number - Optional. The index of the first item to return. Default: 0 (the first object). Use with
limit
to get the next set of categories.
Example:
this.spotifyService.getCategories({ country: 'SG' }).subscirbe(data => {
console.log(data);
});
Get a single category used to tag items in Spotify (on, for example, the Spotify player’s “Browse” tab).
this.spotifyService.getCategory(category_id, options);
- category_id - The Spotify category ID for the category.
- country - string - Optional. A country: an ISO 3166-1 alpha-2 country code. Provide this parameter if you want the list of returned items to be relevant to a particular country. If omitted, the returned items will be relevant to all countries.
- locale - string - Optional. The desired language, consisting of an ISO 639 language code and an ISO 3166-1 alpha-2 country code, joined by an underscore. For example: es_MX, meaning "Spanish (Mexico)". Provide this parameter if you want the category metadata returned in a particular language.
Example:
this.spotifyService.getCategory('party').subscirbe(data => {
console.log(data);
})
Get a list of Spotify playlists tagged with a particular category.
this.spotifyService.getCategoryPlaylists(category_id, options);
- category_id - The Spotify category ID for the category.
- country - string - Optional. A country: an ISO 3166-1 alpha-2 country code. Provide this parameter if you want the list of returned items to be relevant to a particular country. If omitted, the returned items will be relevant to all countries.
- limit - number - Optional. The maximum number of items to return. Default: 20. Minimum: 1. Maximum: 50.
- offset - number - Optional. The index of the first item to return. Default: 0 (the first object). Use with
limit
to get the next set of items.
Example:
this.spotifyService.getCategoryPlaylists('party').subscirbe(data => {
console.log(data);
})
These endpoints allow you manage the list of artists and users that a logged in user follows. Following and unfollowing requires the user-follow-modify
scope. Check if Current User Follows requires the user-follow-read
scope.
Get the current user’s followed artists.
this.spotifyService.following('type', options)
- type: Required. currently only
artist
is supported.
this.spotifyService.following('artist', { limit: 10 }).subscirbe(artists => {
console.log(artists);
})
Add the current user as a follower of one or more artists or other Spotify users.
this.spotifyService.follow('type', 'ids');
- type: Required. either
artist
oruser
Example:
this.spotifyService.follow('user', 'exampleuser01').subscirbe(data => {
// no response from Spotify
});
Remove the current user as a follower of one or more artists or other Spotify users.
this.spotifyService.unfollow('type', 'ids');
- type: Required. either
artist
oruser
Example:
this.spotifyService.unfollow('user', 'exampleuser01').subscirbe(data => {
// no response from Spotify
});
Check to see if the current user is following one or more artists or other Spotify users.
this.spotifyService.userFollowingContains('type', 'ids');
- type: Required. either
artist
oruser
- ids: Required. comma-separated list.
Example:
this.spotifyService.userFollowingContains('user', 'exampleuser01').subscirbe(data => {
console.log(data);
});
Add the current user as a follower of a playlist. Requires playlist-modify-public
or playlist-modify-private
scope to work.
this.spotifyService.followPlaylist('owner_id', 'playlist_id', isPublic);
- owner_id: The Spotify user ID of the person who owns the playlist.
- playlist_id: The Spotify ID of the playlist. Any playlist can be followed, regardless of its public/private status, as long as you know its playlist ID.
- isPublic: Boolean (Optional), default true. If true the playlist will be included in user's public playlists, if false it will remain private.
Example:
this.spotifyService
.followPlaylist('jmperezperez', '2v3iNvBX8Ay1Gt2uXtUKUT', false)
.subscirbe(data => {
console.log(data);
});
Remove the current user as a follower of a playlist. Requires playlist-modify-public
or playlist-modify-private
scope to work.
this.spotifyService.unfollowPlaylist('owner_id', 'playlist_id', isPublic);
- owner_id: The Spotify user ID of the person who owns the playlist.
- playlist_id: The Spotify ID of the playlist that is to be no longer followed.
Example:
this.spotifyService
.unfollowPlaylist('jmperezperez', '2v3iNvBX8Ay1Gt2uXtUKUT')
.subscirbe(data => {
console.log(data);
});
Check to see if one or more Spotify users are following a specified playlist.Following a playlist can be done publicly or privately. Checking if a user publicly follows a playlist doesn't require any scopes; if the user is publicly following the playlist, this endpoint returns true.
Checking if the user is privately following a playlist is only possible for the current user when that user has granted access to the playlist-read-private
scope.
this.spotifyService
.playlistFollowingContains('owner_id', 'playlist_id', 'comma separated string or array of user ids');
Example:
this.spotifyService.playlistFollowingContains('jmperezperez', '2v3iNvBX8Ay1Gt2uXtUKUT', 'possan,elogain').subscirbe(data => {
console.log(data);
});
Get a list of the songs saved in the current Spotify user’s “Your Music” library. Requires the user-library-read
scope.
this.spotifyService.getSavedUserTracks(options);
- limit - Optional. The maximum number of objects to return. Default: 20. Minimum: 1. Maximum: 50.
- offset - Optional. The index of the first object to return. Default: 0 (i.e., the first object). Use with limit to get the next set of objects.
this.spotifyService.getSavedUserTracks().subscirbe(data => {
console.log(data);
});
Check if one or more tracks is already saved in the current Spotify user’s “Your Music” library. Requires the user-library-read
scope.
this.spotifyService.userTracksContains('comma separated string or array of spotify track ids');
Example:
this.spotifyService
.userTracksContains('0udZHhCi7p1YzMlvI4fXoK,3SF5puV5eb6bgRSxBeMOk9')
.subscirbe(data => {
console.log(data);
});
Save one or more tracks to the current user’s “Your Music” library. Requires the user-library-modify
scope.
this.spotifyService.saveUserTracks('comma separated string or array of spotify track ids');
Example:
this.spotifyService
.saveUserTracks('0udZHhCi7p1YzMlvI4fXoK,3SF5puV5eb6bgRSxBeMOk9')
.subscirbe(data => {
console.log(data);
});
Remove one or more tracks from the current user’s “Your Music” library. Requires the user-library-modify
scope.
this.spotifyService.removeUserTracks('comma separated string or array of spotify track ids');
Example:
this.spotifyService
.removeUserTracks('0udZHhCi7p1YzMlvI4fXoK,3SF5puV5eb6bgRSxBeMOk9')
.subscirbe(data => {
console.log(data);
});
Get a list of the albums saved in the current Spotify user’s “Your Music” library. Requires the user-library-read
scope.
this.spotifyService.getSavedUserAlbums(options);
- limit - Optional. The maximum number of objects to return. Default: 20. Minimum: 1. Maximum: 50.
- offset - Optional. The index of the first object to return. Default: 0 (i.e., the first object). Use with limit to get the next set of objects.
- market - Optional. An ISO 3166-1 alpha-2 country code. Provide this parameter if you want to apply Track Relinking.
this.spotifyService.getSavedUserAlbums().subscirbe(data => {
console.log(data);
});
Save one or more albums to the current user’s “Your Music” library. Requires the user-library-modify
scope.
this.spotifyService.saveUserAlbums('comma separated string or array of spotify album ids');
Example:
this.spotifyService
.saveUserAlbums('4iV5W9uYEdYUVa79Axb7Rh,1301WleyT98MSxVHPZCA6M')
.subscirbe(data => {
console.log(data);
});
Remove one or more albums from the current user’s “Your Music” library. Requires the user-library-modify
scope.
this.spotifyService.removeUserAlbums('comma separated string or array of spotify album ids');
Example:
this.spotifyService
.removeUserAlbums('4iV5W9uYEdYUVa79Axb7Rh,1301WleyT98MSxVHPZCA6M')
.subscirbe(data => {
console.log(data);
});
Check if one or more albums is already saved in the current Spotify user’s “Your Music” library. Requires the user-library-read
scope.
this.spotifyService.userAlbumsContains('comma separated string or array of spotify album ids');
Example:
this.spotifyService
.userAlbumsContains('4iV5W9uYEdYUVa79Axb7Rh,1301WleyT98MSxVHPZCA6M')
.subscirbe(data => {
console.log(data);
});
User needs to be logged in to gain access to playlists
Get a list of the playlists owned by a Spotify user. Requires the playlist-read-private
scope
this.spotifyService.getUserPlaylists('user_id', options);
- limit - Optional. The maximum number of playlists to return. Default: 20. Minimum: 1. Maximum: 50.
- offset - Optional. The index of the first playlist to return. Default: 0 (the first object). Use with limit to get the next set of playlists.
Example:
this.spotifyService.getUserPlaylists('wizzler').subscirbe(data => {
console.log(data);
});
Get a playlist owned by a Spotify user.
this.spotifyService.getPlaylist('user_id', 'playlist_id', options);
- fields - Optional. Filters for the query: a comma-separated list of the fields to return. If omitted, all fields are returned. Sub-fields can be excluded by prefixing them with an exclamation mark. More Info
this.spotifyService
.getPlaylist('1176458919', '6Df19VKaShrdWrAnHinwVO')
.subscirbe(data => {
console.log(data);
});
Get full details of the tracks of a playlist owned by a Spotify user. Requires the playlist-read-private
scope.
this.spotifyService.getPlaylistTracks('user_id', 'playlist_id', options);
Example:
this.spotifyService
.getPlaylistTracks('1176458919', '6Df19VKaShrdWrAnHinwVO')
.subscirbe(data => {
console.log(data);
});
Create a playlist for a Spotify user. (The playlist will be empty until you add tracks.) Creating a public playlist requires the playlist-modify-public
scope. Creating a private playlist requires the playlist-modify-private
scope.
this.spotifyService.createPlaylist('user_id', options);
- name - string - Required. The name for the new playlist, for example "Your Coolest Playlist". This name does not need to be unique; a user may have several playlists with the same name.
- public - boolean - Optional, default true. If true the playlist will be public, if false it will be private. To be able to create private playlists, the user must have granted the playlist-modify-private scope.
Example:
this.spotifyService
.createPlaylist('1176458919', { name: 'Awesome Mix Vol. 1' })
.subscirbe(data => {
console.log('playlist created');
});
Add one or more tracks to a user’s playlist. Adding tracks to a public playlist requires the playlist-modify-public
scope. Adding tracks to a private playlist requires the playlist-modify-private
scope.
this.spotifyService.addPlaylistTracks('user_id', 'playlist_id', 'comma separated string or array of spotify track uris');
- position - integer - Optional. The position to insert the tracks, a zero-based index. For example, to insert the tracks in the first position: position=0; to insert the tracks in the third position: position=2. If omitted, the tracks will be appended to the playlist. Tracks are added in the order they are listed in the query string or request body.
Example:
this.spotifyService
.addPlaylistTracks('1176458919', '2TkWjGCu8jurholsfdWtG4', 'spotify:track:4iV5W9uYEdYUVa79Axb7Rh,spotify:track:1301WleyT98MSxVHPZCA6M')
.subscirbe(data => {
console.log('tracks added to playlist');
});
Remove one or more tracks from a user’s playlist. Removing tracks from a public playlist requires the playlist-modify-public
scope. Removing tracks from a private playlist requires the playlist-modify-private
scope.
this.spotifyService.removePlaylistTracks('user_id', 'playlist_id', 'comma separated string or array of spotify track ids or uris');
Example:
this.spotifyService
.removePlaylistTracks('1176458919', '2TkWjGCu8jurholsfdWtG4', 'spotify:track:4iV5W9uYEdYUVa79Axb7Rh, spotify:track:1301WleyT98MSxVHPZCA6M')
.subscirbe(data => {
console.log('tracks removed from playlist');
});
Reorder a track or a group of tracks in a playlist.
this.spotifyService.reorderPlaylistTracks('user_id', 'playlist_id', options);
- range_start - integer - Required. The position of the first track to be reordered.
- range_length - integer - Optional. The amount of tracks to be reordered. Defaults to 1 if not set.
- insert_before - integer - Required. The position where the tracks should be inserted.
- snapshot_id - string - Optional. The playlist's snapshot ID against which you want to make the changes.
Example:
this.spotifyService.reorderPlaylistTracks('1176458919', '2TkWjGCu8jurholsfdWtG4', {
range_start: 8,
range_length: 5,
insert_before: 0
}).subscirbe(data => {
console.log(data);
});
Replace all the tracks in a playlist, overwriting its existing tracks. This powerful request can be useful for replacing tracks, re-ordering existing tracks, or clearing the playlist. Replacing tracks in a public playlist requires the playlist-modify-public
scope. Replacing tracks in a private playlist requires the playlist-modify-private
scope.
this.spotifyService.replacePlaylistTracks('user_id', 'playlist_id', 'comma separated string or array of spotify track ids or uris');
Example:
this.spotifyService
.replacePlaylistTracks('1176458919', '2TkWjGCu8jurholsfdWtG4', 'spotify:track:4iV5W9uYEdYUVa79Axb7Rh, spotify:track:1301WleyT98MSxVHPZCA6M')
.subscirbe(data => {
console.log('tracks removed from playlist');
});
Change a playlist’s name and public/private state. (The user must, of course, own the playlist.) Changing a public playlist requires the playlist-modify-public
scope. Changing a private playlist requires the playlist-modify-private
scope.
this.spotifyService.updatePlaylistDetails('user_id', 'playlist_id', options);
- name - string - Optional. The new name for the playlist, for example "My New Playlist Title".
- public - Boolean - Optional. If true the playlist will be public, if false it will be private.
Example:
this.spotifyService
.updatePlaylistDetails('1176458919', '2TkWjGCu8jurholsfdWtG4', { name: 'Updated Playlist Title' })
.subscirbe(data => {
console.log('Updated playlist details');
});
User needs to be logged in to gain access to user profiles
Get public profile information about a Spotify user.
this.spotifyService.getUser('user_id');
Example:
this.spotifyService.getUser('wizzler').subscirbe(data => {
console.log(data);
});
Get detailed profile information about the current user (including the current user’s username).
this.spotifyService.getCurrentUser();
Example:
this.spotifyService.getCurrentUser().subscirbe(data => {
console.log(data);
});
Get Spotify catalog information about artists, albums, or tracks that match a keyword string.
this.spotifyService.search('Search Query', 'type', options);
- type - Required. A comma-separated list of item types to search across. Valid types are: album, artist, playlist, and track.
- limit - Optional. The maximum number of objects to return. Default: 20. Minimum: 1. Maximum: 50.
- offset - Optional. The index of the first object to return. Default: 0 (i.e., the first object). Use with limit to get the next set of objects.
Example:
this.spotifyService.search('Nirvana', 'artist').subscirbe(data => {
console.log(data);
});
Get Spotify catalog information for a single track identified by its unique Spotify ID or Spotify URI.
this.spotifyService.getTrack('Track Id or Spotify Track URI');
Example:
this.spotifyService.getTrack('0eGsygTp906u18L0Oimnem').subscirbe(data => {
console.log(data);
});
Get Spotify catalog information for multiple tracks based on their Spotify IDs.
this.spotifyService.getTracks('Comma separated list or array of Track Ids');
Example:
this.spotifyService.getTracks('0eGsygTp906u18L0Oimnem,1lDWb6b6ieDQ2xT7ewTC3G').subscirbe(data => {
console.log(data);
});
Will open login window. Requires user to initiate as it will open a pop up window. Requires client id, callback uri and scope to be set in config.
this.spotifyService.login();
Example:
login() {
this.spotifyService.login();
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script>
window.onload = function () {
var hash = window.location.hash;
if (window.location.search.substring(1).indexOf("error") !== -1) {
// login failure
window.close();
} else if (hash) {
// login success
var token = window.location.hash.split('&')[0].split('=')[1];
localStorage.setItem('spotify-token', token);
}
}
</script>
</head>
<body>
</body>
</html>
###Usage example
import {Component, provide} from 'angular2/core';
import {SpotifyService} from './spotify.service';
@Component({
selector: 'my-app',
template: `
<h1>angular2-spotify</h1>
<button *ngIf="!user" (click)="login()">Login</button>
<p *ngIf="!!user">You are logged in as: {{user.display_name}}</p>
`,
providers: [
SpotifyService,
provide("SpotifyConfig", {
useValue: {
clientId: 'ABC123DEF456GHfddId789JKL',
redirectUri: 'http://www.example.com/callback.html',
scope: 'user-read-private',
// If you already have an authToken
authToken: localStorage.getItem('angular2-spotify-token')
}
})
]
})
export class AppComponent {
private user: Object;
constructor(private spotifyService: SpotifyService) { }
login() {
this.spotifyService.login().subscribe(
token => {
console.log(token);
this.spotifyService.getCurrentUser()
.subscribe(data=> { console.log("getCurrentUser: ", data); this.user = data },
err=> console.error(err));
},
err => console.error(err),
() => { });
}
}
Check out my Playlist Manager for Spotify