move sampler to webaudio

+ add basic sample playback to .out

packages/webaudio/index.mjs

@@ -7,3 +7,4 @@ This program is free software: you can redistribute it and/or modify it under th
 export * from './clockworker.mjs';
 export * from './scheduler.mjs';
 export * from './webaudio.mjs';
+export * from './sampler.mjs';

packages/webaudio/sampler.mjs

@@ -0,0 +1,114 @@
+const bufferCache = {}; // string: Promise<ArrayBuffer>
+const loadCache = {}; // string: Promise<ArrayBuffer>
+
+export const getCachedBuffer = (url) => bufferCache[url];
+
+export const loadBuffer = (url, ac) => {
+  if (!loadCache[url]) {
+    loadCache[url] = fetch(url)
+      .then((res) => res.arrayBuffer())
+      .then(async (res) => {
+        const decoded = await ac.decodeAudioData(res);
+        bufferCache[url] = decoded;
+        return decoded;
+      });
+  }
+  return loadCache[url];
+};
+
+export const getLoadedBuffer = (url) => {
+  return bufferCache[url];
+};
+
+/* export const playBuffer = (buffer, time = ac.currentTime, destination = ac.destination) => {
+  const src = ac.createBufferSource();
+  src.buffer = buffer;
+  src.connect(destination);
+  src.start(time);
+};
+
+export const playSample = async (url) => playBuffer(await loadBuffer(url)); */
+
+// https://estuary.mcmaster.ca/samples/resources.json
+// Array<{ "url":string, "bank": string, "n": number}>
+// ritchse/tidal-drum-machines/tree/main/machines/AkaiLinn
+const githubCache = {};
+let sampleCache = { current: undefined };
+export const loadGithubSamples = async (path, nameFn) => {
+  const storageKey = 'loadGithubSamples ' + path;
+  const stored = localStorage.getItem(storageKey);
+  if (stored) {
+    console.log('[sampler]: loaded sample list from localstorage', path);
+    githubCache[path] = JSON.parse(stored);
+  }
+  if (githubCache[path]) {
+    sampleCache.current = githubCache[path];
+    return githubCache[path];
+  }
+  console.log('[sampler]: fetching sample list from github', path);
+  try {
+    const [user, repo, ...folders] = path.split('/');
+    const baseUrl = `https://api.github.com/repos/${user}/${repo}/contents`;
+    const banks = await fetch(`${baseUrl}/${folders.join('/')}`).then((res) => res.json());
+    // fetch each subfolder
+    githubCache[path] = (
+      await Promise.all(
+        banks.map(async ({ name, path }) => ({
+          name,
+          content: await fetch(`${baseUrl}/${path}`)
+            .then((res) => res.json())
+            .catch((err) => {
+              console.error('could not load path', err);
+            }),
+        })),
+      )
+    )
+      .filter(({ content }) => !!content)
+      .reduce(
+        (acc, { name, content }) => ({
+          ...acc,
+          [nameFn?.(name) || name]: content.map(({ download_url }) => download_url),
+        }),
+        {},
+      );
+  } catch (err) {
+    console.error('[sampler]: failed to fetch sample list from github', err);
+    return;
+  }
+  sampleCache.current = githubCache[path];
+  localStorage.setItem(storageKey, JSON.stringify(sampleCache.current));
+  console.log('[sampler]: loaded samples:', sampleCache.current);
+  return githubCache[path];
+};
+
+/**
+ * load the given sample map for webdirt
+ *
+ * @example
+ * loadSamples({
+ *   bd: '808bd/BD0000.WAV',
+ *   sd: ['808sd/SD0000.WAV','808sd/SD0010.WAV','808sd/SD0050.WAV']
+ *  }, 'https://raw.githubusercontent.com/tidalcycles/Dirt-Samples/master/');
+ *  s("bd <sd!7 sd(3,4,2)>").n(2).webdirt()
+ *
+ */
+
+export const samples = (sampleMap, baseUrl = '') => {
+  sampleCache.current = {
+    ...sampleCache.current,
+    ...Object.fromEntries(
+      Object.entries(sampleMap).map(([key, value]) => [
+        key,
+        (typeof value === 'string' ? [value] : value).map((v) =>
+          (baseUrl + v).replace('github:', 'https://raw.githubusercontent.com/'),
+        ),
+      ]),
+    ),
+  };
+};
+
+export const resetLoadedSamples = () => {
+  sampleCache.current = undefined;
+};
+
+export const getLoadedSamples = () => sampleCache.current;

