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.

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.

To try it, make test builds it, copies index.html next to it in dist/ and serves the page on http://localhost:8000 (make lists the other targets):

make test

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, the input selector offers:

• test signals: impulse, white noise, pink noise, sine, sweep, square, sawtooth, pulse train, step and tone burst. The selected signal goes to every input of the DSP. Its level (−12 dB by default), frequency, period (of the impulses, of the sweep...) and a restart button are shown in the Test signal tab of <faust-editor>, under the controls of <faust-widget>;
• the audio devices: the microphone is only requested when a device is selected;
• Audio File, a default audio file played into the DSP inputs.

The input attribute selects the input at start, by the name of a test signal or Audio File; without it the first device is selected:

<faust-editor input="impulse">
  <!--
import("stdfaust.lib");
process = fi.resonlp(hslider("freq",1000,100,5000,1), 10, 1) <: _,_;
-->
</faust-editor>

The test signals are generated by a Faust program, src/testsignals.dsp: to add a signal, add an entry to its signal menu and to its selectn.

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.

The HTML index.html example page can be copied and tested in dist folder.

A npm package can be used with the CDN link: https://cdn.jsdelivr.net/npm/@grame/[email protected]/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/[email protected]/dist/faust-web-component.js"></script>

Concrete use-cases can be seen:

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

Possible improvements:

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