Now Playing Dashboard for Spotify

About

This is a dashboard for Spotify that fetches data from https://api.lyrics.ovh/ (currently broken!), Wikipedia, MusicBrainz and Spotify about what you are currently listening to. It has a day and night mode, in addition to a kiosk mode that displays less information, focussing more album art.

Most recent release: v0.3

Known Issues

• Wikipedia search sometimes results in the same text for both albums and artists. This happens with lesser known artists.
• Musicbrainz doesn't always have a Wikidata identifier associated with an artist, in which case the artist info box does not get populated.
• Musicbrainz doesn't always find an album (or it isn't in the MB database).
• https://lyrics.ovh/ api has stopped working, so no lyrics are being fetched: NTag/lyrics.ovh#15
• Playback control doesn't work in kiosk mode and has been removed.

Changelog

v0.3

• Addded "kiosk mode", provides a more full screen view, displaying only album art and song details. Can be toggled and works with the dark / light theme.

v0.2

• Added light mode
• JSON fetch improvements

v0.1

• Ability to fetch album song info from Wikipedia
• Ability to fetch artist info from Wikipedia
• Fetch song credits - if available - from https://api.lyrics.ovh/
• Fetch artist credits - if available - from MusicBrainz
• Added artist art from Spotify
• Added artist genre from Spotify
• Get song and artist popularity from Spotify
• Added search links to album and artist info to Allmusic.com, albumoftheyear.com and last.fm
• Added release date information from Spotify
• Added playback controls (prev, pause, play, next, shuffle, repeat)
• Added volume indicator
• Modified login page

Coded in :

HTML, CSS, JS, PHP

Used libraries:

• Spotify Web API PHP by jwilsson
• Spotify Web API JS by JMPerez

How do I run this?

Clone or download the repository and run it locally with XAMPP (macOS, Linux or Windows) or Wampserver (Windows only).

For Mac users, macOS has a built in server: if you put the folder in your root documents folder, running and accessing it can be done by executing the following code in your terminal: php -S localhost:3000 -t /Users/{YOUR USERNAME}/Now-Playing-Dashboard-for-Spotify-master

Following this, you can access it at: http://localhost:3000/

What modifications are required ?

As originally instructed by busybox11, to complete setup for your local machine, you need a Client ID a Client Secret and a domain url Domain.

Getting your Client ID and Client Secret: First create a Client ID (Create a Client ID button) on Spotify's developer dashboard. Type your app's name in the App or Hardware name text field, and its description on the App or Hardware description text field. In the What are you building? section, indicate the platform which you are building the app for, then click on the NEXT button. Answer to the commercial integration question, and continue. If necessary, fill the form and check all the boxes at the 3rd stage.

Now that you have your app, you have some modifications to do in two files: login.php and token.php. They are currently both appended with the textEDIT_THIS_FILE. I recommend renaming these files to login.php and token.php before you start editing the values.

Edit the following values:

• YOUR_CLIENT_ID your Client ID available on your app's panel,
• YOUR_CLIENT_SECRET your Client Secret available by clicking on the Show Client Secret button situated on the same webpage as your client ID,
• YOUR_DOMAIN by your redirect URL, in the case of a local hosting replace it by http://localhost/token.php in most cases. Basically, it's the accessible URL for the token.php page.

Let's go back on our app's panel. You need to declare the URL where the token.php page is located, for a local hosting it would be in most cases http://localhost/token.php. Click on the green Edit settings button situated on the top of the page, then in the Redirect URIs text field, indicate yours. ATTENTION: what you typed should IMPERATIVELY be the same as what you wrote in the two precedent files! Then click on the SAVE button on the very bottom of the form. Your app is declared and ready to use!

Credits

The base for this web application was provided by busybox11 and it uses the Spotify Web API PHP by jwilsson and Spotify Web API JS by JMPerez. Icons by smashicons