Merge branch 'main' into brotli

2026-08-01 21:37:42 -04:00 · 2025-12-08 13:37:49 +01:00
parent 451dd126fc d7bf5db8be
commit 31bcd9886f
89 changed files with 9622 additions and 7093 deletions
@@ -63,7 +63,7 @@ You can also create custom aliases for existing sounds using the `soundAlias` fu

 <MiniRepl
  client:idle
-  tune={`soundAlias("RolandTR808_bd", "kick")
+  tune={`soundAlias('RolandTR808_bd', 'kick')
 s("kick")`}
 />

@@ -48,28 +48,94 @@ You can also use the `crackle` type to play some subtle noise crackles. You can

 ### Additive Synthesis

-To tame the harsh sound of the basic waveforms, we can set the `n` control to limit the overtones of the waveform:
+Periodic waveforms are composed of several [harmonics](https://en.wikipedia.org/wiki/Harmonic) above a fundamental frequency, lying at integer multiples. These overtones combine to give a sound its unique timbral quality.
+
+For the basic waveforms, we offer you control over these harmonics with the `partials` and `phases` functions.
+
+#### Partials
+
+`partials` refers to the magnitude of each harmonic relative to the fundamental frequency. They can thus be used to spectrally filter these waveforms and tame some of their harshness:

 <MiniRepl
  client:idle
  tune={`note("c2 <eb2 <g2 g1>>".fast(2))
 .sound("sawtooth")
-.n("<32 16 8 4>")
+.partials([1, 1, "<1 0>", "<1 0>", "<1 0>", "<1 0>", "<1 0>"])
 ._scope()`}
 />

-When the `n` control is used on a basic waveform, it defines the number of harmonic partials the sound is getting.
-You can also set `n` directly in mini notation with `sound`:
+`partials` can also be used to construct _new_ waveforms not present in our basic set with the 'user' sound source:

 <MiniRepl
  client:idle
  tune={`note("c2 <eb2 <g2 g1>>".fast(2))
-.sound("sawtooth:<32 16 8 4>")
+.sound("user")
+.partials([1, 0, 0.3, 0, 0.1, 0, 0, 0.3])
 ._scope()`}
 />

-Note for tidal users: `n` in tidal is synonymous to `note` for synths only.
-In strudel, this is not the case, where `n` will always change timbre, be it though different samples or different waveforms.
+We may algorithmically construct lists of magnitudes with Javascript code like:
+
+<MiniRepl
+  client:idle
+  tune={`const numHarmonics = 22;
+note("c2 <eb2 <g2 g1>>".fast(2))
+.sound("saw")
+.partials(new Array(numHarmonics).fill(1))
+._scope()`}
+/>
+
+which acts as a spectral filter. Or:
+
+<MiniRepl
+  client:idle
+  tune={`note("c2 <eb2 <g2 g1>>").fast(2)
+.sound("user")
+.partials(new Array(50).fill(0)
+  .map((_, idx) => ((-1) ** (idx + 1)) / (idx + 1))
+)
+._scope()`}
+/>
+
+which recovers a familiar waveform.
+
+`partials` is also compatible with pattern functions designed to produce lists, like `randL` or `binaryL`:
+
+<MiniRepl
+  client:idle
+  tune={`note("c2 <eb2 <g2 g1>>").fast(2)
+.sound("user")
+.partials(randL(10))
+._scope()`}
+/>
+
+and with lists _of_ patterns:
+
+<MiniRepl
+  client:idle
+  tune={`note("c2 <eb2 <g2 g1>>".fast(4))
+.sound("user")
+.partials([1, 0, "0 1", "0 1 0.3", rand])
+._scope()`}
+/>
+
+Note that the first value in the `partials` array controls the magnitude of the fundamental harmonic rather than the DC offset, which is fixed at 0.
+
+#### Phases
+
+Earlier, we mentioned that periodic waveforms can be broken into a set of harmonics above a fundamental frequency. Each harmonic has two defining properties: its magnitude (how loud it is) and its phase, which determines where in its cycle that sine wave starts when the waveform is built.
+
+These phases too can be declared in Strudel and can give your sounds interesting depth.
+
+<MiniRepl
+  client:idle
+  tune={`s("saw").seg(16).n(irand(12)).scale("F1:minor")
+  .penv(48).panchor(0).pdec(0.05)
+  .delay(0.25).room(0.25)
+  .compressor(-20).vib(0.3)
+  .partials(randL(200))
+  .phases(randL(200))`}
+/>

 ## Vibrato

@@ -32,7 +32,7 @@ There are 3 quick ways to embed strudel in your website:

 ### Inside an iframe

-Using an iframe is the most easy way to embed a studel tune.
+Using an iframe is the most easy way to embed a strudel tune.
 You can embed any pattern of your choice via an iframe and the URL of the pattern of your choice:

 ```html
@@ -133,7 +133,7 @@ If you'd rather use your own UI, you can use the `@strudel/web` package:
 </script>
 ```

-For more info on this package, see the [@strudel/web README]https://codeberg.org/uzu/strudel/src/branch/main/packages/web#strudel-web).
+For more info on this package, see the [@strudel/web README](https://codeberg.org/uzu/strudel/src/branch/main/packages/web#strudel-web).

 ## Via npm

@@ -8,3 +8,34 @@ export function ActionButton({ children, label, labelIsHidden, className, ...but
    </button>
  );
 }
+
+export function SpecialActionButton(props) {
+  const { className, ...buttonProps } = props;
+
+  return (
+    <ActionButton
+      {...buttonProps}
+      className={cx('bg-background p-2 max-w-[300px] rounded-md hover:opacity-50', className)}
+    />
+  );
+}
+
+export function ActionInput({ label, className, ...props }) {
+  return (
+    <label className={cx('inline-flex items-center cursor-pointer', className)}>
+      <input {...props} className="sr-only peer" />
+
+      <span className="inline-flex items-center peer-hover:opacity-50">{label}</span>
+    </label>
+  );
+}
+
+export function SpecialActionInput({ className, ...props }) {
+  return (
+    <ActionInput
+      {...props}
+      className={className}
+      label={<span className="bg-background p-2 max-w-[300px] rounded-md">{props.label}</span>}
+    />
+  );
+}
@@ -0,0 +1,29 @@
+import { errorLogger } from '@strudel/core';
+import { useSettings, storePrebakeScript } from '../../../settings.mjs';
+import { SpecialActionInput } from '../button/action-button';
+
+async function importScript(script) {
+  const reader = new FileReader();
+  reader.readAsText(script);
+
+  reader.onload = () => {
+    const text = reader.result;
+    storePrebakeScript(text);
+  };
+
+  reader.onerror = () => {
+    errorLogger(new Error('failed to import prebake script'), 'importScript');
+  };
+}
+export function ImportPrebakeScriptButton() {
+  const settings = useSettings();
+
+  return (
+    <SpecialActionInput
+      type="file"
+      label="import prebake script"
+      accept=".strudel"
+      onChange={(e) => importScript(e.target.files[0])}
+    />
+  );
+}
@@ -79,13 +79,11 @@ const updateCodeWindow = (context, patternData, reset = false) => {
  context.handleUpdate(patternData, reset);
 };

-const autoResetPatternOnChange = !isUdels();
-
 function UserPatterns({ context }) {
  const activePattern = useActivePattern();
  const viewingPatternStore = useViewingPatternData();
  const viewingPatternData = parseJSON(viewingPatternStore);
-  const { userPatterns, patternFilter } = useSettings();
+  const { userPatterns, patternFilter, patternAutoStart } = useSettings();
  const viewingPatternID = viewingPatternData?.id;
  return (
    <div className="flex flex-col gap-2 flex-grow overflow-hidden h-full pb-2 ">
@@ -135,13 +133,13 @@ function UserPatterns({ context }) {
      <div className="overflow-auto h-full bg-background p-2 rounded-md">
        {/* {patternFilter === patternFilterName.user && ( */}
        <PatternButtons
-          onClick={(id) =>
-            updateCodeWindow(
-              context,
-              { ...userPatterns[id], collection: userPattern.collection },
-              autoResetPatternOnChange,
-            )
-          }
+          onClick={(id) => {
+            updateCodeWindow(context, { ...userPatterns[id], collection: userPattern.collection }, patternAutoStart);
+
+            if (context.started && activePattern === id) {
+              context.handleEvaluate();
+            }
+          }}
          patterns={userPatterns}
          started={context.started}
          activePattern={activePattern}
@@ -188,17 +186,14 @@ function FeaturedPatterns({ context }) {
  const examplePatterns = useExamplePatterns();
  const collections = examplePatterns.collections;
  const patterns = collections.get(patternFilterName.featured);
+  const { patternAutoStart } = useSettings();
  return (
    <PatternPageWithPagination
      patterns={patterns}
      context={context}
      initialPage={featuredPageNum}
      patternOnClick={(id) => {
-        updateCodeWindow(
-          context,
-          { ...patterns[id], collection: patternFilterName.featured },
-          autoResetPatternOnChange,
-        );
+        updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.featured }, patternAutoStart);
      }}
      paginationOnChange={async (pageNum) => {
        await loadAndSetFeaturedPatterns(pageNum - 1);
@@ -213,13 +208,14 @@ function LatestPatterns({ context }) {
  const examplePatterns = useExamplePatterns();
  const collections = examplePatterns.collections;
  const patterns = collections.get(patternFilterName.public);
+  const { patternAutoStart } = useSettings();
  return (
    <PatternPageWithPagination
      patterns={patterns}
      context={context}
      initialPage={latestPageNum}
      patternOnClick={(id) => {
-        updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.public }, autoResetPatternOnChange);
+        updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.public }, patternAutoStart);
      }}
      paginationOnChange={async (pageNum) => {
        await loadAndSetPublicPatterns(pageNum - 1);
@@ -7,6 +7,8 @@ import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
 import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
 import { confirmDialog } from '../../util.mjs';
 import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio';
+import { ActionButton, SpecialActionButton } from '../button/action-button.jsx';
+import { ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';

 function Checkbox({ label, value, onChange, disabled = false }) {
  return (
@@ -112,6 +114,8 @@ export function SettingsTab({ started }) {
    multiChannelOrbits,
    isTabIndentationEnabled,
    isMultiCursorEnabled,
+    patternAutoStart,
+    includePrebakeScriptInShare,
  } = useSettings();
  const shouldAlwaysSync = isUdels();
  const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -203,6 +207,15 @@ export function SettingsTab({ started }) {
          />
        </FormItem>
      </div>
+      <FormItem label="Prebake">
+        <ImportPrebakeScriptButton />
+        <Checkbox
+          label="Include prebake script in share"
+          onChange={(cbEvent) => settingsMap.setKey('includePrebakeScriptInShare', cbEvent.target.checked)}
+          value={includePrebakeScriptInShare}
+        />
+      </FormItem>
+
      <FormItem label="Keybindings">
        <ButtonGroup
          value={keybindings}
@@ -304,11 +317,15 @@ export function SettingsTab({ started }) {
          onChange={(cbEvent) => settingsMap.setKey('isCSSAnimationDisabled', cbEvent.target.checked)}
          value={isCSSAnimationDisabled}
        />
+        <Checkbox
+          label="Auto-start pattern on pattern change"
+          onChange={(cbEvent) => settingsMap.setKey('patternAutoStart', cbEvent.target.checked)}
+          value={patternAutoStart}
+        />
      </FormItem>
      <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
      <FormItem label="Reset Settings">
-        <button
-          className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"
+        <SpecialActionButton
          onClick={() => {
            confirmDialog('Sure?').then((r) => {
              if (r) {
@@ -319,7 +336,7 @@ export function SettingsTab({ started }) {
          }}
        >
          restore default settings
-        </button>
+        </SpecialActionButton>
      </FormItem>
    </div>
  );
@@ -14,6 +14,10 @@ import { prebake } from '@src/repl/prebake.mjs';
 const getSamples = (samples) =>
  Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;

+function wait(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 export function SoundsTab() {
  const sounds = useStore(soundMap);

@@ -56,17 +60,21 @@ export function SoundsTab() {

  // holds mutable ref to current triggered sound
  const trigRef = useRef();
-
-  // Used to cycle through sound previews on banks with multiple sounds
-  let soundPreviewIdx = 0;
+  const numRef = useRef(0);

  // stop current sound on mouseup
  useEvent('mouseup', () => {
-    const t = trigRef.current;
+    const ref = trigRef.current;
    trigRef.current = undefined;
-    t?.then((ref) => {
-      ref?.stop(getAudioContext().currentTime + 0.01);
-    });
+    ref?.stop?.(getAudioContext().currentTime + 0.01);
+  });
+  useEvent('keydown', (e) => {
+    if (!isNaN(Number(e.key))) {
+      numRef.current = Number(e.key);
+    }
+  });
+  useEvent('keyup', (e) => {
+    numRef.current = 0;
  });
  return (
    <div id="sounds-tab" className="px-4 flex gap-2 flex-col w-full h-full text-foreground">
@@ -117,19 +125,35 @@ export function SoundsTab() {
                const params = {
                  note: ['synth', 'soundfont'].includes(data.type) ? 'a3' : undefined,
                  s: name,
-                  n: soundPreviewIdx,
+                  n: numRef.current,
                  clip: 1,
                  release: 0.5,
                  sustain: 1,
                  duration: 0.5,
                };
-                soundPreviewIdx++;
-                const time = ctx.currentTime + 0.05;
                const onended = () => trigRef.current?.node?.disconnect();
-                trigRef.current = Promise.resolve(onTrigger(time, params, onended));
-                trigRef.current.then((ref) => {
-                  connectToDestination(ref?.node);
-                });
+                // Attempt to play the sample and retry every 200ms until 10 attempts have been reached
+                let errMsg;
+                for (let attempt = 0; attempt < 10; attempt++) {
+                  try {
+                    // Pre-load the sample by calling onTrigger with a future time
+                    // This triggers the loading but schedules playback for later
+                    const time = ctx.currentTime + 0.05; // Give 50ms for loading
+                    const ref = await onTrigger(time, params, onended);
+                    trigRef.current = ref;
+                    if (ref?.node) {
+                      connectToDestination(ref.node);
+                      break;
+                    }
+                  } catch (err) {
+                    errMsg = err;
+                  }
+                  if (attempt == 9) {
+                    console.warn('Failed to trigger sound after 10 attempts' + (errMsg ? `: ${errMsg}` : ''));
+                  } else {
+                    await wait(200);
+                  }
+                }
              }}
            >
              {' '}
@@ -92,11 +92,7 @@ export function registerSamplesFromDB(config = userSamplesDBConfig, onComplete =

 async function blobToDataUrl(blob) {
  return new Promise((resolve) => {
-    var reader = new FileReader();
-    reader.onload = function (event) {
-      resolve(event.target.result);
-    };
-    reader.readAsDataURL(blob);
+    resolve(URL.createObjectURL(blob));
  });
 }

@@ -3,6 +3,8 @@ import { aliasBank, registerSynthSounds, registerZZFXSounds, samples } from '@st
 import { registerSamplesFromDB } from './idbutils.mjs';
 import './piano.mjs';
 import './files.mjs';
+import { settingsMap } from '@src/settings.mjs';
+import { evaluate } from '@strudel/transpiler';

 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
@@ -6,7 +6,7 @@ This program is free software: you can redistribute it and/or modify it under th

 import { code2hash, getPerformanceTimeSeconds, logger, silence } from '@strudel/core';
 import { getDrawContext } from '@strudel/draw';
-import { transpiler } from '@strudel/transpiler';
+import { evaluate, transpiler } from '@strudel/transpiler';
 import {
  getAudioContextCurrentTime,
  webaudioOutput,
@@ -64,11 +64,10 @@ async function getModule(name) {
 const initialCode = `// LOADING`;

 export function useReplContext() {
-  const { isSyncEnabled, audioEngineTarget } = useSettings();
+  const { isSyncEnabled, audioEngineTarget, prebakeScript, includePrebakeScriptInShare } = useSettings();
  const shouldUseWebaudio = audioEngineTarget !== audioEngineTargets.osc;
  const defaultOutput = shouldUseWebaudio ? webaudioOutput : superdirtOutput;
  const getTime = shouldUseWebaudio ? getAudioContextCurrentTime : getPerformanceTimeSeconds;
-
  const init = useCallback(() => {
    const drawTime = [-2, 2];
    const drawContext = getDrawContext();
@@ -85,7 +84,12 @@ export function useReplContext() {
      pattern: silence,
      drawTime,
      drawContext,
-      prebake: async () => Promise.all([modulesLoading, presets]),
+      prebake: async () =>
+        Promise.all([modulesLoading, presets]).then(() => {
+          if (prebakeScript?.length) {
+            return evaluate(prebakeScript ?? '');
+          }
+        }),
      onUpdateState: (state) => {
        setReplState({ ...state });
      },
@@ -229,7 +233,13 @@ export function useReplContext() {
    editorRef.current.repl.evaluate(code);
  };

-  const handleShare = async () => shareCode(replState.code);
+  const handleShare = async () => {
+    let code = replState.code;
+    if (includePrebakeScriptInShare) {
+      code = prebakeScript + '\n' + code;
+    }
+    shareCode(code);
+  };
  const context = {
    started,
    pending,
@@ -1,11 +1,10 @@
-import { evalScope, hash2code, logger } from '@strudel/core';
+import { code2hash, evalScope, hash2code, logger } from '@strudel/core';
 import { settingPatterns } from '../settings.mjs';
 import { setVersionDefaults } from '@strudel/webaudio';
 import { getMetadata } from '../metadata_parser';
 import { isTauri } from '../tauri.mjs';
 import './Repl.css';
 import { createClient } from '@supabase/supabase-js';
-import { nanoid } from 'nanoid';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
 import { $featuredPatterns /* , loadDBPatterns */ } from '@src/user_pattern_utils.mjs';
 import { decode as base64urldecode } from 'base64url-universal';
@@ -143,9 +142,8 @@ export function confirmDialog(msg) {
  });
 }

-let lastShared;
-
 //RIP due to SPAM
+// let lastShared;
 // export async function shareCode(codeToShare) {
 //   // const codeToShare = activeCode || code;
 //   if (lastShared === codeToShare) {
@@ -180,9 +178,10 @@ let lastShared;
 //   });
 // }

-export async function shareCode() {
+export async function shareCode(codeToShare) {
  try {
-    const shareUrl = window.location.href;
+    const hash = '#' + code2hash(codeToShare);
+    const shareUrl = window.location.origin + window.location.pathname + hash;
    if (isTauri()) {
      await writeText(shareUrl);
    } else {
@@ -45,11 +45,13 @@ export const defaultSettings = {
  isPanelOpen: true,
  togglePanelTrigger: 'click', //click | hover
  userPatterns: '{}',
+  prebakeScript: '',
  audioEngineTarget: audioEngineTargets.webaudio,
  isButtonRowHidden: false,
  isCSSAnimationDisabled: false,
  maxPolyphony: 128,
  multiChannelOrbits: false,
+  includePrebakeScriptInShare: true,
 };

 let search = null;
@@ -96,6 +98,12 @@ export function useSettings() {
    isPanelOpen: parseBoolean(state.isPanelOpen),
    userPatterns: userPatterns,
    multiChannelOrbits: parseBoolean(state.multiChannelOrbits),
+    includePrebakeScriptInShare: parseBoolean(state.includePrebakeScriptInShare),
+    patternAutoStart: isUdels()
+      ? false
+      : state.patternAutoStart === undefined
+        ? true
+        : parseBoolean(state.patternAutoStart),
  };
 }

@@ -103,6 +111,8 @@ export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
 export const setPanelPinned = (bool) => settingsMap.setKey('isPanelPinned', bool);
 export const setIsPanelOpened = (bool) => settingsMap.setKey('isPanelOpen', bool);

+export const storePrebakeScript = (script) => settingsMap.setKey('prebakeScript', script);
+
 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);

 const patternSetting = (key) =>