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

[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.

[muffinimal]

Hey @raywo ,

Thanks developing this module. It’s one of the first modules I tried to set up on my setup.

Your instructions on how to configure very clear. Being new to MagicMirror I couldn’t get it to work fully, though. I finally figured out what I did wrong (I am still in the dark as to where I can find some useful logs): I installed your module to /home/pi instead of to the MagicMirror-folder.

As I didn’t want to bother on finding out on how to uninstall, I simply moved the entire directory to the right place and the module seems to run fine now :D

[dherl0623]

Awesome module! I’d been using the MMM-Scrobbler, but this is a better module in my opinion. Your instructions are clear and easy to follow as well! I really like how instant it is as well. I currently just set this up while on break at work, so I can’t check it out at home yet, but watching from a VNC, it is incredibly responsive! Thanks again sir!