Our hackathon project: Live at Spatie

#laravel

At our Antwerp office, we have 3 speakers that are basically always playing something. Someone kicks off a Spotify/Apple Music session in the morning, someone else hijacks it after lunch, and by the afternoon a few of us are squinting at each other wondering whether the thing that's playing is a song or a warning sign. The taste in this office is, let's say... eclectic, so "What the hell is this?" comes up quite often.

At our most recent hackathon, we (Marceli, Nick, and Tim) teamed up and decided to turn that low-key chaos into a project. We called it Live at Spatie.

Our goals

We didn't want to reinvent Spotify, we just wanted to fix the two things that kept biting us:

  • Let everyone contribute without hijacking. One shared queue, no more "Can you AirPlay this real quick?" followed by three minutes of silence while someone's phone reconnects.
  • Make it obvious what's playing. Given the catalog at hand, "What the hell is this?" should be a one-glance answer, not a Slack thread.

Everything that follows is downstream of those two goals.

What we built

Live at Spatie is a small Laravel + React wrapper around Owntone. Owntone is an open-source media server. We chose Owntone as it's simple to use and it has built-in functionality to connect to our HomePod speakers. With our Live at Spatie wrapper, anyone on the team can search for a song, queue it up, see what's currently playing, and skip it when they need to save their ears. There's a simplified player at the top of the page, a contributions leaderboard on the side, and a Slack bot that can do most of it for you without ever opening the app.

Wrapping Owntone in Laravel

Owntone exposes a perfectly serviceable REST API, so the bulk of the integration is a single App\Services\OwnTone class built on Laravel's Http facade. Most methods are thin wrappers: nowPlaying(), queue(), toggle(), next(), setVolume(). Nothing exciting individually, but very pleasant to use from the rest of the app.

Adding songs (and tracking who did it)

Searching goes through the Spotify API. When someone adds a track, we hand the Spotify URI to Owntone, then compare the queue before and after to figure out which Owntone queue ID maps to the thing we just added. That mapping lives in a QueueItemUser pivot so we always know who queued what, which is where it starts to get fun.

Every song that plays past the 50% mark gets logged to a PlayHistory table. That powers the little contributions leaderboard on the homepage: top DJs get bragging rights, and the rest of us get softly called out for never queuing anything.

A Slack bot with an MCP brain

This was the hackathon's favourite part. The app exposes an MCP server at /mcp/music using laravel/mcp, and the whole thing is almost boringly clean to register:

#[Name('LiveAtSpatie')]
class MusicServer extends Server
{
    protected array $tools = [
        ListUsersTool::class,
        SearchSongsTool::class,
        AddToQueueTool::class,
        NowPlayingTool::class,
        PlayerControlTool::class,
        SetVolumeTool::class,
        // …
    ];
}

Eleven tools in total: searching, queueing, skipping, volume, now-playing, play history, the works. On the Slack side we plugged that MCP into an OpenClaw instance, so you can DM the bot "queue the whole In Rainbows album" and it just... does it. It'll also happily pull album art and toss in a fun fact about whatever is playing, which is exactly the "wait, what is this?" problem we started with.

Where it lives

The Laravel app runs on Laravel Forge like any other. Owntone runs on a Raspberry Pi, connected to our WiFi in the actual office, because that's how it can connect to the speakers. The two are bridged with Tailscale, the Pi joins our tailnet, and the Forge app talks to it like it's on the same local network. No port forwarding, no public Owntone exposure, nothing weird.

There's also a private tile for Live at Spatie on our internal office dashboard — the big TV that lives in the middle of the office, built with laravel-dashboard so the current song is always glanceable without opening a tab.

Building this was a lot of fun and it will definitely improve our office music experience.

Go and check out what we are listing at: https://liveat.spatie.be

Continue reading