render WAM GUIs in footer

packages/wam/index.mjs

@@ -6,7 +6,8 @@ import {initializeWamHost} from '@webaudiomodules/sdk'
 let wams = {};
 
 // this is a map of all WebAudioModule instances (possibly more than one per WAM)
-let instances = {};
+let wamInstances = {};
+export const getWamInstances = () => wamInstances;
 
 // has the WAM host been initialized?
 let initialized = false
@@ -20,8 +21,8 @@ export const loadWAM = async function (name, url, what) {
         initialized = true
     }
 
-    if (!!instances[name]) {
-        return instances[name]
+    if (!!wamInstances[name]) {
+        return wamInstances[name]
     }
     
     if (!wams[url]) {
@@ -38,7 +39,7 @@ export const loadWAM = async function (name, url, what) {
 
     instance.audioNode.connect(getAudioContext().destination);
 
-    instances[name] = instance
+    wamInstances[name] = instance
 
     return instance
 }
@@ -48,7 +49,7 @@ export const loadWam = loadWAM;
 
 export const wam = register('wam', function (name, pat) {
     return pat.onTrigger((time, hap) => {
-        let i = instances[name]
+        let i = wamInstances[name]
 
         if (!i) {
             return
@@ -72,24 +73,20 @@ export const wam = register('wam', function (name, pat) {
     });
   });
 
-export const param = register('param', function(wam, param, value, pat) {
-    return pat.onTrigger((time, hap) => {        
-        let i = instances[wam]
-
-        if (!i) {
-            return
-        }
-
-        debugger
-        
-        i.audioNode.scheduleEvents({
-            time: time,
-            type: "wam-automation",
-            data: {
-                id: param,
-                normalized: false,
-                value: value
-            },
-        })
-    })
-})
+export const param = register('param', function (wam, param, pat) {
+    return pat.onTrigger((time, hap) => {
+      let i = wamInstances[wam];
+      if (!i) {
+        return;
+      }
+      i.audioNode.scheduleEvents({
+        time: time,
+        type: 'wam-automation',
+        data: {
+          id: param,
+          normalized: false,
+          value: hap.value,
+        },
+      });
+    }, false);
+  });

website/src/repl/Footer.jsx

@@ -7,6 +7,7 @@ import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { loadedSamples } from './Repl';
 import { Reference } from './Reference';
 import { themes, themeColors } from './themes.mjs';
+import { getWamInstances } from '@strudel.cycles/wam';
 
 export function Footer({ context }) {
   // const [activeFooter, setActiveFooter] = useState('console');
@@ -77,6 +78,7 @@ export function Footer({ context }) {
           <FooterTab name="console" />
           <FooterTab name="reference" />
           <FooterTab name="theme" />
+          <FooterTab name="wams" />
         </div>
         {activeFooter !== '' && (
           <button onClick={() => setActiveFooter('')} className="text-foreground" aria-label="Close Panel">
@@ -196,6 +198,13 @@ export function Footer({ context }) {
               ))}
             </div>
           )}
+          {activeFooter === 'wams' && (
+            <div className="break-normal w-full px-4 dark:text-white text-stone-900">
+              <span>{Object.keys(getWamInstances()).length} loaded:</span>
+              <select onChange={(e) => showWAM(e)}><option key="--">--</option>{Object.keys(getWamInstances()).map(w => <option key={w}>{w}</option>)}</select>
+              <div id="wam-gui"></div>
+            </div>
+          )}
         </div>
       )}
     </footer>
@@ -226,3 +235,21 @@ function linkify(inputText) {
 
   return replacedText;
 }
+
+const showWAM = async (e) => {
+  const wam = getWamInstances()[e.target.value];
+  const gui = await wam.createGui();
+  const guiDiv = document.getElementById('wam-gui');
+  guiDiv.innerHTML = '';
+  guiDiv.appendChild(gui);
+  
+  const params = await wam.audioNode.getParameterInfo()
+
+  for (let id of Object.keys(params)) {
+    const param = params[id];
+    const input = document.createElement('div');
+    input.innerHTML = `<label>${id}</label>: type ${param.type}, min ${param.minValue}, max ${param.maxValue}`
+    guiDiv.appendChild(input);
+  }
+
+}