Il nostro progetto hackathon: Live at Spatie

Nel nostro ufficio di Anversa, abbiamo 3 speaker che praticamente riproducono sempre qualcosa. Qualcuno avvia una sessione Spotify/Apple Music la mattina, qualcun altro la dirotta dopo pranzo, e nel pomeriggio alcuni di noi si guardano accigliati chiedendosi se ciò che sta suonando sia una canzone o un segnale di pericolo. Il gusto in questo ufficio è, diciamo... eclettico, quindi "Che diavolo è questo?" salta fuori abbastanza spesso.

Al nostro ultimo hackathon, noi (Marceli, Nick e Tim) abbiamo fatto squadra e deciso di trasformare quel caos controllato in un progetto. Lo abbiamo chiamato Live at Spatie.

I nostri obiettivi

Non volevamo reinventare Spotify, volevamo solo risolvere i due problemi che continuavano a morderci:

• Far contribuire tutti senza dirottare. Una coda condivisa, niente più "Puoi fare AirPlay al volo?" seguito da tre minuti di silenzio mentre il telefono di qualcuno si riconnette.
• Rendere ovvio ciò che sta suonando. Data la mole di brani a disposizione, "Che diavolo è questo?" dovrebbe avere una risposta in un colpo d'occhio, non un thread su Slack.

Tutto ciò che segue è una conseguenza di questi due obiettivi.

Cosa abbiamo costruito

Live at Spatie è un piccolo wrapper Laravel + React attorno a Owntone. Owntone è un media server open-source. Abbiamo scelto Owntone perché è semplice da usare e ha funzionalità integrate per connettersi ai nostri speaker HomePod. Con il nostro wrapper Live at Spatie, chiunque nel team può cercare una canzone, metterla in coda, vedere cosa sta suonando e saltarla quando ha bisogno di salvare le proprie orecchie. C'è un player semplificato in cima alla pagina, una classifica dei contributi laterale e un bot Slack che può fare gran parte delle operazioni senza nemmeno aprire l'app.

Avvolgere Owntone in Laravel

Owntone espone un'API REST perfettamente utilizzabile, quindi la maggior parte dell'integrazione è una singola classe App\Services\OwnTone costruita sulla facade Http di Laravel. La maggior parte dei metodi sono wrapper sottili: nowPlaying(), queue(), toggle(), next(), setVolume(). Nulla di emozionante singolarmente, ma molto piacevoli da usare dal resto dell'app.

Aggiungere canzoni (e tracciare chi lo ha fatto)

La ricerca passa attraverso l'API di Spotify. Quando qualcuno aggiunge un brano, passiamo l'URI Spotify a Owntone, poi confrontiamo la coda prima e dopo per capire quale ID di coda Owntone corrisponde al brano appena aggiunto. Quella mappatura vive in una tabella pivot QueueItemUser così sappiamo sempre chi ha messo in coda cosa, ed è qui che inizia il divertimento.

Ogni canzone che supera il 50% di riproduzione viene registrata in una tabella PlayHistory. Questo alimenta la piccola classifica dei contributi nella homepage: i migliori DJ ottengono il diritto di vantarsi, e il resto di noi viene gentilmente ripreso per non aver mai messo in coda nulla.

Un bot Slack con un cervello MCP

Questa è stata la parte preferita dell'hackathon. L'app espone un server MCP su /mcp/music usando laravel/mcp, e il tutto è quasi noiosamente pulito da registrare:

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

Undici strumenti in totale: ricerca, coda, salto, volume, ora in riproduzione, cronologia di riproduzione, tutto. Sul lato Slack abbiamo collegato quel MCP a un'istanza OpenClaw, così puoi mandare un DM al bot "metti in coda l'intero album In Rainbows" e lui... lo fa. Inoltre recupera volentieri la copertina dell'album e aggiunge una curiosità su ciò che sta suonando, che è esattamente il problema "aspetta, cosa è questo?" da cui siamo partiti.

Dove vive

L'app Laravel gira su Laravel Forge come qualsiasi altra. Owntone gira su un Raspberry Pi, connesso al nostro WiFi in ufficio, perché è così che può connettersi agli speaker. I due sono collegati con Tailscale, il Pi entra nella nostra tailnet, e l'app Forge ci parla come se fosse sulla stessa rete locale. Niente port forwarding, niente esposizione pubblica di Owntone, niente di strano.

C'è anche una tile privata per Live at Spatie sulla nostra dashboard interna dell'ufficio — la grande TV che sta in mezzo all'ufficio, costruita con laravel-dashboard così la canzone attuale è sempre visibile senza aprire una scheda.

Costruire questo progetto è stato molto divertente e migliorerà sicuramente la nostra esperienza musicale in ufficio.

Vai a vedere cosa stiamo trasmettendo su: https://liveat.spatie.be