DIY : Reviving a console stereo with a Raspberry Pi and PiMusicBox

Code

PiMusicBox is awesome. It does 99% of what I was trying to accomplish right out of the box. Put in your credentials, boot the server, and you will be playing music in under 10 minutes. The two things I did need figure out were: how to use the display to show the PiMusicBox “Now playing” webpage on the same Pi that the server was running on, and adjust the CSS of that page to show just the artwork, artist, and name of the currently playing track.

First, showing the webpage on the same machine as the server. This requires two things, showing a graphical interface from the command line, and a browser. To display a GUI I used the startx command. I do not remember if I had to install this myself or if the PiMusicBox version of Raspbian comes with it. Either way, startx starts up a familiar desktop window manager GUI. Easy enough. You can pass arguments to startx to start specific programs, and then pass additional flags to those programs. You’ll see what I mean shortly.

Installing a browser, Chromium in this case, was easy. Getting it working the way I wanted was not. The issue lies with Linux permissions. I’m not going to go into it here, frankly because I don’t fully understand exactly what I did. I played around with the steps discussed in this thread in order to launch Chromium from Xserver. Chromium has a nice feature called kiosk mode which shows a webpage full screen with no URL bar or scroll bars. I can now go from the command line to a webpage in kiosk mode with the following command

startx chromium --kiosk http://192.168.0.1

Once everything was installed and could be launched manually, it was time to automatically run it on startup. I used Python to run this command using os.system This script will alongside the server starting up when the Pi boots. Note the exit command. If you do not exit Python explicitly, the script may stay active eating up memory.

#!/usr/bin/env python
import os
import sys
from time import sleep
# give it a second
sleep(3)
# boot chromium
os.system('startx /usr/bin/chromium --kiosk --incognito --aggressive-cache-discard --window-size=480,800 --start-fullscreen --disk-cache-dir=/dev/null --disk-cache-size=0 "http://192.168.86.35:6680/mobile/index.html#/playback"')
# exit the python script
sys.exit(0)

Command

startx /usr/bin/chromium --kiosk --incognito --aggressive-cache-discard --window-size=480,800 --start-fullscreen --disk-cache-dir=/dev/null --disk-cache-size=0 "http://192.168.86.35:6680/mobile/index.html#/playback"
  • startx starts the GUI
  • /usr/bin/chromium starts the chromium browser
  • --kiosk start Chromium in kiosk mode
  • --incognito start Chromium in incognito mode, attempt to prevent caching
  • --aggressive-cache-discard again attempt prevent caching, more on that under Issues
  • --window-size=480,800 explicitly set Chromium window size, without this I was getting black borders around the browser window
  • --start-fullscreen again, prevent black borders around the browser window
  • --disk-cache-dir=/dev/null --disk-cache-size=0 more caching issues
  • http://192.168.86.35:6680/mobile/index.html#/playback url to go to when Chromium opens. Note I use the IP address instead of the musicbox.local bonjour address and the “mobile” theme instead of the PiMusicBox theme. For some reason, Chromium did not like musicbox.local

As you can see there are a lot of caching related commands. There is a caching setting somewhere in Chromium or in the PiMusicBox server around the PiMusicBox theme page that I cannot figure out. I can edit the PiMusicBox theme CSS and the changes will take affect sporadically or not at all. For example, if I made a rule like * {color: green;} the change will show up on musicbox.local from my laptop browser after 10 hard refreshes, but never show up on the page on console display or vice versa.

The mobile Music Box theme CSS did not have this issue so I edited that theme’s CSS to my liking.

Kind of hard to take a picture of a screen. It looks better in real life than in either of these pictures. By modifying the CSS of the built in Mobile theme I was able to remove all the extra UI elements and just have the cover art, artist, track, and album displayed.

Other

I used an extension cord with a lamp switch to turn the speakers, lights, and Pi on at the same time.

Really ties everything together.

Finally, I want to mention the RSub plugin for Sublime Text. This plugin was a game changer for me. No more use a command line editor during SSH.

Issues

  • With SSL verification enabled in the Requests library (it is by default), the Python Spotify library will fail to authenticate about 75% of the time with the error below. Sometimes it works, sometimes it doesn’t. I do not know why. Some other PiMusicBox users on the Discourse forum experience the same issue. Disable SSL in the Requests library (line #362 in sessions.py) and Spotify will work perfectly.
ERROR Fetching https://auth.mopidy.com/spotify/token failed: HTTPSConnectionPool(host=’auth.mopidy.com’, port=443): Max retries exceeded with url: /spotify/token
  • With SSL verification disabled, the network requests for cover art will fail randomly. If I reboot the Pi they will work again. I do not know why.
  • The aspect ratio of the cover art is a little off. This bothers me, but I’m too lazy right now to fix it.
  • When you are sitting on the couch you can see the lights hanging down a bit. Again, not a big deal, but I notice it.

Conclusion

PiMusicBox is awesome, and a Hifiberry makes it sound amazing. Go put some lights on some hot trash today!

LEAVE A REPLY

Please enter your comment!
Please enter your name here