COx2 / audio-plugin-web-ui

This is an example of implementing a graphical user interface for audio plugin with web technology stack.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

audio-plugin-web-ui

This is an example of implementing a graphical user interface for audio plugin with web technology stack.

Motivation

To introduce a method for creating the GUI of audio plugins using web technologies by combining JUCE and CHOC. This approach enables flexible and effective GUI prototyping, incorporating multiple technological elements.

Examples

In this repository, you can build two audio plugins named WebGain and DenoGain.

WebGain

It seamlessly integrate a single HTML file as C++ binary data into projects. The controller utilizes the input elements of HTML, p5.js is used for background rendering, CSS animations are used for animations of HTML elements, and the graphical user interface (GUI) is constructed.

webgain

DenoGain

It utilizes a technology stack commonly used in web frontend development, including Vite, Deno, Svelte, and TypeScript. It ensures the ability to render web resources generated by the build system for distribution and retrieve web resources from a development server. In this program, the provision of web resources involves implementing a simple web server-like function using the CHOC API, and the resources are streamed to the WebView based on Fetch calls from the WebView.

DenoGain

How to build

Prerequisites

In general, having a setup that allows building JUCE should be sufficient. If possible, it's reassuring to verify whether the JUCE DemoRunner can be successfully built.

  • Visual Studio: 2022 (Windows)
  • Xcode: 14.2 or later (macOS)
  • Clnag: 14 or later (Linux)
  • Ninja-build: 1.11 or later (Linux)
  • CMake: 3.25 or later
  • Git: 2.3 or later

Run build scripts

Windows:

.\Scritps\build_windows_msvc2022.bat

macOS:

./Scritps/build_macos_xcode.sh

Linux:

./Scritps/build_linux_ninja.sh

Attention Regarding Licenses

If you are using this project to create and distribute software, please ensure compliance with the licenses of the following software libraries:

About

This is an example of implementing a graphical user interface for audio plugin with web technology stack.

License:MIT License


Languages

Language:C++ 47.9%Language:CMake 35.7%Language:HTML 9.8%Language:Svelte 3.2%Language:CSS 0.9%Language:Batchfile 0.9%Language:Shell 0.7%Language:Dockerfile 0.6%Language:TypeScript 0.2%Language:JavaScript 0.1%