wait for audio ready before starting cart, add button to unsuspend audio

fixes missing sound when auto-starting cart in chrome

web/src/audiolet.js

@@ -39,6 +39,8 @@ class APU extends AudioWorkletProcessor {
         let instance = await instantiate(data);
 
         this.snd = instance.exports.snd;
+
+        this.port.postMessage(2);
     }
 
     process(inputs, outputs, parameters) {

web/src/index.html

@@ -13,8 +13,9 @@
             <a href="https://exoticorn.github.io/microw8">MicroW8</a> 0.1.2
         </div>
         <div id="centered">
-            <canvas id="screen" width="320" height="240">
+            <canvas class="screen" id="screen" width="320" height="240">
             </canvas>
+            <button class="screen" id="start" style="display:none">Click to start</button>
             <div id="timer" hidden="true"></div>        
             <div id="message"></div>
             <button id="cartButton" style="visibility:hidden">Load cart...</button>

web/src/main.js

@@ -12,6 +12,7 @@ let uw8 = MicroW8(document.getElementById('screen'), {
     setMessage,
     keyboardElement: window,
     timerElement: document.getElementById("timer"),
+    startButton: document.getElementById("start")
 });
 
 function runModuleFromHash() {

web/src/microw8.js

@@ -104,9 +104,6 @@ export default function MicroW8(screen, config = {}) {
             keepRunning = false;
         }
 
-        await audioContext.audioWorklet.addModule(audioWorkletUrl);
-        let audioNode = new AudioNode(audioContext);
-
         let cartridgeSize = data.byteLength;
     
         config.setMessage(cartridgeSize);
@@ -114,6 +111,40 @@ export default function MicroW8(screen, config = {}) {
             return;
         }
     
+        await audioContext.audioWorklet.addModule(audioWorkletUrl);
+        let audioNode = new AudioNode(audioContext);
+
+        let audioReadyFlags = 0;
+        let audioReadyResolve;
+        let audioReadyPromise = new Promise(resolve => audioReadyResolve = resolve);
+        let updateAudioReady = (f) => {
+            audioReadyFlags |= f;
+            if(audioReadyFlags == 3 && audioReadyResolve) {
+                audioReadyResolve(true);
+                audioReadyResolve = null;
+            }
+        };
+        audioNode.port.onmessage = (e) => updateAudioReady(e.data);
+        let audioStateChange = () => {
+            if(audioContext.state == 'suspended') {
+                if(config.startButton) {
+                    config.startButton.style = '';
+                    screen.style = 'display:none';
+                }
+                (config.startButton || screen).onclick = () => {
+                    audioContext.resume();
+                };
+            } else {
+                if(config.startButton) {
+                    config.startButton.style = 'display:none';
+                    screen.style = '';
+                }
+                updateAudioReady(1);
+            }
+        };
+        audioContext.onstatechange = audioStateChange;
+        audioStateChange();
+
         currentData = data;
     
         let newURL = window.location.pathname;
@@ -190,6 +221,8 @@ export default function MicroW8(screen, config = {}) {
     
             let buffer = U32(imageData.data.buffer);
 
+            await audioReadyPromise;
+    
             let startTime = Date.now();
     
             const timePerFrame = 1000 / 60;

web/src/style.css

@@ -37,7 +37,7 @@ a:hover {
     color: #405040;
 }
 
-#screen {
+.screen {
     width: 320px;
     height: 240px;
     image-rendering: pixelated;
@@ -45,9 +45,16 @@ a:hover {
     margin-bottom: 8px;
     border: 4px solid #303040;
     box-shadow: 5px 5px 20px black;
+}
+
+#screen {
     cursor: none;
 }
 
+#start {
+    font-size: 150%;
+}
+
 #timer::before {
     content: '';
     display: inline-block;
@@ -84,21 +91,21 @@ button:active {
 }
 
 @media (min-width: 680px) and (min-height: 620px) {
-    #screen {
+    .screen {
         width: 640px;
         height: 480px;
     }
 }
 
 @media (min-width: 1000px) and (min-height: 800px) {
-    #screen {
+    .screen {
         width: 960px;
         height: 720px;
     }
 }
 
 @media (width:640px) and (height:480px) {
-    #screen {
+    .screen {
         width: 640px;
         height: 480px;
         border: 0;