• Stars
    star
    121
  • Rank 293,924 (Top 6 %)
  • Language
    JavaScript
  • Created over 7 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A wrapper around Spotify Connect to interact with the player

Spotify Player

A Node.js server plus a light JS library to create integrations with the Spotify Web API Connect endpoints.

Using the library

Import the script https://spotify-player.herokuapp.com/spotify-player.js. Now you can log the user in and listen to updates on playback:

var spotifyPlayer = new SpotifyPlayer();

spotifyPlayer.on('update', response => {
  // response is a json object obtained as a response of
  // https://developer.spotify.com/web-api/get-information-about-the-users-current-playback/
});

spotifyPlayer.on('login', user => {
  if (user === null) {
    // there is no user logged in or the user was logged out
  } else {
    // the user is logged in
    // user is a json object obtained as a response of
    // https://developer.spotify.com/web-api/get-current-users-profile/
  }
});

loginButton.addEventListener('click', () => {
    spotifyPlayer.login();
});

logoutButton.addEventListener('click', () => {
    spotifyPlayer.logout();
});

spotifyPlayer.init();

Have a look at http://codepen.io/jmperez/pen/MmwObE for an example of a visualization using this library.

The library uses a shared server to issue the initial access token and refreshed tokens. This means your integration could reach Spotify's rate limits easily. If you want to have more control on this, deploy the code to your own server using the following instructions.

Server

The server can be run locally and also deployed to Heroku. You will need to register your own Spotify app and pass the credentials to the server. For that:

  1. Create an application on Spotify's Developer Site.
  2. Add as redirect uris both http://localhost:5000/callback (for development) and <production_domain>/callback (if you want to deploy your app somewhere)
  3. Keep the client ID and client secret somewhere. You'll need them next.

Running Locally

Make sure you have Node.js.

$ npm install
$ CLIENT_ID=<your_client_id> CLIENT_SECRET=<your_client_secret> REDIRECT_URI=<your_redirect_uri> npm start

Your app should now be running on localhost:5000.

Deploying to Heroku

You will need to have the Heroku CLI installed.

$ heroku create
$ git push heroku master
$ heroku open

or

Deploy to Heroku

You will then need to set the environment variables using heroku config:set:

$ heroku config:set CLIENT_ID=<your_client_id>
$ heroku config:set CLIENT_SECRET=<your_client_secret>
$ heroku config:set REDIRECT_URI=<your_redirect_uri>

More Repositories

1

spotify-web-api-js

A client-side JS wrapper for the Spotify Web API
TypeScript
1,866
star
2

spotify-dedup

Remove duplicates from your Spotify Playlists
TypeScript
828
star
3

beats-audio-api

Calculate the BPM of a song using the Audio API
JavaScript
393
star
4

c

A collaborative listening room using Spotify
JavaScript
369
star
5

linkedin-to-json-resume

An exporter from a LinkedIn profile to JSON Résumé
TypeScript
344
star
6

passport-spotify

Spotify authentication strategy for Passport and Node.js.
JavaScript
316
star
7

karaoke

Karaoke built with Web Audio API
JavaScript
222
star
8

contour

Draw an image with SVG
JavaScript
177
star
9

promise-throttle

A small library to throttle promises. Useful to avoid rate limiting when using REST APIs.
JavaScript
148
star
10

spotify-iquiz

iQuiz-like webapp using Spotify Web API
JavaScript
26
star
11

spotify-web-api-token

A simple Node.js app that exposes an access token to use the Spotify Web API
JavaScript
22
star
12

spotify-app-stats

A library to fetch the stats for your Spotify App from Spotify's developer site
JavaScript
20
star
13

wpo-book

A collection of Website Performance Optimization Techniques
20
star
14

jmperez.github.com

JMPerez Blog powered by Hexo
CSS
19
star
15

BigPipe

Facebook's BigPipe on ASP.Net MVC
C#
16
star
16

sync-subs

Browser-based JS subtitles synchronizer
JavaScript
15
star
17

screenflow

Poor Man's Screenflow that records your screen and camera and outputs a video
JavaScript
15
star
18

thirtiflux

A Spotify Web Player using the Web API, React and Flux
JavaScript
12
star
19

spotify-search

Polymer Web component to search Spotify items
HTML
10
star
20

spotify-dedup-mobile

Spotify Dedup - Mobile app version
JavaScript
10
star
21

extendify

Google Chrome Extension for appending Spotify Play Button to several sites like Wikipedia, Twitter
JavaScript
9
star
22

spotify-web-api-graphql

A proof-of-concept to create a graphql proxy for the Spotify Web API in javascript
JavaScript
8
star
23

geometrize-node

Generate SVGs from images
JavaScript
8
star
24

spotify-web-api-js-poc

A universal JS wrapper for the Spotify Web API
JavaScript
7
star
25

spotify-new-releases-demo-react

Demo of New Releases Spotify Web API endpoint (using React.js)
JavaScript
7
star
26

spotify-desktop-proxy

A desktop app that acts as a proxy for the Spotify Web API
JavaScript
6
star
27

spotify-most-followed-popular-artists-genres

A report with some insights from Spotify after making many requests to the Spotify Web API.
CSS
6
star
28

angularjs-spotify-apps-directives

AngularJS directives for Spotify Apps
JavaScript
5
star
29

raml2swagger

A RAML to Swagger converter in node.js
JavaScript
4
star
30

lazy-loading-talk

A talk about lazy-loading with React-like HOC
4
star
31

js-crusher

A Javascript packer that minifies JS code through string replacements
JavaScript
4
star
32

spotify-web-api-start-template

A basic template using implicit grant auth
JavaScript
3
star
33

spotify-play-with-voice

Using Speech recognition to play music
JavaScript
3
star
34

til

Things I learned today
2
star
35

gatsby-starter-blog

JavaScript
2
star
36

spotify-logo-svg-drawing-animation

A proof of concept of the Spotify Logo in SVG using drawing animation
HTML
1
star
37

tw-fb-video

POC
HTML
1
star
38

perfreviews-gatsby

JavaScript
1
star
39

spotify-angular-app

A Spotify App built using AngularJS
JavaScript
1
star
40

es6-template

A template for creating universal/isomorphic JS web apps
JavaScript
1
star
41

spotify-save-as-playlist

Polymer Web component to save as a playlist
JavaScript
1
star
42

renderconf17

Slides for my presentation at Render Conf 2017
JavaScript
1
star
43

spotify-grid-play

Spotify sample app that plays a tracklist through multiple covers
JavaScript
1
star
44

lazy-load

Some examples of lazy-loading
JavaScript
1
star