Sound Control Master

Overview

SCMaster (Sound Control Master) is a self-hosted, semi-autonomous browser-based background music system, capable of being operated remotely on an isolated network. The target platforms are the latest Chrome and Firefox.

Compared to internet-based streaming services, SCMaster is fully operational without an internet connection when self-hosted. There are no limitations on how many devices can remotely operate the system.

Development

SCMaster was developed by myself over the course of a few weeks.

Since it was required at very short notice for a family event, I used a framework to accelerate development. My initial preference was Angular (TS), but I was unable to use it due to the limited time available to familiarise myself with the workflow and tooling.

For the front-end, I ended up using Vue.js for state management, and Fomantic UI for the user interface. I chose Howler.js instead of the HTML5 audio element for media playback, since it provided a straightforward API.

The back-end server component was developed using RatchetPHP, a websocket library for PHP. This was my first project working with the websocket protocol, and with a PHP framework specifically following the PSR.

Features

The ability to restrict auto-enqueue to certain tracks or even disable auto-enqueue entirely are present - these are features typically restricted to entry-level CD mixer decks, and not available on the majority of mainstream audio players.

The system can be operated from a remote device on an isolated network, allowing an AV operator to be located away from the physical control deck, or for multiple remote AV operators to be present at an event. This functionality is especially useful for volunteer events where staff often have to juggle many different roles, or provide assistance elsewhere at a moment's notice.

Architecture

The front-end contains all the core application logic, with the back-end server providing media files and facilitating communication between multiple front-end clients.

The system was developed with an MVVM (Model-View-View Model) architecture. The components are as follows:

• Model: The back-end implemented in RatchetPHP, responsible for the initial creation of the audio player data and distributing modified player data to clients
• View Model: The front-end JavaScript client, responsible for handling all user input, updating the Model with any modified data, and updating the View via data bindings
• View: The front-end user interface, using Vue for data binding with the ViewModel

Operation

A basic 8-digit 'channel ID' is used to authenticate clients to a session. Multiple separate sessions can co-exist on the SCMaster system. Clients sharing the same 'channel ID' will be authenticated to the same session and will synchronise state with each other.

Whichever front-end is assigned the role of audio playback serves as the 'single point of truth', continously updating other connected clients with track progress and relevant information. Due to this design, tracks cannot be added/removed/refreshed after a session is initialised, as they are stored on the backend.

Technologies

• JavaScript
• Fomantic UI
• Vue.js 2.6.12
• Howler.js
• RatchetPHP (Symfony)
• Websocket