Format

packages/codemirror/codemirror.mjs

@@ -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();

packages/core/cyclist.mjs

@@ -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() {

packages/core/repl.mjs

@@ -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) => {

packages/superdough/audioContext.mjs

@@ -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;
 };
 

packages/superdough/helpers.mjs

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

packages/superdough/superdough.mjs

@@ -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;
 }
 

packages/webaudio/webaudio.mjs

@@ -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,43 +44,46 @@ export const webaudioOutput = (hap, _deadline, hapDuration, cps, t) => {
 };
 
 export async function renderPatternAudio(pattern, cps, begin, end, sampleRate, downloadName = undefined) {
-  const oldAudioCtx = getAudioContext()
+  const oldAudioCtx = getAudioContext();
-  await oldAudioCtx.close()
+  await oldAudioCtx.close();
-  let audioContext = new OfflineAudioContext(2, (end - begin) / cps * sampleRate, sampleRate);
+  let audioContext = new OfflineAudioContext(2, ((end - begin) / cps) * sampleRate, sampleRate);
-  setAudioContext(audioContext)
+  setAudioContext(audioContext);
-  let context = getAudioContext()
+  let context = getAudioContext();
-  setSuperdoughAudioController(new SuperdoughAudioController(context))
+  setSuperdoughAudioController(new SuperdoughAudioController(context));
-  setMaxPolyphony(1024)
+  setMaxPolyphony(1024);
-  setMultiChannelOrbits(true)
+  setMultiChannelOrbits(true);
-  await loadWorklets()
+  await loadWorklets();
   logger('[webaudio] start rendering');
 
-  let haps = pattern.queryArc(begin, end, { _cps: cps })
+  let haps = pattern.queryArc(begin, end, { _cps: cps });
-  Promise.all(haps.map(async h => {
+  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;
         }
-      else {
+        let bank = getSound(s).data.samples;
-        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)
+          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) => {
+  return context
-    console.log(renderedBuffer)
+    .startRendering()
+    .then((renderedBuffer) => {
+      console.log(renderedBuffer);
       const wavBuffer = audioBufferToWav(renderedBuffer);
       const blob = new Blob([wavBuffer], { type: 'audio/wav' });
       const url = URL.createObjectURL(blob);
@@ -76,10 +95,11 @@ export async function renderPatternAudio(pattern, cps, begin, end, sampleRate, d
       a.click();
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
-  }).finally(async () => {
+    })
-    setAudioContext(null)
+    .finally(async () => {
-    setSuperdoughAudioController(null)
+      setAudioContext(null);
-    await initAudio()
+      setSuperdoughAudioController(null);
+      await initAudio();
     });
 }
 
@@ -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 numChannels = buffer.numberOfChannels;
-  var sampleRate = buffer.sampleRate
+  var sampleRate = buffer.sampleRate;
-  var format = opt.float32 ? 3 : 1
+  var format = opt.float32 ? 3 : 1;
-  var bitDepth = format === 3 ? 32 : 16
+  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 bytesPerSample = bitDepth / 8;
-  var blockAlign = numChannels * bytesPerSample
+  var blockAlign = numChannels * bytesPerSample;
 
-  var buffer = new ArrayBuffer(44 + samples.length * bytesPerSample)
+  var buffer = new ArrayBuffer(44 + samples.length * bytesPerSample);
-  var view = new DataView(buffer)
+  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)
+  view.setUint32(40, samples.length * bytesPerSample, true);
-  if (format === 1) { // Raw PCM
+  if (format === 1) {
-    floatTo16BitPCM(view, 44, samples)
+    // 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 length = inputL.length + inputR.length;
-  var result = new Float32Array(length)
+  var result = new Float32Array(length);
 
-  var index = 0
+  var index = 0;
-  var inputIndex = 0
+  var inputIndex = 0;
 
   while (index < length) {
-    result[index++] = inputL[inputIndex]
+    result[index++] = inputL[inputIndex];
-    result[index++] = inputR[inputIndex]
+    result[index++] = inputR[inputIndex];
-    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]))
+    var s = Math.max(-1, Math.min(1, input[i]));
-    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true)
+    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));
   }
 }

