ADC: Web UIs for Music Apps

In this workshop we’ll cover the fundamentals of building web UIs for music apps and plug-ins using modern front-end development techniques.

Throughout the worksop we will cover:

• What is meant by Web UIs and how you may benefit from using them in your apps,
• Introduction to the main concepts and technologies used in modern frontend development,
• Build an example plugin which performs string synthesis using Karplus-Strong algorithm in CMajor,
• Connecting the web UI to the plugin,
• Establishing a two-way communication between the web UI and plugin code

Technologies used at the workshop include:

• CMajor - programming language for audio software,
• HTML/CSS/JavaScript,
• Lit - modern JavaScript library for building web components
• Node.js - JavaScript runtime

This will be a self-contained workshop aiming to be accessible to all levels of learning - all elements used in the practical part of the workshop will be thoroughly explained in the introduction.

How To Run

GUI/ Frontend

To install dependencies and watch changes:

• run npm i in karplus_strong/ui in the terminal to install dependencies;
• run npm run watch to watch changes;
• run npm run build to build the frontend.

Cmajor in VSCode

To run the Cmajor Patch with VSCode extension, simply download the CMajor extension and run using the command palette:

• CTRL/ CMD + Shift + P
• type Cmajor and select: Run Patch

Cmajor as a Command Line Tool

• Visit: https://github.com/cmajor-lang/cmajor/releases
• Install the Latest release of Cmajor
• run cmaj play /path-to-your-repo/karplus_strong/main.cmajorpatch

Load in your DAW with the Cmajor VST/AU Plugin

In the binary releases, you’ll find an installer for the Cmajor VST/AU plugin, which can be loaded into most DAWs like any other plugin.

When you create an instance of this plugin in a DAW, you can drag-and-drop a .cmajorpatch file onto the plugin’s GUI to make it load that patch.