can now pass meta data to setSound

+ added types for synth and sample
+ list sample count for samples in sounds tab (as before)

packages/webaudio/sampler.mjs

@@ -149,7 +149,7 @@ export const samples = async (sampleMap, baseUrl = sampleMap._base || '') => {
         }),
       );
     }
-    setSound(key, (options) => onTriggerSample(options, value));
+    setSound(key, (options) => onTriggerSample(options, value), { type: 'sample', samples: value });
   });
 };
 

packages/webaudio/synth.mjs

@@ -4,7 +4,9 @@ import { getOscillator, gainNode, getADSR } from './helpers.mjs';
 
 export function registerSynthSounds() {
   ['sine', 'square', 'triangle', 'sawtooth'].forEach((wave) => {
-    setSound(wave, ({ hap, duration, t }) => {
+    setSound(
+      wave,
+      ({ hap, duration, t }) => {
         // destructure adsr here, because the default should be different for synths and samples
         const { attack = 0.001, decay = 0.05, sustain = 0.6, release = 0.01 } = hap.value;
         let { n, note, freq } = hap.value;
@@ -29,6 +31,8 @@ export function registerSynthSounds() {
         const adsr = getADSR(attack, decay, sustain, release, 1, t, t + duration);
         //chain.push(adsr);
         return o.connect(g).connect(adsr);
-    });
+      },
+      { type: 'synth' },
+    );
   });
 }

packages/webaudio/webaudio.mjs

@@ -15,8 +15,8 @@ import { map } from 'nanostores';
 
 export const soundMap = map();
 // onTrigger = ({ hap: Hap, t: number, deadline: number, duration: number, cps: number }) => AudioNode
-export function setSound(key, onTrigger) {
-  soundMap.setKey(key, onTrigger);
+export function setSound(key, onTrigger, data = {}) {
+  soundMap.setKey(key, { onTrigger, data });
 }
 export const resetLoadedSounds = () => soundMap.set({});
 
@@ -166,7 +166,8 @@ export const webaudioOutput = async (hap, deadline, hapDuration, cps) => {
   if (source) {
     node = source(options);
   } else if (soundMap.get()[s]) {
-    node = await soundMap.get()[s](options);
+    const { onTrigger } = soundMap.get()[s];
+    node = await onTrigger(options);
   } else {
     throw new Error(`sound ${s} not found! Is it loaded?`);
   }

website/src/repl/Footer.jsx

@@ -196,15 +196,15 @@ function ConsoleTab({ log }) {
 
 function SoundsTab() {
   const sounds = useStore(soundMap);
+  const getSamples = (samples) =>
+    Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;
   return (
     <div id="sounds-tab" className="break-normal w-full px-4 dark:text-white text-stone-900">
       {/*  <span>{loadedSamples.length} banks loaded:</span> */}
-      {Object.entries(sounds).map(([name, samples]) => (
+      {Object.entries(sounds).map(([name, { data }]) => (
         <span key={name} className="cursor-pointer hover:opacity-50" onClick={() => {}}>
           {' '}
-          {name}
-          {/* (
-          {Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1}) */}
+          {name} {data?.type === 'sample' ? `(${getSamples(data.samples)})` : ''}
         </span>
       ))}
     </div>