diff --git a/web/src/audiolet.js b/web/src/audiolet.js index 0cf4786..4bd2af9 100644 --- a/web/src/audiolet.js +++ b/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) { diff --git a/web/src/index.html b/web/src/index.html index 3d4d49e..117e1b7 100644 --- a/web/src/index.html +++ b/web/src/index.html @@ -13,8 +13,9 @@ MicroW8 0.1.2
- + +
diff --git a/web/src/main.js b/web/src/main.js index 3e913c9..c8fc4d2 100644 --- a/web/src/main.js +++ b/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() { diff --git a/web/src/microw8.js b/web/src/microw8.js index 8c48acc..24df187 100644 --- a/web/src/microw8.js +++ b/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; @@ -189,6 +220,8 @@ export default function MicroW8(screen, config = {}) { let instance = await instantiate(data); let buffer = U32(imageData.data.buffer); + + await audioReadyPromise; let startTime = Date.now(); diff --git a/web/src/style.css b/web/src/style.css index d85486d..8e844c0 100644 --- a/web/src/style.css +++ b/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;