spotify / spotify-web-playback-sdk-example

React based example app that creates a new player in Spotify Connect to play music from in the browse using Spotify Web Playback SDK.

Web Playback SDK Javascript Tutorial

This repository contains the source code for the Web Playback SDK Guide.

Using your own credentials

You will need to register your app and get your own credentials from the Spotify for Developers Dashboard

To do so, go to your Spotify for Developers Dashboard, create your application and register the following callback URI:

http://localhost:3000/auth/callback

Once you have created your app, create a file called .env in the root folder of the repository with your Spotify credentials:

SPOTIFY_CLIENT_ID='my_client_id'
SPOTIFY_CLIENT_SECRET='my_client_secret'

Installation

These examples run on Node.js. On its website you can find instructions on how to install it.

Once installed, clone the repository and install its dependencies running:

npm install

Running the example

Start both client and server with the following command:

npm run dev

The React application will start on http://localhost:3000

Resources

• Follow @SpotifyPlatform on Twitter for Spotify for Developers updates.
• Join the Spotify for Developers Community Forum.

Code of Conduct

This project adheres to the Open Source Code of Conduct. By participating, you are expected to honor this code.

License

Copyright 2021 Spotify AB.

Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0

spotify-web-playback-sdk-example's Issues

Spotify websdk not working on Safari for MacOS and iOS

Steps:

• Run the repo as described in the README.
• Everything runs as expected on Chrome.
• On Desktop Safari -> playback does not start or work till you hit the next button. Play/pause functionality is broken. Once you pause a song it cannot be played again.
• On Mobile Safari -> everything is broken.

Running on :
MacOS: macOS Ventura 13.3.1
Chrome: Version 112.0.5615.137 (Official Build) (arm64)
Safari: Version 16.4 (18615.1.26.110.1)

chore: request has been deprecated

The request package now deprecated.
Preferably use axios or fetch, to call apis.

I am always getting Instance not active. Transfer your playback using your Spotify app. How to resolve it?

INVALID_CLIENT: Invalid redirect URI

I haven't changed any files, I simply added the .env file with the credentials as per the readme. After authentication, the following text is displayed on screen:

INVALID_CLIENT: Invalid redirect URI

Spotify web playback sdk doesn't work with React 18

Well i was trying to implement spotify web sdk on react 18 ( with next 13 and others recent package). i spent an afternoon trying to debug error like

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://sdk.scdn.co') does not match the recipient window's origin ...

and this one https://stackoverflow.com/questions/76097035/spotify-sdk-throwing-this-streamer-is-null-error-when-trying-to-play-or-skip/76283570#76283570

in the end i found that the sdk doesn't work with React 18

8 vulnerabilities (2 moderate, 6 high)

i have already tried npm adult fx but nothing has changed

Front-End and Back-End Proxying is Insufficient to Remove CORS Errors

When attempting to launch this package, each attempt to fetch any existing user tokens and/or login failed with Error 403: Forbidden. I was only able to resolve these issues by installing and using cors middleware, then changing all relevant links to the actual back-end route instead of the port 3000 proxy that this app uses by default. This also required re-configuring the Spotify application dashboard to set the callback URI to the un-proxied address.

Extremely deprecated Node version

When installing via NPM, in order to successfully run this package, I have to create a .nvmrc file and specify Node v16, otherwise I receive the following back-end error: "error:0308010C:digital envelope routines::unsupported". This appears to be due to upgrades since the publication of this package that filled a security hole created by digital envelope routines, though it is unclear if this is due to the package itself or one of its dependencies.

Please clarify life-cycle considerations of the Player object

Hi,

First of all, thanks for making the SDK available and the great documentation and this example!! I was able the get everything working rather quickly. However, a few questions arise which I cannot find answers to anywhere:

When my Single Page Application is open for a longer time, the player connection (usually when idle, i.e. not streaming, but also sometimes when streaming) will become broken eventually. That means, even though I don't receive any "not ready" event from the player, I cannot start streaming again. Some of the symptoms will be (a random combination of them):

• I will see "502 Bad Gateway" errors for the web socket in the log which seem to come from the Web Playback SDK Javascript.
• Trying to start playback may produce a "404" which refers to the Device ID that the Player instance was assigned, as the device will no longer be in the device list on the server side.
• Trying to call disconnect() on the Player instance will just hang.
• Simply calling connect() again may be "successful", but the connection is actually still broken.

Please note that I periodically refresh the access token, and that I give the Player instance a callback implementation that will always use the current access token.

I am perfectly fine with the Player instance becoming stale after a while. What I need is a way to 1) become aware of it reliably (like by receiving the "not ready" event, and 2) being able to recover from that without reloading the page.

I also observed that multiple instances of my application may be registered at the Spotify servers concurrently. For example, when I reload the page, I get a new device ID, and the previous instance may still exist in the Spotify devices list.

Thanks a lot for any clarification!

Option to sort songs alphabetically in long playlist, so it will be easy to find song in list and then remove song from list.

In long playlist, its hard to find song(for removing song) since the song is not alphabetically sorted...