If you use
shairport-sync you should be able to get this webapp working.
Before we begin
First, some requirements for your home network.
- AirPlay® source
- iTunes® on a computer. Music* app in iOS™. Rogue Amoeba's Airfoil app (which happens to work with Spotify app on macOS)
shairport-syncas AirPlay® receiver
shairport-syncneeds to be built with MQTT support. See wiki - Build shairport-sync
- MQTT broker
- An MQTT broker, like
mosquitto, visible on same network. See wiki - Configure MQTT broker
- An MQTT broker, like
- Any computer that can run this Python 3-based webserver app (tested on macOS™ and Raspbian)
Requirements 2., 3., and 4. can all be hosted on the same computer, like a Raspberry Pi®, for example
One final requirement: A web-browser to display the served webpage.
For our purposes, this guide assumes a Raspberry Pi running Raspbian
stretch, with the above requirements 1.) 2.) and 3.) being already met, and with req's 2.) and 3.) running on same Raspberry Pi where the webserver app (4.) runs.
See wiki for additional pointers.
Install python dependencies and clone this repo
# Install a python3 dev setup and other libraries sudo apt install -y python3-pip python3-venv \ python3-setuptools python3-wheel git mosquitto-clients # Validate MQTT broker config. E.g., from two different bash sessions: # .. mosquitto_sub ... # .. mosquitto_pub ... # grab a copy of this repo git clone https://github.com/idcrook/shairport-sync-mqtt-display.git cd shairport-sync-mqtt-display # now proceed to the next section: "install"
Steps to run on computer for webserver (in a git clone of this repo). We rely on python3's built-in
venv module for dependencies.
cd python-flask-socketio-server python3 -m venv env source env/bin/activate pip install flask pip install flask-socketio pip install paho-mqtt pip install wheel # not required; avoids a pyyaml benign build error pip install pyyaml
Copy the example config file and customize.
cp config.example.yaml config.secrets.yaml $EDITOR config.secrets.yaml # $EDITOR would be nano, vi, etc.
Configure the MQTT section (
mqtt:) to reflect your environment.
- For the
topic, I use something like
topicneeds to match the
mqtt.topicstring in your
SSHOSTNAMEis the name of where
- Note, there is no leading slash ('
/') in the
- Use the same mqtt broker for
hostthat you did in your MQTT broker config testing and
- For the
Customize the webpage UI section (
webui:) if desired.
Assumed music playing using AirPlay® (e.g. iTunes®), an MQTT broker, and
shairport-sync with MQTT support are already online. Also assumes that
config.yaml has been configured to match your home network environment.
# this is the python virtual environment we installed into source env/bin/activate python app.py # open it in your web browser, e.g.: open http://0.0.0.0:8080
Use IP address (in place of
0.0.0.0) to connect from other devices on your network
Automatically launch webserver on boot
systemd service file at
python-flask-socketio-server/etc/shairport-sync_web.service in this git repository.
The file's header includes instructions that can be used to install the python webserver as a systemd service. In this way, it will run automatically at boot-up. It will automatically serve metadata when
shairport-sync configured with MQTT metqadata is an AirPlay® target.
TODO: move troubleshooting section to wiki
Name or service not known
If you get an error like
socket.gaierror: [Errno -2] Name or service not known
you should add the mqtt broker host that you are using to
/etc/hosts on the computer that is hosting the webserver apple. For example, and entry like:
Browser address to connect to on home network
To connect from across your home network, you will need to use the LAN IP address of your webserver computer. Placed in an URL, it might be something like
ip addr show can reveal host IP addresses.
Moved to issues and managed there.
- MQTT metadata support released in
- many projects using
shairport-sync's older metadata pipe technique, including https://github.com/idubnori/shairport-sync-trackinfo-reader for styling inspiration
Original development setup:
- iTunes® and Airfoil Airplay-ing to Raspberry Pi(s).
- Raspberry Pi Model 3 B
shairport-sync, configured with MQTT to send cover artwork and parsed metadata
- configured to connect to MQTT broker
- developed in
python3.7installed from Homebrew on macOS Mojave
- deployed on a Raspberry Pi running Raspbian
- Safari browser on macOS™, Mobile Safari on iOS™ 9 and iOS™ 12. Chrome.
- Dark mode tested in macOS™ Safari 12, iOS™ Mobile Safari 13
1: Trademarks are the respective property of their owners.⤸