Building a Sonos Controller with Vue, an iPad and a Raspberry Pi – Introduction

sonos-controller-with-vue-ipad-and-raspberry-pi-version-on-ipad

I purchased a pair of Sonos Speakers and I’m in love, however it would be cool not to use my Phone to control them, but instead mount an iPad to my wall and be able to manage it from that. I’ve decided to purchase a Raspberry Pi Zero W and use our old iPad Mini (which was just collecting dust anyway), and built a simple dashboard with enough features to be useable.

Requirements

  • A tablet, capable of browsing the internet — iPad Mini in my case
  • Any device capable of running a Node server — Raspberry Pi Zero W in my case
  • A WiFi connection or similar
  • Sonos Speaker

Design

A late evening, I launched Sketch and started drafting the initial design, featuring my dog and some very basic functionality:

  • A play queue
  • Room selector
    • And volume for each room
  • Playback controls
  • Todays weather

Building a Sonos Controller with Vue, an iPad and a Raspberry Pi

Notes

Since designing this, and after building it, I’ve realized that 3 playback buttons on top makes no sense for people with more zones/rooms, so I’ve integrated the pause/play button directly into the room icon, and made switching song possible below each icon (below the volume slider). Screenshots will come.

Keeping You Posted

This was simply an introduction post, telling you about the project. I will create 2-3 blogposts more related to this, and finally share the source code when everything is done.

Signup below and select “Sonos Controller”, and I’ll promise only to notify you about posts related to this series.

I promise, that I'll keep your e-mail safe, and only send occasional e-mails. Opt-out is super easy as well.

Lasse Rafn
I'm a frontend and backend developer, primarily using Vue and Laravel.

Leave a Comment

Your email address will not be published. Required fields are marked *