WIP non-realtime exporting

website/src/repl/components/Header.jsx

@@ -8,7 +8,7 @@ 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 } =
+  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();
@@ -93,6 +93,16 @@ export function Header({ context, embedded = false }) {
           >
             {!isEmbedded && <span>update</span>}
           </button>
+          <button
+            onClick={() => handleExport(1, 16)}
+            title="export"
+            className={cx(
+              'flex items-center space-x-1',
+              !isEmbedded ? 'p-2' : 'px-2',
+            )}
+          >
+            {!isEmbedded && <span>export</span>}
+          </button>
           {/* !isEmbedded && (
             <button
               title="shuffle"

website/src/repl/components/panel/SettingsTab.jsx

@@ -114,7 +114,7 @@ export function SettingsTab({ started }) {
     isMultiCursorEnabled,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
-  const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
+  const canChangeAudioDevice = BaseAudioContext.prototype.setSinkId != null;
   return (
     <div className="text-foreground p-4 space-y-4 w-full" style={{ fontFamily }}>
       {canChangeAudioDevice && (

website/src/repl/useReplContext.jsx

@@ -203,6 +203,9 @@ export function useReplContext() {
   const handleEvaluate = () => {
     editorRef.current.evaluate();
   };
+  const handleExport = (begin, end) => {
+    editorRef.current.exportAudio(begin, end);
+  };
   const handleShuffle = async () => {
     const patternData = await getRandomTune();
     const code = patternData.code;
@@ -225,6 +228,7 @@ export function useReplContext() {
     handleShuffle,
     handleShare,
     handleEvaluate,
+    handleExport,
     init,
     error,
     editorRef,