fixed

packages/superdough/superdough.mjs

@@ -27,6 +27,7 @@ export function getSound(s) {
 export const resetLoadedSounds = () => soundMap.set({});
 
 let audioContext;
+export const isAudioInitialized = () => audioContext != null;
 
 export const setDefaultAudioContext = () => {
   audioContext = new AudioContext();
@@ -37,17 +38,12 @@ export const getAudioContext = () => {
   if (!audioContext) {
     return setDefaultAudioContext();
   }
+
   return audioContext;
 };
 
-let workletsLoading;
-
-function loadWorklets() {
-  if (workletsLoading) {
-    return workletsLoading;
-  }
-  workletsLoading = getAudioContext().audioWorklet.addModule(workletsUrl);
-  return workletsLoading;
+export async function loadWorklets() {
+  return await getAudioContext().audioWorklet.addModule(workletsUrl);
 }
 
 // this function should be called on first user interaction (to avoid console warning)
@@ -56,11 +52,15 @@ export async function initAudio(options = {}) {
   if (typeof window !== 'undefined') {
     await getAudioContext().resume();
     if (!disableWorklets) {
-      await loadWorklets().catch((err) => {
-        console.warn('could not load AudioWorklet effects coarse, crush and shape', err);
-      });
+      await loadWorklets()
+        .catch((err) => {
+          console.warn('could not load AudioWorklet effects', err);
+        })
+        .finally(() => {
+          logger('audio worklets loaded');
+        });
     } else {
-      console.log('disableWorklets: AudioWorklet effects coarse, crush and shape are skipped!');
+      logger('disableWorklets: AudioWorklet effects skipped!');
     }
   }
 }

website/src/repl/Repl.jsx

@@ -10,10 +10,11 @@ import cx from '@src/cx.mjs';
 import { transpiler } from '@strudel/transpiler';
 import {
   getAudioContext,
-  initAudioOnFirstClick,
+  initAudio,
   webaudioOutput,
   resetGlobalEffects,
   resetLoadedSounds,
+  isAudioInitialized,
 } from '@strudel/webaudio';
 import { defaultAudioDeviceName } from '../settings.mjs';
 import { getAudioDevices, setAudioDevice } from './util.mjs';
@@ -44,7 +45,6 @@ const { latestCode } = settingsMap.get();
 
 let modulesLoading, presets, drawContext, clearCanvas, isIframe;
 if (typeof window !== 'undefined') {
-  initAudioOnFirstClick();
   modulesLoading = loadModules();
   presets = prebake();
   drawContext = getDrawContext();
@@ -83,11 +83,16 @@ export function Repl({ embedded = false }) {
       onUpdateState: (state) => {
         setReplState({ ...state });
       },
-      onToggle: (playing) => {
+      onToggle: async (playing) => {
         if (!playing) {
           clearHydra();
         }
       },
+      beforeEval: async () => {
+        if (!isAudioInitialized()) {
+          await initAudio();
+        }
+      },
       afterEval: (all) => {
         const { code } = all;
         setLatestCode(code);