[MMM-NowPlayingOnSpotify] – Display the currently on Spotify playing song

[raywo]

Here’s another module I created. It displays the song you are currently listening to on Spotify. It doesn’t matter whether you play the song on your desktop or on your smart phone. Also you don’t need any third party app to connect to Spotify. All you need is included in the module.

You can find it on GitHub. A detailed description how to get it working is included.

Feel free to tell me what you think.

[schlachtkreuzer6]

@raywo wooooow! That thing looks aaaaaaaaawesome! Can’t wait to test it:D

[E3V3A]

Wow look very cool.

Also you don’t need any third party app to connect to Spotify.

How does it work? Shazam kind of magic?

[schlachtkreuzer6]

@E3V3A description is on github ;)

Step 2 – Create and authorise a Spotify app
In order to be able to connect to the Spotify API you need to create an app in the Spotify developer area. Then you need to authorise the app to access your personal data. Et voilà!

The module provides you with a special app which describes all the necessary steps and which guides you through the whole process. To use this app change into the authorization folder and start the app by typing node app.

cd authorization
node app
When the app is running you can access it by opening localhost:8888 in your browser. Provided you are doing this directly on your Raspberry Pi. If you want to access the app remotely just type the ip address or the name of your Raspberry like so for instance: http://raspi:8888. Then you should see the authorisation app like below.

…

[marcnlx]

Awesome module! I use it in fullscreen_below which creates a nice effect!
I did change the css a little (added margin-left and changed width to 90% for the album cover because this looks nicer with my custom.css), but this is really a great module.

[raywo]

@marcnlx Awesome idea! Maybe you can add a screenshot.

[BananaBro]

Very cool module! Thanks for that.
The Setup with your App is really easy and it seemed to work. After a restart your module loaded and showed my currently played song.
But it won’t update. Progress bar wont run forwards. Next Song is not shown. Even after another restart the initial song is displayed.

Do you have any Tips how to fix this? :)

[raywo]

@BananaBro sounds weird. Do you have a free or a premium account?

[BananaBro]

Premium Account. I just tried to create a new App in the Spotify developer dashboard with new Client ID and Secret and set up the Module once more.
For now its working…
Maybe it was just Spotify messing something up! I keep you updated if it will stop working for me again.
Thanks again for this nice module.

[raywo]

@BananaBro glad to hear that it is working now.

[marcnlx]

@raywo said in [MMM-NowPlayingOnSpotify] – Display the currently on Spotify playing song:

@marcnlx Awesome idea! Maybe you can add a screenshot.

Sure, here you go.

[tidus5]

Thanks!!! just amazing.
Any chance you work on an version for touch screen @Raywo?

[raywo]

@tidus5 what should that version do?

[goprojojo]

Workst great!
Is it possible to change the size of the album cover?

[raywo]

@goprojojo The width of the cover art is determined by the width of the column you placed the module in. It is set to 100%. You can change it by adjusting the width property of the .NPOS_albumCover class in css/styles.css.

[tidus5]

@raywo
control the volume, play pause next previous and maybe the playlist content ?

every morning I changing my playlist on my phone and this is my ultimate goal to have it in the screen :-)

[raywo]

@tidus5 Controlling volume and playback should be feasible. But changing the playlist? That would require an interface and a lot of interaction. That kind of defeats the purpose of a MagicMirror.

Actually I don’t know whether I will work on this control features but feel free to fork the project and add as much as you want.

[schlachtkreuzer6]

Hi @raywo
It stuck on step two… after I register the app to my account. Just saying: Wait for step 2 to complete. And doing nothing more.
Hmm, any idea? Did I made a mistake?

SOLUTION:
Okay for anyone running into the same problem:
You can get everything out of the link from your browser. Just copy and paste it in a text editor.

Link looks like that:
http::8888/#access_token=your access token&refresh_tokenyour refresh token&client_idyour client ID from spotify developer site&client_secretyour client secret from the develover site

Copy the 4 elements in the module configuration:

{
module: "MMM-NowPlayingOnSpotify",
position: "bottom_left",

   config: {
     showCoverArt : "true",
     clientID: "your client ID",
     clientSecret: "your client secret",
     accessToken: "your access token",
     refreshToken: "your refresh token",
      }
},

That’s it 😊

[raywo]

@schlachtkreuzer6 You need to enter both your secret ID and client secret in the input boxes and then click “Authorize my app!”. After that the message in Step 3 should disappear and show you exactly what you need to copy in your config.js.

You need to make sure that you put the shown callback url in the app’s setting on Spotify.

[schlachtkreuzer6]

@raywo I did that but it stops after the authorization.