README.md

Hip-Hop

High Performance Hybrid Audio Plugins

Superseded by dpfwebui. The new project is a scaled down version (no DSP, only UI) with a permissive ISC license.

This project builds on top of the DPF audio plugin framework to add web-based UI support. Plugins can leverage JavaScript and related tech to provide complex user interfaces on the computer running the plugin and optionally over the local network.

Examples running on Bitwig for Linux

---

Features

• Based on DISTRHO Plugin Framework (DPF)
• Subset of the UI and Plugin interfaces ported to JavaScript and AssemblyScript
• C++ sill possible for DSP development
• WebKitGTK or CEF on Linux, WKWebView on macOS, Edge WebView2 on Windows
• VST3 / VST2 / CLAP / LV2 plugin formats
• Network UI support, for example for remote control using a tablet
• Just the powerful basics

The following language combinations are possible:

DSP	UI	Comments
C++	JS	Web view user interface, see examples zcomp and webgain.
AS	JS	Web view user interface, see example jitdrum.
AS	C++	DPF Graphics Library (DGL), see example astone.
C++	C++	No need for this project, use DPF instead.

Example JavaScript UI code

class ExampleUI extends DISTRHO.UI {

    constructor() {
        super();
    
        // Connect <input type="range" id="gain"> element to a parameter

        document.getElementById('gain').addEventListener('input', (ev) => {
            this.setParameterValue(0, parseFloat(ev.target.value));
        });
    }

    parameterChanged(index, value) {
        // Host informs a parameter change, update input element value

        switch (index) {
            case 0:
                document.getElementById('gain').value = value;
                break;
        }
    }
    
}

The complete UI interface is defined here.

Example AssemblyScript DSP code

export default class ExamplePlugin extends DISTRHO.Plugin implements DISTRHO.PluginInterface {

    private gain: f32

    setParameterValue(index: u32, value: f32): void {
        // Host informs a parameter change, update local value

        switch (index) {
            case 0:
                this.gain = value
        }
    }

    run(inputs: Float32Array[], outputs: Float32Array[], midiEvents: DISTRHO.MidiEvent[]): void {
        // Process a single audio channel, input and output buffers have equal size

        for (let i = 0; i < inputs[0].length; ++i) {
            outputs[0][i] = this.gain * inputs[0][i]
        }
    }

}

The complete plugin interface is defined here.

Plugin implementations

Consul
Castello Reverb

Related projects

Guinda
Pisco