🎵 Mediocre Media Player Cards

Media player cards for Home Assistant that let you group speakers, add custom action buttons, browse, search for music, manage your queue and more. A visual editor is available for all media player card configuration options.

Installation

HACS

1. Open HACS in your Home Assistant instance
2. Click the three dots in the top right corner
3. Select "Custom repositories"
4. Add antontanderup/mediocre-hass-media-player-cards as a repository
5. Set category to "Dashboard"
6. Click "Add"
7. Search for "Mediocre Hass Media Player Cards"
8. Install it and reload your browser

Manual Installation

1. Grab the latest release from the releases page
2. Copy the JavaScript file to your www/ directory in your Home Assistant setup
3. Add the resource to your Lovelace config:

resources:
	- url: /local/mediocre-media-player-card.js
		type: module

4. Refresh your browser

Mediocre Media Player Card

A standard-sized media player card for a single entity. Supports grouping, custom actions, and (optional) Music Assistant integration.

→ Read full documentation

---

Mediocre Massive Media Player Card

A full-sized, feature-rich card for a single media player. Includes all features of the standard card, plus multiple display modes.

→ Read full documentation

---

Mediocre Multi Media Player Card

Control and view multiple media players at once. Great for dashboards with several speakers or grouped devices.

→ Read full documentation

---

Mediocre Chip Media Player Group Card

A compact chip-style card for quickly grouping/ungrouping speakers. Perfect for putting under your media player card of choice.

→ Read full documentation

---

More Features & Documentation

• Universal Media Player integration
• Search functionality
• Custom Styles
• Queue Management
• LMS Features
• Music Assistant features

Troubleshooting

If you run into issues:

1. Check that your entity supports the media player features needed
2. Verify your configuration syntax
3. Look for errors in your browser's developer console

Thank You

Special thanks to the following projects and their authors for inspiration, ideas, or direct/indirect contributions:

• mini-media-player
• bubble card
• mushroom cards
• mass-queue
• lyrion-cli
• music assistant
• lyrion music server

Your work and creativity have helped make this project better!

Development

These cards are built with Preact wrapped in web components. For local development:

# Install dependencies
yarn install

# Build for development
yarn dev

# Continually build when files change
yarn dev:watch

# Build for production
yarn build

When using yarn dev, the output file will be named mediocre-hass-media-player-cards-dev.js instead of mediocre-hass-media-player-cards.js.

You can also create a .env.development file (based on the .env.development.example) to use custom component names during development. This is usefull if you want to test in a live environment without risking breaking anything for your users (family members :D).