Skip to content

Web Interface

Mobile friendly player web interface for OwnTone build with Vue.js, Bulma.

You can find the web interface at http://owntone.local:3689 or alternatively at http://SERVER_ADDRESS:3689.

Use the web interface to control playback, trigger manual library rescans, pair with remotes, select speakers, authenticate with Spotify, etc.

Screenshots

Now playing Queue Music browse Music artists Music artist Music albums Music albums options Music album Spotify Audiobooks authors Audiobooks Podcasts Podcast Files Search Menu Outputs

Usage

You can find OwnTone's web interface at http://owntone.local:3689 or alternatively at http://SERVER_ADDRESS:3689.

Build Setup

The source is located in the web-src folder.

cd web-src

The web interface is built with Vite, makes use of Prettier for code formatting and ESLint for code linting (the project was set up following the guide ESLint and Prettier with Vite and Vue.js 3

# install dependencies
npm install

# Serve with hot reload at localhost:3000
# (assumes that OwnTone server is running on localhost:3689)
npm run serve

# Serve with hot reload at localhost:3000
# (with remote OwnTone server reachable under owntone.local:3689)
export VITE_OWNTONE_URL=http://owntone.local:3689 npm run serve

# Build for production with minification (will update web interface
# in "../htdocs")
npm run build

# Format code
npm run format

# Lint code (and fix errors that can be automatically fixed)
npm run lint

After running npm run serve the web interface is reachable at localhost:3000. By default it expects OwnTone to be running at localhost:3689 and proxies all JSON API calls to this location.

If the server is running at a different location you have to set the env variable VITE_OWNTONE_URL.