Merge branch 'main' into reverb

website/src/pages/learn/effects.mdx

@@ -219,6 +219,7 @@ global effects use the same chain for all events of the same orbit:
 
 <JsDoc client:idle name="roomdim" h={0} />
 
+
 ### iresponse
 
 <JsDoc client:idle name="iresponse" h={0} />

website/src/pages/learn/synths.mdx

@@ -23,6 +23,25 @@ The basic waveforms are `sine`, `sawtooth`, `square` and `triangle`, which can b
 
 If you don't set a `sound` but a `note` the default value for `sound` is `triangle`!
 
+## Noise
+
+You can also use noise as a source by setting the waveform to: `white`, `pink` or `brown`. These are different
+flavours of noise, here written from hard to soft.
+
+<MiniRepl client:idle tune={`sound("<white pink brown>/2").scope()`} />
+
+Here's a more musical example of how to use noise for hihats:
+
+<MiniRepl
+  client:idle
+  tune={`sound("bd*2,<white pink brown>*8")
+.decay(.04).sustain(0).scope()`}
+/>
+
+Some amount of pink noise can also be added to any oscillator by using the `noise` paremeter:
+
+<MiniRepl client:idle tune={`note("c3").noise("<0.1 0.25 0.5>").scope()`} />
+
 ### Additive Synthesis
 
 To tame the harsh sound of the basic waveforms, we can set the `n` control to limit the overtones of the waveform:

website/src/repl/Repl.jsx

@@ -22,6 +22,7 @@ import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
 import { code2hash, hash2code } from './helpers.mjs';
 import { isTauri } from '../tauri.mjs';
+import { useWidgets } from '@strudel.cycles/react/src/hooks/useWidgets.mjs';
 
 const { latestCode } = settingsMap.get();
 
@@ -39,6 +40,7 @@ let modules = [
   import('@strudel.cycles/mini'),
   import('@strudel.cycles/xen'),
   import('@strudel.cycles/webaudio'),
+  import('@strudel/codemirror'),
 
   import('@strudel.cycles/serial'),
   import('@strudel.cycles/soundfonts'),
@@ -128,7 +130,7 @@ export function Repl({ embedded = false }) {
   } = useSettings();
 
   const paintOptions = useMemo(() => ({ fontFamily }), [fontFamily]);
-
+  const { setWidgets } = useWidgets(view);
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({
       initialCode: '// LOADING...',
@@ -142,6 +144,7 @@ export function Repl({ embedded = false }) {
       },
       afterEval: ({ code, meta }) => {
         setMiniLocations(meta.miniLocations);
+        setWidgets(meta.widgets);
         setPending(false);
         setLatestCode(code);
         window.location.hash = '#' + code2hash(code);
@@ -219,7 +222,7 @@ export function Repl({ embedded = false }) {
   const handleChangeCode = useCallback(
     (c) => {
       setCode(c);
-      started && logger('[edit] code changed. hit ctrl+enter to update');
+      //started && logger('[edit] code changed. hit ctrl+enter to update');
     },
     [started],
   );