packages/webaudio/webaudio.mjs

@@ -7,6 +7,7 @@ This program is free software: you can redistribute it and/or modify it under th
 // import { Pattern, getFrequency, patternify2 } from '@strudel.cycles/core';
 import * as strudel from '@strudel.cycles/core';
 import { fromMidi } from '@strudel.cycles/core';
+import { loadBuffer } from './sampler.mjs';
 const { Pattern } = strudel;
 
 // export const getAudioContext = () => Tone.getContext().rawContext;
@@ -39,7 +40,7 @@ const getADSR = (attack, decay, sustain, release, velocity, begin, end) => {
 };
 
 Pattern.prototype.out = function () {
-  return this.onTrigger((t, hap, ct) => {
+  return this.onTrigger(async (t, hap, ct) => {
     const ac = getAudioContext();
     // calculate correct time (tone.js workaround)
     t = ac.currentTime + t - ct;
@@ -47,7 +48,7 @@ Pattern.prototype.out = function () {
     let {
       freq,
       s,
-      n,
+      n = 0,
       gain = 1,
       cutoff,
       resonance = 1,
@@ -61,26 +62,49 @@ Pattern.prototype.out = function () {
       sustain = 1,
       release = 0.001,
     } = hap.value;
-    if (!n && !freq) {
-      console.warn('unplayable value:', hap.value);
-      return;
-    }
-    // get frequency
-    if (!freq && typeof n === 'number') {
-      freq = fromMidi(n); // + 48);
-    }
-    if (!freq && typeof n === 'string') {
-      freq = fromMidi(toMidi(n));
-    }
     // the chain will hold all audio nodes that connect to each other
     const chain = [];
-    // make oscillator
-    const o = ac.createOscillator();
-    o.type = s || 'triangle';
-    o.frequency.value = Number(freq);
-    o.start(t);
-    o.stop(t + hap.duration + release);
-    chain.push(o);
+    if (!s || ['sine', 'square', 'triangle', 'sawtooth'].includes(s)) {
+      // get frequency
+      if (!freq && typeof n === 'number') {
+        freq = fromMidi(n); // + 48);
+      }
+      if (!freq && typeof n === 'string') {
+        freq = fromMidi(toMidi(n));
+      }
+      // make oscillator
+      const o = ac.createOscillator();
+      o.type = s || 'triangle';
+      o.frequency.value = Number(freq);
+      o.start(t);
+      o.stop(t + hap.duration + release);
+      chain.push(o);
+    } else {
+      // load sample
+      const samples = getLoadedSamples();
+      if (!samples) {
+        console.warn('no samples loaded');
+        return;
+      }
+      const bank = samples?.[s];
+      if (!bank) {
+        console.warn('sample not found:', s, 'try one of ' + Object.keys(samples));
+        return;
+      } else {
+        const bank = samples[s];
+        const sampleUrl = bank[n % bank.length];
+        let buffer = await loadBuffer(sampleUrl, ac);
+        if (ac.currentTime > t) {
+          console.warn('sample still loading:', s);
+          return;
+        }
+        const src = ac.createBufferSource();
+        src.buffer = buffer;
+        src.start(t);
+        src.stop(t + hap.duration + release);
+        chain.push(src);
+      }
+    }
     // envelope
     const adsr = getADSR(attack, decay, sustain, release, 1, t, t + hap.duration);
     chain.push(adsr);
@@ -98,7 +122,7 @@ Pattern.prototype.out = function () {
     }
     // master out
     const master = ac.createGain();
-    master.gain.value = 0.1 * gain;
+    master.gain.value = 0.8 * gain;
     chain.push(master);
     chain.push(ac.destination);
     // connect chain elements together