audiocontrol
Web frontend for:
- HiFiBerry BeoCreate DSP (on BeoCreate Pi) — volume, parameters, profiles
- Mopidy (local) — playback, queue, playlists
- Snapcast (local) — clients, groups, volume
All APIs are proxied through Nginx — no CORS, no exposed ports.
Prerequisites (Audio Server / Pi 5)
sudo apt install nginx nodejs npm
Node 18+ recommended. Check with node --version. If too old:
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt install nodejs
Build
cd audiocontrol
npm install
npm run build # outputs to dist/
Deploy
# Copy build output
sudo mkdir -p /var/www/audiocontrol
sudo cp -r dist/* /var/www/audiocontrol/
# Install Nginx config
sudo cp nginx/audiocontrol.conf /etc/nginx/sites-available/audiocontrol
sudo ln -s /etc/nginx/sites-available/audiocontrol /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx
Configuration
BeoCreate hostname
Edit nginx/audiocontrol.conf and update the upstream:
upstream beocreate { server beocreate.local:5005; }
Replace beocreate.local with the actual hostname or IP of your BeoCreate Pi.
Mopidy — enable HTTP extension
Add to /etc/mopidy/mopidy.conf on the Audio Server:
[http]
enabled = true
hostname = 127.0.0.1
port = 6680
Restart Mopidy: sudo systemctl restart mopidy
HiFiBerry DSP REST API — enable CORS (optional)
If you ever need direct browser access, the hifiberrydsp REST server may need CORS headers. Through Nginx you don't need this — the proxy handles it.
Snapcast
Ensure Snapserver is running and Snapcast's JSON-RPC WebSocket is on port 1705 (default).
Development
npm run dev
The Vite dev server proxies all APIs (edit vite.config.js to match your BeoCreate hostname).
Dev server runs on http://localhost:5173
API assumptions
The HiFiBerry DSP REST API endpoints used:
| Method | Path | Notes |
|---|---|---|
| GET | /api/volume | { volume: 0-100 } |
| POST | /api/volume | body { volume: N } |
| GET | /api/parameters | array of parameter name strings |
| GET | /api/parameter/:name | { name, value, min?, max? } |
| POST | /api/parameter/:name | body { value: N } |
| GET | /api/profiles | array of profile name strings |
| GET | /api/profile | { profile: 'name' } |
| POST | /api/profile/:name | activate profile |
| GET | /api/metadata | { key: value, ... } |
Adjust src/api/hifiberry.js if your firmware uses different paths or response shapes.