A web-based clone of the Spotify Car Thing's now playing UI. Provides control via the Spotify API instead of Bluetooth (no need to pair devices and it can control most playback scenarios). Requires a Premium Spotify account.
Made for the Hyperpixel 4 Square Touch display, using a Raspberry Pi 3A.
Written in SolidJS using SolidStart. The core now playing screen and play/pause functionality is working, more functionality to be added later.
- Clone the repo onto your local computer, then install dependencies:
pnpm i
- Create an OAuth application in the Spotify Developer API portal: https://developer.spotify.com/dashboard
- Add these redirect URLs to the OAuth application config
http://localhost:3000/auth/callback
http://localhost:3000
-
Make a copy of the
.env.examplefile as.env, then enter the Spotify Client ID and secret in the env file fields. We will get the refresh token in a moment. -
Start the development version of the application
pnpm dev
-
Navigate your browser to
localhost:3000/auth/initializeto authenticate with Spotify. After granting access the refresh token will be displayed on screen. Copy this into the env file field for refresh token. -
Stop the previous development run of the app, then build and start the production version
pnpm build
pnpm start
- The app should now be fully functional. Navigate to
localhost:3000and play a song on your Spotify account (wait up to 15 seconds or refresh the page to see the now playing screen).
This application runs as a Node-based web app, which can be displayed in any browser. For my setup, I have a Raspberry PI 3A running DietPi configured to automatically launch Chromium with a tab opened to the location and port of the UI (could be localhost:3000, I have the server running in a Docker container on my NAS on my local network).
- This repo includes the Dockerfile I use for my own self-hosted setup. Check the network settings, as they might be different depending on the environment.
- Custom podcast controls
- Investigate other playback scenarios like when DJ is speaking
- Copy better background color generation logic from the source code reconstruction:
Credit: Other folks rooting and discovering the Spotify Car Thing is a web view running Chromium