Format

2026-07-13 22:35:15 -04:00 · 2025-10-20 20:22:16 +03:00
parent 428a4b3dd7
commit 4bdaf577c0
9 changed files with 360 additions and 318 deletions
@@ -42,9 +42,9 @@ const extensions = {
  isMultiCursorEnabled: (on) =>
    on
      ? [
-        EditorState.allowMultipleSelections.of(true),
-        EditorView.clickAddsSelectionRange.of((ev) => ev.metaKey || ev.ctrlKey),
-      ]
+          EditorState.allowMultipleSelections.of(true),
+          EditorView.clickAddsSelectionRange.of((ev) => ev.metaKey || ev.ctrlKey),
+        ]
      : [],
 };
 const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [key, new Compartment()]));
@@ -269,10 +269,9 @@ export class StrudelMirror {
    await this.repl.evaluate(this.code);
  }
  async exportAudio(begin, end, sampleRate, downloadName = undefined) {
-    await this.repl.evaluate(this.code, false)
+    await this.repl.evaluate(this.code, false);
    await this.repl.exportAudio(begin, end, sampleRate, downloadName);
    this.repl.scheduler.stop();
-
  }
  async stop() {
    this.repl.scheduler.stop();
@@ -117,7 +117,7 @@ export class Cyclist {
      throw new Error('Scheduler: no pattern set! call .setPattern first.');
    }
    logger('[cyclist] exporting');
-    await renderPatternAudio(this.pattern, this.cps, begin, end, sampleRate, downloadName)
+    await renderPatternAudio(this.pattern, this.cps, begin, end, sampleRate, downloadName);
  }

  pause() {
@@ -91,7 +91,8 @@ export function repl({

  const stop = () => scheduler.stop();
  const start = () => scheduler.start();
-  const exportAudio = async (begin, end, sampleRate, downloadName = undefined) => await scheduler.exportAudio(begin, end, sampleRate, downloadName);
+  const exportAudio = async (begin, end, sampleRate, downloadName = undefined) =>
+    await scheduler.exportAudio(begin, end, sampleRate, downloadName);
  const pause = () => scheduler.pause();
  const toggle = () => scheduler.toggle();
  const setCps = (cps) => {
@@ -263,18 +264,18 @@ export function repl({

 export const getTrigger =
  ({ getTime, defaultOutput }) =>
-    async (hap, deadline, duration, cps, t) => {
-      //   ^ this signature is different from hap.context.onTrigger, as set by Pattern.onTrigger(onTrigger)
-      // TODO: get rid of deadline after https://codeberg.org/uzu/strudel/pulls/1004
-      try {
-        if (!hap.context.onTrigger || !hap.context.dominantTrigger) {
-          await defaultOutput(hap, deadline, duration, cps, t);
-        }
-        if (hap.context.onTrigger) {
-          // call signature of output / onTrigger is different...
-          await hap.context.onTrigger(hap, getTime(), cps, t);
-        }
-      } catch (err) {
-        errorLogger(err, 'getTrigger');
+  async (hap, deadline, duration, cps, t) => {
+    //   ^ this signature is different from hap.context.onTrigger, as set by Pattern.onTrigger(onTrigger)
+    // TODO: get rid of deadline after https://codeberg.org/uzu/strudel/pulls/1004
+    try {
+      if (!hap.context.onTrigger || !hap.context.dominantTrigger) {
+        await defaultOutput(hap, deadline, duration, cps, t);
      }
-    };
+      if (hap.context.onTrigger) {
+        // call signature of output / onTrigger is different...
+        await hap.context.onTrigger(hap, getTime(), cps, t);
+      }
+    } catch (err) {
+      errorLogger(err, 'getTrigger');
+    }
+  };
@@ -1,15 +1,15 @@
-import { analysers, resetGlobalEffects } from "./superdough.mjs";
+import { analysers, resetGlobalEffects } from './superdough.mjs';

 let audioContext;

 export const setDefaultAudioContext = () => {
  audioContext = new AudioContext();
-  resetGlobalEffects()
+  resetGlobalEffects();
  return audioContext;
 };

 export const setAudioContext = (context) => {
-  audioContext = context
+  audioContext = context;
  return audioContext;
 };

@@ -348,7 +348,7 @@ export function applyFM(param, value, begin) {
    duration,
  } = value;
  let modulator;
-  let stop = () => { };
+  let stop = () => {};

  if (fmModulationIndex) {
    const ac = getAudioContext();
@@ -212,7 +212,9 @@ export function loadWorklets() {
  if (!workletsLoading) {
    const audioCtx = getAudioContext();
    const allWorkletURLs = externalWorklets.concat([workletsUrl]);
-    workletsLoading = Promise.all(allWorkletURLs.map((workletURL) => audioCtx.audioWorklet.addModule(workletURL))).then(() => workletsLoading = undefined);
+    workletsLoading = Promise.all(allWorkletURLs.map((workletURL) => audioCtx.audioWorklet.addModule(workletURL))).then(
+      () => (workletsLoading = undefined),
+    );
  }

  return workletsLoading;
@@ -250,7 +252,7 @@ export async function initAudio(options = {}) {
      logger('[superdough] failed to set audio interface', 'warning');
    }
  }
-  if (!audioCtx instanceof OfflineAudioContext) {
+  if ((!audioCtx) instanceof OfflineAudioContext) {
    await audioCtx.resume();
  }
  if (disableWorklets) {
@@ -288,7 +290,7 @@ function getSuperdoughAudioController() {
 }

 export function setSuperdoughAudioController(newController) {
-  controller = newController
+  controller = newController;
  return controller;
 }

@@ -401,7 +403,7 @@ export const superdough = async (value, t, hapDuration, cps = 0.5, cycle = 0.5)
    );
    return;
  } // FIXME: fix
-  // destructure 
+  // destructure
  let {
    tremolo,
    tremolosync,
@@ -743,4 +745,4 @@ export const superdough = async (value, t, hapDuration, cps = 0.5, cycle = 0.5)

 export const superdoughTrigger = (t, hap, ct, cps) => {
  superdough(hap, t - ct, hap.duration / cps, cps);
-};
+};
@@ -5,7 +5,23 @@ This program is free software: you can redistribute it and/or modify it under th
 */

 import * as strudel from '@strudel/core';
-import { superdough, getAudioContext, setLogger, doughTrigger, registerWorklet, setAudioContext, getSampleBufferSource, loadBuffer, getSampleInfo, getSound, initAudio, setSuperdoughAudioController, loadWorklets, setMaxPolyphony, setMultiChannelOrbits } from 'superdough';
+import {
+  superdough,
+  getAudioContext,
+  setLogger,
+  doughTrigger,
+  registerWorklet,
+  setAudioContext,
+  getSampleBufferSource,
+  loadBuffer,
+  getSampleInfo,
+  getSound,
+  initAudio,
+  setSuperdoughAudioController,
+  loadWorklets,
+  setMaxPolyphony,
+  setMultiChannelOrbits,
+} from 'superdough';
 import './supradough.mjs';
 import { workletUrl } from 'supradough';
 import { SuperdoughAudioController } from 'superdough/superdoughoutput.mjs';
@@ -28,59 +44,63 @@ export const webaudioOutput = (hap, _deadline, hapDuration, cps, t) => {
 };

 export async function renderPatternAudio(pattern, cps, begin, end, sampleRate, downloadName = undefined) {
-  const oldAudioCtx = getAudioContext()
-  await oldAudioCtx.close()
-  let audioContext = new OfflineAudioContext(2, (end - begin) / cps * sampleRate, sampleRate);
-  setAudioContext(audioContext)
-  let context = getAudioContext()
-  setSuperdoughAudioController(new SuperdoughAudioController(context))
-  setMaxPolyphony(1024)
-  setMultiChannelOrbits(true)
-  await loadWorklets()
+  const oldAudioCtx = getAudioContext();
+  await oldAudioCtx.close();
+  let audioContext = new OfflineAudioContext(2, ((end - begin) / cps) * sampleRate, sampleRate);
+  setAudioContext(audioContext);
+  let context = getAudioContext();
+  setSuperdoughAudioController(new SuperdoughAudioController(context));
+  setMaxPolyphony(1024);
+  setMultiChannelOrbits(true);
+  await loadWorklets();
  logger('[webaudio] start rendering');

-  let haps = pattern.queryArc(begin, end, { _cps: cps })
-  Promise.all(haps.map(async h => {
-    let s;
-    if (h.value.s) {
-      if (h.value.bank) {
-        s = `${h.value.bank}_${h.value.s}`;
+  let haps = pattern.queryArc(begin, end, { _cps: cps });
+  Promise.all(
+    haps.map(async (h) => {
+      let s;
+      if (h.value.s) {
+        if (h.value.bank) {
+          s = `${h.value.bank}_${h.value.s}`;
+        } else {
+          s = h.value.s;
+        }
+        let bank = getSound(s).data.samples;
+        if (bank) {
+          let { url: sampleUrl, label } = getSampleInfo(h.value, bank);
+          await loadBuffer(sampleUrl, context, label);
+        }
      }
-      else {
-        s = h.value.s
-      }
-      let bank = getSound(s).data.samples
-      if (bank) {
-        let { url: sampleUrl, label } = getSampleInfo(h.value, bank);
-        await loadBuffer(sampleUrl, context, label)
-      }
-    }
-  }))
+    }),
+  );
  haps.forEach(async (hap) => {
    if (hap.hasOnset()) {
      hap.ensureObjectValue();
      await superdough(hap.value, hap.whole.begin.valueOf() / cps, hap.duration, cps, hap.whole?.begin.valueOf());
    }
-  })
-
-  return context.startRendering().then((renderedBuffer) => {
-    console.log(renderedBuffer)
-    const wavBuffer = audioBufferToWav(renderedBuffer);
-    const blob = new Blob([wavBuffer], { type: 'audio/wav' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    downloadName = downloadName ? `${downloadName}.wav` : `${new Date().toISOString()}.wav`;
-    a.download = `${downloadName}`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  }).finally(async () => {
-    setAudioContext(null)
-    setSuperdoughAudioController(null)
-    await initAudio()
  });
+
+  return context
+    .startRendering()
+    .then((renderedBuffer) => {
+      console.log(renderedBuffer);
+      const wavBuffer = audioBufferToWav(renderedBuffer);
+      const blob = new Blob([wavBuffer], { type: 'audio/wav' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      downloadName = downloadName ? `${downloadName}.wav` : `${new Date().toISOString()}.wav`;
+      a.download = `${downloadName}`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    })
+    .finally(async () => {
+      setAudioContext(null);
+      setSuperdoughAudioController(null);
+      await initAudio();
+    });
 }

 export function webaudioRepl(options = {}) {
@@ -96,97 +116,97 @@ Pattern.prototype.dough = function () {
  return this.onTrigger(doughTrigger, 1);
 };

-
 function audioBufferToWav(buffer, opt) {
-  opt = opt || {}
+  opt = opt || {};

-  var numChannels = buffer.numberOfChannels
-  var sampleRate = buffer.sampleRate
-  var format = opt.float32 ? 3 : 1
-  var bitDepth = format === 3 ? 32 : 16
+  var numChannels = buffer.numberOfChannels;
+  var sampleRate = buffer.sampleRate;
+  var format = opt.float32 ? 3 : 1;
+  var bitDepth = format === 3 ? 32 : 16;

-  var result
+  var result;
  if (numChannels === 2) {
-    result = interleave(buffer.getChannelData(0), buffer.getChannelData(1))
+    result = interleave(buffer.getChannelData(0), buffer.getChannelData(1));
  } else {
-    result = buffer.getChannelData(0)
+    result = buffer.getChannelData(0);
  }

-  return encodeWAV(result, format, sampleRate, numChannels, bitDepth)
+  return encodeWAV(result, format, sampleRate, numChannels, bitDepth);
 }

 function encodeWAV(samples, format, sampleRate, numChannels, bitDepth) {
-  var bytesPerSample = bitDepth / 8
-  var blockAlign = numChannels * bytesPerSample
+  var bytesPerSample = bitDepth / 8;
+  var blockAlign = numChannels * bytesPerSample;

-  var buffer = new ArrayBuffer(44 + samples.length * bytesPerSample)
-  var view = new DataView(buffer)
+  var buffer = new ArrayBuffer(44 + samples.length * bytesPerSample);
+  var view = new DataView(buffer);

  /* RIFF identifier */
-  writeString(view, 0, 'RIFF')
+  writeString(view, 0, 'RIFF');
  /* RIFF chunk length */
-  view.setUint32(4, 36 + samples.length * bytesPerSample, true)
+  view.setUint32(4, 36 + samples.length * bytesPerSample, true);
  /* RIFF type */
-  writeString(view, 8, 'WAVE')
+  writeString(view, 8, 'WAVE');
  /* format chunk identifier */
-  writeString(view, 12, 'fmt ')
+  writeString(view, 12, 'fmt ');
  /* format chunk length */
-  view.setUint32(16, 16, true)
+  view.setUint32(16, 16, true);
  /* sample format (raw) */
-  view.setUint16(20, format, true)
+  view.setUint16(20, format, true);
  /* channel count */
-  view.setUint16(22, numChannels, true)
+  view.setUint16(22, numChannels, true);
  /* sample rate */
-  view.setUint32(24, sampleRate, true)
+  view.setUint32(24, sampleRate, true);
  /* byte rate (sample rate * block align) */
-  view.setUint32(28, sampleRate * blockAlign, true)
+  view.setUint32(28, sampleRate * blockAlign, true);
  /* block align (channel count * bytes per sample) */
-  view.setUint16(32, blockAlign, true)
+  view.setUint16(32, blockAlign, true);
  /* bits per sample */
-  view.setUint16(34, bitDepth, true)
+  view.setUint16(34, bitDepth, true);
  /* data chunk identifier */
-  writeString(view, 36, 'data')
+  writeString(view, 36, 'data');
  /* data chunk length */
-  view.setUint32(40, samples.length * bytesPerSample, true)
-  if (format === 1) { // Raw PCM
-    floatTo16BitPCM(view, 44, samples)
+  view.setUint32(40, samples.length * bytesPerSample, true);
+  if (format === 1) {
+    // Raw PCM
+    floatTo16BitPCM(view, 44, samples);
  } else {
-    writeFloat32(view, 44, samples)
+    writeFloat32(view, 44, samples);
  }

-  return buffer
+  return buffer;
 }

 function interleave(inputL, inputR) {
-  var length = inputL.length + inputR.length
-  var result = new Float32Array(length)
+  var length = inputL.length + inputR.length;
+  var result = new Float32Array(length);

-  var index = 0
-  var inputIndex = 0
+  var index = 0;
+  var inputIndex = 0;

  while (index < length) {
-    result[index++] = inputL[inputIndex]
-    result[index++] = inputR[inputIndex]
-    inputIndex++
+    result[index++] = inputL[inputIndex];
+    result[index++] = inputR[inputIndex];
+    inputIndex++;
  }
-  return result
+  return result;
 }

 function writeFloat32(output, offset, input) {
  for (var i = 0; i < input.length; i++, offset += 4) {
-    output.setFloat32(offset, input[i], true)
+    output.setFloat32(offset, input[i], true);
  }
 }

 function floatTo16BitPCM(output, offset, input) {
  for (var i = 0; i < input.length; i++, offset += 2) {
-    var s = Math.max(-1, Math.min(1, input[i]))
-    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true)
+    var s = Math.max(-1, Math.min(1, input[i]));
+    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
  }
 }

 function writeString(view, offset, string) {
  for (var i = 0; i < string.length; i++) {
-    view.setUint8(offset + i, string.charCodeAt(i))
+    view.setUint8(offset + i, string.charCodeAt(i));
  }
-}
+}
@@ -3,215 +3,226 @@ import cx from '@src/cx.mjs';
 import NumberInput from './NumberInput';
 import { useEffect, useState } from 'react';
 import { Textbox } from './textbox/Textbox';
-import { setMultiChannelOrbits as setStrudelMultiChannelOrbits, setMaxPolyphony as setStrudelMaxPolyphony, getAudioContext } from '@strudel/webaudio';
+import {
+  setMultiChannelOrbits as setStrudelMultiChannelOrbits,
+  setMaxPolyphony as setStrudelMaxPolyphony,
+  getAudioContext,
+} from '@strudel/webaudio';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';

 function Checkbox({ label, value, onChange, disabled = false }) {
-    return (
-        <label className={cx(disabled && "opacity-50")}>
-            <input disabled={disabled} type="checkbox" checked={value} onChange={onChange} />
-            {' ' + label}
-        </label>
-    );
+  return (
+    <label className={cx(disabled && 'opacity-50')}>
+      <input disabled={disabled} type="checkbox" checked={value} onChange={onChange} />
+      {' ' + label}
+    </label>
+  );
 }

 function FormItem({ label, children, disabled }) {
-    return (
-        <div className="grid gap-2">
-            <label className={cx(disabled && "opacity-50")}>{label}</label>
-            {children}
-        </div>
-    );
+  return (
+    <div className="grid gap-2">
+      <label className={cx(disabled && 'opacity-50')}>{label}</label>
+      {children}
+    </div>
+  );
 }

 export default function ExportModal(Props) {
-    const { started, isEmbedded, handleExport } = Props;
+  const { started, isEmbedded, handleExport } = Props;

-    const [downloadName, setDownloadName] = useState("") // TODO: make a form?
-    const [startCycle, setStartCycle] = useState(0)
-    const [endCycle, setEndCycle] = useState(1)
-    const [sampleRate, setSampleRate] = useState(48000)
-    const [multiChannelOrbits, setMultiChannelOrbits] = useState(true)
-    const [maxPolyphony, setMaxPolyphony] = useState(1024)
-    const [exporting, setExporting] = useState(false)
-    const [progress, setProgress] = useState(0)
-    const [length, setLength] = useState(1)
+  const [downloadName, setDownloadName] = useState(''); // TODO: make a form?
+  const [startCycle, setStartCycle] = useState(0);
+  const [endCycle, setEndCycle] = useState(1);
+  const [sampleRate, setSampleRate] = useState(48000);
+  const [multiChannelOrbits, setMultiChannelOrbits] = useState(true);
+  const [maxPolyphony, setMaxPolyphony] = useState(1024);
+  const [exporting, setExporting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [length, setLength] = useState(1);

-    const refreshProgress = () => {
-        const audioContext = getAudioContext()
-        if (audioContext instanceof OfflineAudioContext) {
-            setProgress(audioContext.currentTime)
-            setLength(audioContext.length / sampleRate)
-            setTimeout(refreshProgress, 100);
-        }
+  const refreshProgress = () => {
+    const audioContext = getAudioContext();
+    if (audioContext instanceof OfflineAudioContext) {
+      setProgress(audioContext.currentTime);
+      setLength(audioContext.length / sampleRate);
+      setTimeout(refreshProgress, 100);
    }
+  };

-    return (
-        <>
-            <button
-                onClick={() => {
-                    if (started) return;
-                    const modal = document.getElementById("exportModal");
-                    modal.showModal();
+  return (
+    <>
+      <button
+        onClick={() => {
+          if (started) return;
+          const modal = document.getElementById('exportModal');
+          modal.showModal();
+        }}
+        title="export"
+        className={cx(
+          'flex items-center space-x-1',
+          !isEmbedded ? 'p-2' : 'px-2',
+          started ? 'opacity-50' : 'hover:opacity-50',
+        )}
+      >
+        {!isEmbedded && <span>export</span>}
+      </button>
+      <dialog
+        closedby={exporting ? 'none' : 'closerequest'}
+        id="exportModal"
+        className="text-md bg-background text-foreground rounded-lg backdrop:bg-background backdrop:opacity-50"
+      >
+        <button
+          onClick={() => {
+            if (exporting) return;
+            const modal = document.getElementById('exportModal');
+            modal.close();
+          }}
+          className={cx(
+            'absolute text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center p-1.5 right-2 top-2 z-50',
+            exporting && 'opacity-50',
+          )}
+          aria-label="Close Modal"
+        >
+          <XMarkIcon />
+        </button>
+        <div className="bg-lineHighlight p-4 space-y-4 relative">
+          <FormItem label="File name" disabled={exporting}>
+            <Textbox
+              onBlur={(e) => {
+                setDownloadName(e.target.value);
+              }}
+              onChange={(v) => {
+                setDownloadName(v);
+              }}
+              disabled={exporting}
+              placeholder="Leave empty to use current date"
+              className={cx('placeholder:opacity-50', exporting && 'opacity-50 border-opacity-50')}
+              value={downloadName ?? ''}
+            />
+          </FormItem>
+          <div className="flex flex-row gap-4">
+            <FormItem label="Start cycle" disabled={exporting}>
+              <Textbox
+                min={1}
+                max={Infinity}
+                onBlur={(e) => {
+                  let v = parseInt(e.target.value);
+                  v = isNaN(v) ? 0 : Math.max(0, v);
+                  setStartCycle(v);
                }}
-                title="export"
-                className={cx(
-                    'flex items-center space-x-1',
-                    !isEmbedded ? 'p-2' : 'px-2',
-                    started ? 'opacity-50' : 'hover:opacity-50',
-                )}
-            >
-                {!isEmbedded && <span>export</span>}
-            </button>
-            <dialog closedby={exporting ? "none" : "closerequest"} id='exportModal' className='text-md bg-background text-foreground rounded-lg backdrop:bg-background backdrop:opacity-50'>
-                <button
-                    onClick={() => {
-                        if (exporting) return;
-                        const modal = document.getElementById("exportModal");
-                        modal.close();
-                    }}
-                    className={cx(
-                        'absolute text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center p-1.5 right-2 top-2 z-50',
-                        exporting && "opacity-50"
-                    )}
-                    aria-label="Close Modal"
-                >
-                    <XMarkIcon />
-                </button>
-                <div className='bg-lineHighlight p-4 space-y-4 relative'>
-                    <FormItem label="File name" disabled={exporting}>
-                        <Textbox
-                            onBlur={(e) => {
-                                setDownloadName(e.target.value)
-                            }}
-                            onChange={v => {
-                                setDownloadName(v)
-                            }}
-                            disabled={exporting}
-                            placeholder="Leave empty to use current date"
-                            className={cx("placeholder:opacity-50", exporting && "opacity-50 border-opacity-50")}
-                            value={downloadName ?? ''}
-                        />
-                    </FormItem>
-                    <div className='flex flex-row gap-4'>
-                        <FormItem label="Start cycle" disabled={exporting}>
-                            <Textbox
-                                min={1}
-                                max={Infinity}
-                                onBlur={(e) => {
-                                    let v = parseInt(e.target.value);
-                                    v = isNaN(v) ? 0 : Math.max(0, v);
-                                    setStartCycle(v);
-                                }}
-                                onChange={v => {
-                                    v = parseInt(v)
-                                    setStartCycle(v);
-                                }}
-                                type="number"
-                                placeholder=""
-                                disabled={exporting}
-                                className={cx(exporting && "opacity-50 border-opacity-50")}
-                                value={startCycle ?? ''}
-                            />
-                        </FormItem>
-                        <FormItem label="End cycle" disabled={exporting}>
-                            <Textbox
-                                min={1}
-                                max={Infinity}
-                                onBlur={(e) => {
-                                    let v = parseInt(e.target.value);
-                                    v = isNaN(v) ? Math.max(startCycle + 1, parseInt(v)) : v;
-                                    setEndCycle(v);
-                                }}
-                                onChange={(v) => {
-                                    v = parseInt(v)
-                                    setEndCycle(v);
-                                }}
-                                type="number"
-                                placeholder=""
-                                disabled={exporting}
-                                className={cx(exporting && "opacity-50 border-opacity-50")}
-                                value={endCycle ?? ''}
-                            />
-                        </FormItem>
-                    </div>
-                    <div className='flex flex-row gap-4'>
-                        <FormItem label="Sample rate" disabled={exporting}>
-                            <Textbox
-                                min={1}
-                                max={Infinity}
-                                onBlur={(e) => {
-                                    let v = parseInt(e.target.value);
-                                    v = isNaN(v) ? 1 : Math.max(1, v);
-                                    setSampleRate(v);
-                                }}
-                                onChange={v => {
-                                    v = parseInt(v)
-                                    setSampleRate(v);
-                                }}
-                                type="number"
-                                placeholder=""
-                                disabled={exporting}
-                                className={cx(exporting && "opacity-50 border-opacity-50")}
-                                value={sampleRate ?? ''}
-                            />
-                        </FormItem>
-                        <FormItem label="Maximum polyphony" disabled={exporting}>
-                            <Textbox
-                                min={1}
-                                max={Infinity}
-                                onBlur={(e) => {
-                                    let v = parseInt(e.target.value);
-                                    v = isNaN(v) ? Math.max(1, parseInt(v)) : v;
-                                    setMaxPolyphony(v);
-                                }}
-                                onChange={(v) => {
-                                    v = Math.max(1, parseInt(v));
-                                    setMaxPolyphony(v);
-                                }}
-                                type="number"
-                                placeholder=""
-                                disabled={exporting}
-                                className={cx(exporting && "opacity-50 border-opacity-50")}
-                                value={maxPolyphony ?? ''}
-                            />
-                        </FormItem>
-                    </div>
-                    <div>
-                        <Checkbox
-                            label="Multi Channel Orbits"
-                            onChange={(cbEvent) => {
-                                const val = cbEvent.target.checked;
-                                setMultiChannelOrbits(val)
-                            }}
-                            disabled={exporting}
-                            value={multiChannelOrbits}
-                        />
-                    </div>
-                    <button
-                        className={cx("bg-background p-2 w-full rounded-md hover:opacity-50 relative", exporting && "opacity-50")}
-                        disabled={exporting}
-                        onClick={async () => {
-                            setExporting(true)
-                            setStrudelMaxPolyphony(maxPolyphony)
-                            setStrudelMultiChannelOrbits(multiChannelOrbits)
-                            setTimeout(refreshProgress, 1000);
-                            await handleExport(startCycle, endCycle, sampleRate, downloadName).finally(() => {
-                                setExporting(false)
-                                const modal = document.getElementById("exportModal");
-                                setProgress(0)
-                                setLength(1)
-                                modal.close();
-                            })
-                        }}
-                    >
-                        <span className='text-foreground'>{exporting ? "Exporting..." : "Export to WAV"}</span>
-                        <div className="bg-foreground opacity-10 absolute top-0 left-0 right-0 bottom-0" style={{
-                            width: `${progress / length * 100}%`
-                        }} />
-                    </button>
-                </div>
-            </dialog>
-        </>
-    );
+                onChange={(v) => {
+                  v = parseInt(v);
+                  setStartCycle(v);
+                }}
+                type="number"
+                placeholder=""
+                disabled={exporting}
+                className={cx(exporting && 'opacity-50 border-opacity-50')}
+                value={startCycle ?? ''}
+              />
+            </FormItem>
+            <FormItem label="End cycle" disabled={exporting}>
+              <Textbox
+                min={1}
+                max={Infinity}
+                onBlur={(e) => {
+                  let v = parseInt(e.target.value);
+                  v = isNaN(v) ? Math.max(startCycle + 1, parseInt(v)) : v;
+                  setEndCycle(v);
+                }}
+                onChange={(v) => {
+                  v = parseInt(v);
+                  setEndCycle(v);
+                }}
+                type="number"
+                placeholder=""
+                disabled={exporting}
+                className={cx(exporting && 'opacity-50 border-opacity-50')}
+                value={endCycle ?? ''}
+              />
+            </FormItem>
+          </div>
+          <div className="flex flex-row gap-4">
+            <FormItem label="Sample rate" disabled={exporting}>
+              <Textbox
+                min={1}
+                max={Infinity}
+                onBlur={(e) => {
+                  let v = parseInt(e.target.value);
+                  v = isNaN(v) ? 1 : Math.max(1, v);
+                  setSampleRate(v);
+                }}
+                onChange={(v) => {
+                  v = parseInt(v);
+                  setSampleRate(v);
+                }}
+                type="number"
+                placeholder=""
+                disabled={exporting}
+                className={cx(exporting && 'opacity-50 border-opacity-50')}
+                value={sampleRate ?? ''}
+              />
+            </FormItem>
+            <FormItem label="Maximum polyphony" disabled={exporting}>
+              <Textbox
+                min={1}
+                max={Infinity}
+                onBlur={(e) => {
+                  let v = parseInt(e.target.value);
+                  v = isNaN(v) ? Math.max(1, parseInt(v)) : v;
+                  setMaxPolyphony(v);
+                }}
+                onChange={(v) => {
+                  v = Math.max(1, parseInt(v));
+                  setMaxPolyphony(v);
+                }}
+                type="number"
+                placeholder=""
+                disabled={exporting}
+                className={cx(exporting && 'opacity-50 border-opacity-50')}
+                value={maxPolyphony ?? ''}
+              />
+            </FormItem>
+          </div>
+          <div>
+            <Checkbox
+              label="Multi Channel Orbits"
+              onChange={(cbEvent) => {
+                const val = cbEvent.target.checked;
+                setMultiChannelOrbits(val);
+              }}
+              disabled={exporting}
+              value={multiChannelOrbits}
+            />
+          </div>
+          <button
+            className={cx('bg-background p-2 w-full rounded-md hover:opacity-50 relative', exporting && 'opacity-50')}
+            disabled={exporting}
+            onClick={async () => {
+              setExporting(true);
+              setStrudelMaxPolyphony(maxPolyphony);
+              setStrudelMultiChannelOrbits(multiChannelOrbits);
+              setTimeout(refreshProgress, 1000);
+              await handleExport(startCycle, endCycle, sampleRate, downloadName).finally(() => {
+                setExporting(false);
+                const modal = document.getElementById('exportModal');
+                setProgress(0);
+                setLength(1);
+                modal.close();
+              });
+            }}
+          >
+            <span className="text-foreground">{exporting ? 'Exporting...' : 'Export to WAV'}</span>
+            <div
+              className="bg-foreground opacity-10 absolute top-0 left-0 right-0 bottom-0"
+              style={{
+                width: `${(progress / length) * 100}%`,
+              }}
+            />
+          </button>
+        </div>
+      </dialog>
+    </>
+  );
 }
@@ -9,8 +9,17 @@ const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;

 export function Header({ context, embedded = false }) {
-  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShuffle, handleShare, handleExport } =
-    context;
+  const {
+    started,
+    pending,
+    isDirty,
+    activeCode,
+    handleTogglePlay,
+    handleEvaluate,
+    handleShuffle,
+    handleShare,
+    handleExport,
+  } = context;
  const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily } = useSettings();