logger works now outside of react

+ dynamic sample loading logs
+ remove old sampler code

packages/core/logger.mjs

@@ -1,3 +1,18 @@
-export function logger(message) {
-  console.log(`%c${message}`, 'background-color: black;color:white;padding:4px;border-radius:15px');
+export const logKey = 'strudel.log';
+
+export function logger(message, type, data = {}) {
+  console.log(`%c${message}`, 'background-color: black;color:white;border-radius:15px');
+  if (typeof CustomEvent !== 'undefined') {
+    document.dispatchEvent(
+      new CustomEvent(logKey, {
+        detail: {
+          message,
+          type,
+          data,
+        },
+      }),
+    );
+  }
 }
+
+logger.key = logKey;

packages/react/src/hooks/useStrudel.mjs

@@ -63,6 +63,13 @@ function useStrudel({
     }
   }, [activateCode, evalOnMount, code]);
 
+  // this will stop the scheduler when hot reloading in development
+  useEffect(() => {
+    return () => {
+      scheduler.stop();
+    };
+  }, [scheduler]);
+
   const togglePlay = async () => {
     if (started) {
       scheduler.pause();

packages/webaudio/sampler.mjs

@@ -1,13 +1,36 @@
+import { logger } from '@strudel.cycles/core';
+
 const bufferCache = {}; // string: Promise<ArrayBuffer>
 const loadCache = {}; // string: Promise<ArrayBuffer>
 
 export const getCachedBuffer = (url) => bufferCache[url];
 
-export const loadBuffer = (url, ac) => {
+function humanFileSize(bytes, si) {
+  var thresh = si ? 1000 : 1024;
+  if (bytes < thresh) return bytes + ' B';
+  var units = si
+    ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+  var u = -1;
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (bytes >= thresh);
+  return bytes.toFixed(1) + ' ' + units[u];
+}
+
+export const loadBuffer = (url, ac, s, n = 0) => {
+  const label = s ? `sound "${s}:${n}"` : 'sample';
   if (!loadCache[url]) {
+    logger(`[sampler] load ${label}..`, 'load-sample', { url });
+    const timestamp = Date.now();
     loadCache[url] = fetch(url)
       .then((res) => res.arrayBuffer())
       .then(async (res) => {
+        const took = (Date.now() - timestamp);
+        const size = humanFileSize(res.byteLength);
+        // const downSpeed = humanFileSize(res.byteLength / took);
+        logger(`[sampler] load ${label}... done! loaded ${size} in ${took}ms`, 'loaded-sample', { url });
         const decoded = await ac.decodeAudioData(res);
         bufferCache[url] = decoded;
         return decoded;
@@ -29,66 +52,7 @@ 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];
-};
 
 /**
  * Loads a collection of samples to use with `s`

packages/webaudio/webaudio.mjs

@@ -6,7 +6,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, isNote, toMidi } from '@strudel.cycles/core';
+import { fromMidi, logger, toMidi } from '@strudel.cycles/core';
 import './feedbackdelay.mjs';
 import './reverb.mjs';
 import { loadBuffer, reverseBuffer } from './sampler.mjs';
@@ -112,9 +112,10 @@ const getSampleBufferSource = async (s, n, note, speed) => {
   const bank = samples?.[s];
   if (!bank) {
     throw new Error(
-      `sample not found: "${s}", try one of ${Object.keys(samples)
-        .map((s) => `"${s}"`)
-        .join(', ')}.`,
+      `sample not found: "${s}"`,
+      // , try one of ${Object.keys(samples)
+      // .map((s) => `"${s}"`)
+      // .join(', ')}.
     );
   }
   if (typeof bank !== 'object') {
@@ -135,7 +136,7 @@ const getSampleBufferSource = async (s, n, note, speed) => {
     transpose = -midiDiff(closest); // semitones to repitch
     sampleUrl = bank[closest][n % bank[closest].length];
   }
-  let buffer = await loadBuffer(sampleUrl, ac);
+  let buffer = await loadBuffer(sampleUrl, ac, s, n);
   if (speed < 0) {
     // should this be cached?
     buffer = reverseBuffer(buffer);
@@ -337,21 +338,17 @@ export const webaudioOutput = async (hap, deadline, hapDuration) => {
     const soundfont = getSoundfontKey(s);
     let bufferSource;
 
-    try {
-      if (soundfont) {
-        // is soundfont
-        bufferSource = await globalThis.getFontBufferSource(soundfont, note || n, ac);
-      } else {
-        // is sample from loaded samples(..)
-        bufferSource = await getSampleBufferSource(s, n, note, speed);
-      }
-    } catch (err) {
-      console.warn(err);
-      return;
+    if (soundfont) {
+      // is soundfont
+      bufferSource = await globalThis.getFontBufferSource(soundfont, note || n, ac);
+    } else {
+      // is sample from loaded samples(..)
+      bufferSource = await getSampleBufferSource(s, n, note, speed);
     }
     // asny stuff above took too long?
     if (ac.currentTime > t) {
-      console.warn('sample still loading:', s, n);
+      logger(`[sampler] still loading sound "${s}:${n}"`, 'highlight');
+      // console.warn('sample still loading:', s, n);
       return;
     }
     if (!bufferSource) {