website/src/repl/components/ExportModal.jsx

@@ -3,12 +3,16 @@ 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")}>
+    <label className={cx(disabled && 'opacity-50')}>
       <input disabled={disabled} type="checkbox" checked={value} onChange={onChange} />
       {' ' + label}
     </label>
@@ -18,7 +22,7 @@ function Checkbox({ label, value, onChange, disabled = false }) {
 function FormItem({ label, children, disabled }) {
   return (
     <div className="grid gap-2">
-            <label className={cx(disabled && "opacity-50")}>{label}</label>
+      <label className={cx(disabled && 'opacity-50')}>{label}</label>
       {children}
     </div>
   );
@@ -27,31 +31,31 @@ function FormItem({ label, children, disabled }) {
 export default function ExportModal(Props) {
   const { started, isEmbedded, handleExport } = Props;
 
-    const [downloadName, setDownloadName] = useState("") // TODO: make a form?
+  const [downloadName, setDownloadName] = useState(''); // TODO: make a form?
-    const [startCycle, setStartCycle] = useState(0)
+  const [startCycle, setStartCycle] = useState(0);
-    const [endCycle, setEndCycle] = useState(1)
+  const [endCycle, setEndCycle] = useState(1);
-    const [sampleRate, setSampleRate] = useState(48000)
+  const [sampleRate, setSampleRate] = useState(48000);
-    const [multiChannelOrbits, setMultiChannelOrbits] = useState(true)
+  const [multiChannelOrbits, setMultiChannelOrbits] = useState(true);
-    const [maxPolyphony, setMaxPolyphony] = useState(1024)
+  const [maxPolyphony, setMaxPolyphony] = useState(1024);
-    const [exporting, setExporting] = useState(false)
+  const [exporting, setExporting] = useState(false);
-    const [progress, setProgress] = useState(0)
+  const [progress, setProgress] = useState(0);
-    const [length, setLength] = useState(1)
+  const [length, setLength] = useState(1);
 
   const refreshProgress = () => {
-        const audioContext = getAudioContext()
+    const audioContext = getAudioContext();
     if (audioContext instanceof OfflineAudioContext) {
-            setProgress(audioContext.currentTime)
+      setProgress(audioContext.currentTime);
-            setLength(audioContext.length / sampleRate)
+      setLength(audioContext.length / sampleRate);
       setTimeout(refreshProgress, 100);
     }
-    }
+  };
 
   return (
     <>
       <button
         onClick={() => {
           if (started) return;
-                    const modal = document.getElementById("exportModal");
+          const modal = document.getElementById('exportModal');
           modal.showModal();
         }}
         title="export"
@@ -63,37 +67,41 @@ export default function ExportModal(Props) {
       >
         {!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'>
+      <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");
+            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"
+            exporting && 'opacity-50',
           )}
           aria-label="Close Modal"
         >
           <XMarkIcon />
         </button>
-                <div className='bg-lineHighlight p-4 space-y-4 relative'>
+        <div className="bg-lineHighlight p-4 space-y-4 relative">
           <FormItem label="File name" disabled={exporting}>
             <Textbox
               onBlur={(e) => {
-                                setDownloadName(e.target.value)
+                setDownloadName(e.target.value);
               }}
-                            onChange={v => {
+              onChange={(v) => {
-                                setDownloadName(v)
+                setDownloadName(v);
               }}
               disabled={exporting}
               placeholder="Leave empty to use current date"
-                            className={cx("placeholder:opacity-50", exporting && "opacity-50 border-opacity-50")}
+              className={cx('placeholder:opacity-50', exporting && 'opacity-50 border-opacity-50')}
               value={downloadName ?? ''}
             />
           </FormItem>
-                    <div className='flex flex-row gap-4'>
+          <div className="flex flex-row gap-4">
             <FormItem label="Start cycle" disabled={exporting}>
               <Textbox
                 min={1}
@@ -103,14 +111,14 @@ export default function ExportModal(Props) {
                   v = isNaN(v) ? 0 : Math.max(0, v);
                   setStartCycle(v);
                 }}
-                                onChange={v => {
+                onChange={(v) => {
-                                    v = parseInt(v)
+                  v = parseInt(v);
                   setStartCycle(v);
                 }}
                 type="number"
                 placeholder=""
                 disabled={exporting}
-                                className={cx(exporting && "opacity-50 border-opacity-50")}
+                className={cx(exporting && 'opacity-50 border-opacity-50')}
                 value={startCycle ?? ''}
               />
             </FormItem>
@@ -124,18 +132,18 @@ export default function ExportModal(Props) {
                   setEndCycle(v);
                 }}
                 onChange={(v) => {
-                                    v = parseInt(v)
+                  v = parseInt(v);
                   setEndCycle(v);
                 }}
                 type="number"
                 placeholder=""
                 disabled={exporting}
-                                className={cx(exporting && "opacity-50 border-opacity-50")}
+                className={cx(exporting && 'opacity-50 border-opacity-50')}
                 value={endCycle ?? ''}
               />
             </FormItem>
           </div>
-                    <div className='flex flex-row gap-4'>
+          <div className="flex flex-row gap-4">
             <FormItem label="Sample rate" disabled={exporting}>
               <Textbox
                 min={1}
@@ -145,14 +153,14 @@ export default function ExportModal(Props) {
                   v = isNaN(v) ? 1 : Math.max(1, v);
                   setSampleRate(v);
                 }}
-                                onChange={v => {
+                onChange={(v) => {
-                                    v = parseInt(v)
+                  v = parseInt(v);
                   setSampleRate(v);
                 }}
                 type="number"
                 placeholder=""
                 disabled={exporting}
-                                className={cx(exporting && "opacity-50 border-opacity-50")}
+                className={cx(exporting && 'opacity-50 border-opacity-50')}
                 value={sampleRate ?? ''}
               />
             </FormItem>
@@ -172,7 +180,7 @@ export default function ExportModal(Props) {
                 type="number"
                 placeholder=""
                 disabled={exporting}
-                                className={cx(exporting && "opacity-50 border-opacity-50")}
+                className={cx(exporting && 'opacity-50 border-opacity-50')}
                 value={maxPolyphony ?? ''}
               />
             </FormItem>
@@ -182,33 +190,36 @@ export default function ExportModal(Props) {
               label="Multi Channel Orbits"
               onChange={(cbEvent) => {
                 const val = cbEvent.target.checked;
-                                setMultiChannelOrbits(val)
+                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")}
+            className={cx('bg-background p-2 w-full rounded-md hover:opacity-50 relative', exporting && 'opacity-50')}
             disabled={exporting}
             onClick={async () => {
-                            setExporting(true)
+              setExporting(true);
-                            setStrudelMaxPolyphony(maxPolyphony)
+              setStrudelMaxPolyphony(maxPolyphony);
-                            setStrudelMultiChannelOrbits(multiChannelOrbits)
+              setStrudelMultiChannelOrbits(multiChannelOrbits);
               setTimeout(refreshProgress, 1000);
               await handleExport(startCycle, endCycle, sampleRate, downloadName).finally(() => {
-                                setExporting(false)
+                setExporting(false);
-                                const modal = document.getElementById("exportModal");
+                const modal = document.getElementById('exportModal');
-                                setProgress(0)
+                setProgress(0);
-                                setLength(1)
+                setLength(1);
                 modal.close();
-                            })
+              });
             }}
           >
-                        <span className='text-foreground'>{exporting ? "Exporting..." : "Export to WAV"}</span>
+            <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={{
+            <div
-                            width: `${progress / length * 100}%`
+              className="bg-foreground opacity-10 absolute top-0 left-0 right-0 bottom-0"
-                        }} />
+              style={{
+                width: `${(progress / length) * 100}%`,
+              }}
+            />
           </button>
         </div>
       </dialog>

website/src/repl/components/Header.jsx

@@ -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 } =
+  const {
-    context;
+    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();