faust-web-component

This package provides two web components for embedding interactive Faust snippets in web pages.

<faust-editor> displays an editor (using CodeMirror 6) with executable, editable Faust code, along with some bells & whistles (controls, block diagram, plots) in a side pane. This component is ideal for demonstrating some code in Faust and allowing the reader to try it out and tweak it themselves without having to leave the page. (For more extensive work, it also includes a button to open the code in the Faust IDE.)
<faust-widget> just shows the controls and does not allow editing, so it serves simply as a way to embed interactive DSP.

These components are built on top of faustwasm and faust-ui packages.

This fork

This fork is created by @ojack for experimental use. Some changes include:

exposing the faust audio node via the 'node' property of the faust editor. parameters of a running program can be set bye calling

editor.node?.setParamValue(path, value)

where editor is an instance of the 'faust-editor' custom element

adds event listener for when the code is compiled

editor.addEventListener('faust-code-compiled', (e) => { console.log('COMPILED', e })

adds a 'run()' function for programmatically running current code editor.run()
allows styling of components using CSS variables The available variables are: -main-bg-color, --main-color, and --main-graph-color

These can be set externally via setting CSS properties on the custom element:

  <faust-editor style="--main-bg-color: pink, --main-color': green"></faust-editor>

Build Instructions

Clone this repository, then run:

npm install
npm run build

This will generate dist/faust-web-component.js, which you can use with a <script> tag.

Example Usage

The editor and widget components can be used with the following HTML syntax:

<p><em>Here's an embedded editor!</em></p>

<faust-editor>
<!--
import("stdfaust.lib");
ctFreq = hslider("cutoffFrequency",500,50,10000,0.01);
q = hslider("q",5,1,30,0.1);
gain = hslider("gain",1,0,1,0.01);
process = no.noise : fi.resonlp(ctFreq,q,gain);
-->
</faust-editor>

<p><em>And here's a simple DSP widget!</em></p>

<faust-widget>
<!--
import("stdfaust.lib");
ctFreq = hslider("[0]cutoffFrequency",500,50,10000,0.01) : si.smoo;
q = hslider("[1]q",5,1,30,0.1) : si.smoo;
gain = hslider("[2]gain",1,0,1,0.01) : si.smoo;
t = button("[3]gate") : si.smoo;
process = no.noise : fi.resonlp(ctFreq,q,gain)*t <: dm.zita_light;
-->
</faust-widget>

<script src="faust-web-component.js"></script>

When the audio DSP code has inputs, a list of possible audio devices will be displayed and a given device can be selected. The last one is "Audio File" and can be selected to play a default audio file connected to the DSP inputs.

Polyphonic mode

The declare options "[midi:on][nvoices:n]"; coding convention can be used in the DSP code to activate MIDI and polyphonic mode, so for instance:

<faust-widget>
<!--
import("stdfaust.lib");
declare options "[midi:on][nvoices:16]";

process = pm.clarinet_ui_MIDI <: _,_;

effect = dm.freeverb_demo;
-->
</faust-widget>

<script src="faust-web-component.js"></script>

to get a polyphonic clarinet instrument with 16 voices and a global reverb effect.

NPM package

A npm package can be used with the CDN link: https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.2.39/dist/faust-web-component.js (possibly update the version number).

Here is an HTML example using this model:

<p><em>Here's an embedded editor!</em></p>

<faust-editor>
<!--
import("stdfaust.lib");

vol = hslider("volume [unit:dB]", -10, -96, 0, 0.1) : ba.db2linear : si.smoo;
freq1 = hslider("freq1 [unit:Hz]", 1000, 20, 3000, 1);
freq2 = hslider("freq2 [unit:Hz]", 200, 20, 3000, 1);

process = vgroup("Oscillator", os.osc(freq1) * vol, os.osc(freq2) * vol);
-->
</faust-editor>

<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.2.39/dist/faust-web-component.js"></script>

Demo

Concrete use-cases can be seen:

in the Faust documentation site.
in this faust-web-widget and faust-web-editor editable pages.

TODO

Possible improvements:

audio input via file (including some stock signals)
greater configurability via HTML attributes

ojack/faust-web-component