jagarinart / glide-radio

Sonify your backend

Glide Radio

Glide Radio is a sonification tool for backends. Wouldn't it be cool if you could listen to ambient music that tells you about what's going on in your backend? It would, which is why we built Glide Radio.

Listen to Public Glide Radio!

Running it

To run the Glide Radio frontend on your machine:

cd client
npm install
npm start

What now?

This frontend will connect to Glide Radio's server and play our public feed. To take it a step further you can now do a couple of things:

1. Play around with the configuration.
2. Modify the existing sound modules or write a new one.
3. Connect your own backend.

Configuration

The frontend has a configuration file that specifies

• where to reach the server
• the display names of the endpoints
• the baseline success and error rates
• parameters for individual modules

See the type definition for an explanation of the global parameters.

Architecture

Glide Radio has a frontend and a server. The server's job is to accumulate event statistics, and to send those to the frontend whenever it asks for it. All the fun happens in the frontend.

This repository only contains the frontend, because our server is very custom to Glide's backend and wouldn't help you very much in connecting to your backend. We are, however, including a server that generates dummy data, to give you a platform to quickly spin up your own if you're so inclined.

The data

The frontend polls the server every 5 seconds to get a summary of events that happened in those 5 seconds. Here's a sample response:

[
  { "endpoint": "play", "success": true, "count": 119 },
  { "endpoint": "play", "success": false, "count": 39 },
  { "endpoint": "getAppSnapshot", "success": false, "count": 35 },
  { "endpoint": "getAppSnapshot", "success": true, "count": 11 },
  { "endpoint": "generateAppFromDescription", "success": false, "count": 89 },
  { "endpoint": "generateAppFromDescription", "success": true, "count": 2 },
  { "endpoint": "reportGeocodesInApp", "success": false, "count": 16 },
  { "endpoint": "reportGeocodesInApp", "success": true, "count": 88 },
  { "endpoint": "getPasswordForEmailPin", "success": true, "count": 61 },
  { "endpoint": "getPasswordForEmailPin", "success": false, "count": 16 }
  { "endpoint": "reloadPublishedAppDataFromSheet", "success": true, "count": 72 },
  { "endpoint": "getPreviewAsUser", "success": true, "count": 31 },
]

We can see that the play endpoint succeeded 119 times and failed 39 times, for example.

Sound generation

Sound is generated on the frontend with Tone.js which uses the Web Audio API.

The individual pieces of sound are generated by independent modules which can be turned on and off in the UI. Every 5 seconds, each active module is triggered to play with the latest data. A good way to get into modifying Glide Radio is to change existing modules and/or adding new ones.

Modules

A good introductory module is ChordSampleBackgroundModule. All it does is play a random sample at the start of each 5 second loop. These are all the modules we have right now:

• ErrorGlitchModule plays a drum track that gets more intense as errors increase.
• EventMelodyModule plays a synthesized melody for an unusual event that occurred.
• EventOneShotModule plays a sample for an unusual event that occurred.
• LooperModule is a drone that increases in pitch and speed as load increases.
• ArpeggiatorModule plays a random pentatonic melody throughout the loop.
• ChordSampleBackgroundModule plays a random chord sample at the start of every loop. Default off.
• ChordSynthBackgroundModule plays a random synthesized chord at the start of every loop. Default off.
• GranularModule is an experimental granular synthesizer. Default off.

Currenly there are 2 main types of audio sources for modules

• Synth audio sources. A synth based audio source generates audio in the browser and uses a sound generator such as (but not limited to) a sine or triangle wave. One example is the ArpeggiatorModule. This type of synth will give you more granular control when mapping data to the properties that make up the sound itself.

• Sample audio sources. A sample based audio source is one that you record and must be prebundled and loaded by your module. One example of this is the LooperModule. A typical use case is to trigger a sound in response to an event.

You are not limited to these approaches as long as you adhere to the module interface below as well as the frontend/server protocol for supplying data to your module.

export interface Module {
    /**
     * The display name of this module.
     */
    readonly name: string;
    /**
     * The module's meter.  This is used to display a live
     * meter in the UI.
     */
    readonly meter: Tone.Meter;

    play(snapshot: StatSnapshot, time: number, settings: PlaySettings): void;
    stop?(): void;

    isMuted(): boolean;
    mute(): void;
    unMute(): void;
}

Frontend/server protocol

The protocol is very simple: the frontend POSTs a request to the configured URL and gets JSON back. You can optionally use Basic HTTP password authentication, in which case the frontend will ask the user for a password.

Use your browser's network monitor to see what the request/response looks like.

The dummy server

First, run the dummy server on your machine:

cd server
npm run build
npm start

Then, modify app.tsx in the frontend to fetch config-dummy.json instead of config.json. Reload your frontend and it should fetch its data from the dummy server.

Please note that it doesn't automatically rebuild, so if you make changes you'll have to build and start again.

Future ideas

• More comprehensive API for melody creation