@grame/faust-web-component 0.2.3 → 0.2.4

package/README.md

@@ -9,6 +9,17 @@ This component is ideal for demonstrating some code in Faust and allowing the re
 
 These components are built on top of [faustwasm](https://github.com/grame-cncm/faustwasm) and [faust-ui](https://github.com/Fr0stbyteR/faust-ui) packages.
 
+## Build Instructions
+
+Clone this repository, then run:
+
+```shell
+npm install
+npm run build
+```
+
+This will generate `dist/faust-web-component.js`, which you can use with a `<script>` tag.
+
 ## Example Usage
 
 ```html
@@ -40,18 +51,29 @@ process = no.noise : fi.resonlp(ctFreq,q,gain)*t <: dm.zita_light;
 <script src="faust-web-component.js"></script>
 ```
 
-We plan to soon publish a package on npm soon so that you can use a CDN for hosting.
+## NPM package 
 
-## Build Instructions
+ A [npm package](https://www.npmjs.com/package/@grame/faust-web-component) can be used with the CDN link: https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.2.3/dist/faust-web-component.js (possibly update the version number).
+ 
+ Here is an HTML example using this model:
+ 
+```html
+<p><em>Here's an embedded editor!</em></p>
 
-Clone this repository, then run:
+<faust-editor>
+<!--
+import("stdfaust.lib");
 
-```shell
-npm install
-npm run build
-```
+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>
 
-This will generate `dist/faust-web-component.js`, which you can use with a `<script>` tag as in the above example.
+<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.2.3/dist/faust-web-component.js"></script>
+```
 
 ## Demo
 
@@ -63,4 +85,3 @@ Several steps needs to be done before official release:
 
 - audio input via file (including some stock signals)
 - greater configurability via HTML attributes
-- package publication on npm

package/dist/index.html

@@ -0,0 +1,26 @@
+<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");
+
+declare options "[midi:on][nvoices:12]";
+
+process = pm.clarinet_ui_MIDI <: _,_;
+-->
+</faust-widget>
+
+<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.2.3/dist/faust-web-component.js"></script>
+

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@grame/faust-web-component",
     "description": "Web component embedding the Faust Compiler",
-    "version": "0.2.3",
+    "version": "0.2.4",
     "module": "dist/faust-web-component.js",
     "files": ["src/", "public/", "index.html", "tsconfig.json", "vite.config.js", "dist/faust-web-component.js"],
     "type": "module",