The 'MMM-SpotifyConnectUI' Magic Mirror module is for displaying cover, artist and track-information.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
images Updated 1.0.2 Aug 11, 2016
MMM-SpotifyConnectUI.js Update Feb 15, 2017
custom.css Fixed styling issue and some Aug 11, 2016
node_helper.js Merge branch 'dev' of… Aug 7, 2016

MagicMirror Module: MMM-SpotifyConnectUI

The 'MMM-SpotifyConnectUI' module is for displaying information from Spotify Connect (running on the RPi) via spotify-connect-web (prerequisite which have to be installed seperately). The module provides no interaction other than showing if connected, what song is playing or if paused. You have to start and interact using Spotify on PC or mobile.

Screenshot of the module

Current version is 1.0.2. See changelog for version history.


You need to have Spotify-Connect-Web installed, a Spotify Premium subscription and a Spotify Connect API-key for this module to work.

Note: It seems that Spotify changed how they give out keys. You have fill out out an application and tell it's for private use. More info at Spotify Connect Web issue #104.

Detailed instructions you find here.

I you are too lazy to read it all or you don't want to run it under Docker, I've summarized the steps below.

Installing Spotify-Connect-Web

# cd ~
# wget   
# tar zxvf spotify-connect-web_0.0.3-alpha.tar.gz

You will find a new folder: ~/spotify-connect-web.

Now you need to register as developer at Spotify (free!) to be able to register and download a 'spotify_appkey.key'. This file should be placed in the ~/spotify-connect-web folder.

Running Spotify-Connect-Web as service

Start a new SSH terminal and create a new script-file:

# nano ~/spotify-connect-web/

The content of this file should be something along this:

cd /home/pi/spotify-connect-web
./spotify-connect-web -n MAGICMIRROR -o plughw:CARD=ALSA,DEV=1

-n is for the name Spotify Connect will broadcast itself as. -o Is for the output device. I'm using HDMI. It might or might not work for you. Go Google! ;-)

Remember to set permissions:

# sudo chmod a+x ~/spotify-connect-web/

Next you need to create the service-file, by running:

# sudo nano /etc/systemd/system/spotifyconnect.service

The content of this file should be something along this:

Description=Spotify Connect
ExecStartPre=/bin/sleep 25

Remember to set permissions:

# sudo chmod a+x /etc/systemd/system/spotifyconnect.service

Now it's time to enable and start the service:

# sudo systemctl daemon-reload
# sudo systemctl enable spotifyconnect.service
# sudo systemctl start spotifyconnect.service

If you need to see status, you can run:

# sudo systemctl status spotifyconnect.service

#Installation of the module

In your terminal, go to your MagicMirror's Module folder:

# cd ~/MagicMirror/modules

Clone this repository:

# git clone

Configure the module in your config.js file.

Using the module

To use this module, add it to the modules array in the config/config.js file:

modules: [
		module: 'MMM-SpotifyConnectUI',
		position: 'fullscreen_below',
		config: {
			// No further configuration needed unless you run another version of spotify-connect-web on another box.
			// See MMM-SpotifyConnectUI.js for these settings.

Configuration options

At the moment there is no need to change any of these properties - unless you run Spotify-Connect-Web on another box:

Option Description
Protocol What protocol SCW uses.

Default value: 'http'
Host What hostname SCW is available on.

Default value: 'localhost'
Port What port SCW uses.

Default value: '4000'
RemoteName What API SCW uses for getting the name this unit will broadcast itself as.

Default value: '/api/info/display_name'
MetadataApi What API SCW uses for getting metadata of current playing song.

Default value: '/api/info/metadata'
StatusApi What API SCW uses for getting status of the Spotify Connection state.

Default value: '/api/info/status'
ImageUrlApi What API SCW uses for getting the correct cover photo image url.

Default value: '/api/info/image_url/'