A nice web interface for showing the shairport-sync metadata (and Spotify too now!).
| Horizontal (Fancy dark) | |
|---|---|
|
|
| Horizontal (Fancy light) | |
|
c3fcea5f-5a77-474a-98da-c40da8357d4c.webm
Built using:
- Node.js 18.1.0
- shairport-sync-reader
- socket.io
- node-vibrant
GitHub Copilot (because I'm learning Node)NO DON'T DO THAT YOU WON'T LEARN ANYTHING AI IS A DISGRACE AND KILLS THE PLANET- parts of CSS from neumorphism, pure css by Bryanna Lucyk (though after some refactorings I mainly use the neumorphic drop-shadows)
- George Francis' Generative Landing Page & WebGL Powered Background
- the mighty power of
F L E X B O X
This project is inspired by Shairport Sync Metadata Display and works similarly, but without any fancy transitions.
- Node.js - used 18.1.0, other versions should also work
- shairport-sync build with
--with-metadataoption and configured, obviously. Preferably under some Linux distro as that's what the project's been written under. Unless you understand Cygwin pipes. Then teach me. Or you got the UDP working, then it should run just fine under Windows
- just the WebAPI token
$ npm install
$ npm start
| Feature | Shairport | Spotify |
|---|---|---|
| Song metadata | ✅ | ✅ |
| Song cover | ✅ | ✅ |
| Song (inital) progress | ❌ | ✅ |
| Play/pause support* | ❌ | ✅ |
| Seeking* | ❌ | ❌ |
Usually the ❌s are in progress.
*Only visual feedback, not controls
Using the shairport-sync-reader you get track title, album, artist and an image. There's a whole lot more metadata available so you can easily add your own favorite info, but I didn't need that, so it's not used.
Everything is written to fit many screen sizes, scales and both horizontal and vertical orientations. Now there are no hardcoded pixel sizes (maybe apart from blur(70px)).
The current @media query might not fit your needs though, but you can easily change it.
Currently 3 types of backgrounds are supported:
- Blurred Image - the same image as on the cover, but blurred
- Gradient - gradients generated from the color palette
- Fancy - WebGL based background mimicking Apple Music blur and others (personal favorite)
All support palette swapping for bright/dark album covers for greater visibility.
They all have their pros and cons, but you can decide which you like the most by clicking on the image to toggle between them (current selection is saved to local storage so you don't have to redo this every time).
- Sometimes, in very specific cases, the palette will be undefined and the app will crash. I will somehow handle this case in the future, but for now I recommend running it with a utility like forever
- I have to get to the bottom of this though. Goodbye Moonmen on Apple Music always triggers the crash. Perhaps it's jpg instead of png?
- After 1h Spotify token will expire. Restarting the app works fine, but it's not ideal
- Small and quick notification what background is selected on change (since in some cases they are indistinguishable)
- Stopping the spinning animation once paused, and resume when played (Spotify is done, Shairport in progress)
- Support for WS2812B LED strips (unsure if via this project, or a seperate one)
- HomeKit lights support (but super far into the future as I don't even own a single RGB lightbulb)
- Other providers (like Pandora or Tidal). This is however somewhat easy to do right now if you know the API, as the sockets are universal for providers
This project was build with Raspberry Pi Zero W in mind. But is no longer. I decided that it's too much for a little poor Pi Zero to handle both a server and Chromium so if you want to run it on Pi just disable animations and Fancy background.
Also, the code probably could've been written more cleanly and overall better. Considering this project is still in progress some things may change for the better. Or worse if I become a feature creep (looking at the roadmap, yeah).
And yes, I know, move the css and js outside. I know, I tried, and I'm too lazy. Goddamit Jarek. Thanks though!