fix unstable playback in browser runtime

examples/curlywas/cracklebass.cwa

@@ -5,7 +5,7 @@ include "../include/microw8-api.cwa"
 const MUSIC_DATA = 0x20000;
 
 export fn upd() {
-    let inline t = 32!32 / 16;
+    let inline t = 32!32 * 6 / 100;
     let inline p = t / 1024;
 
     let channel:i32;

src/run_native.rs

@@ -197,8 +197,8 @@ impl super::Runtime for MicroW8 {
     fn run_frame(&mut self) -> Result<()> {
         let mut result = Ok(());
         if let Some(mut instance) = self.instance.take() {
-            {
             let time = instance.start_time.elapsed().as_millis() as i32;
+            {
                 let mut gamepad: u32 = 0;
                 for key in self.window.get_keys() {
                     if let Some(index) = GAMEPAD_KEYS
@@ -232,7 +232,10 @@ impl super::Runtime for MicroW8 {
             let mut sound_regs = [0u8; 32];
             sound_regs.copy_from_slice(&memory[80..112]);
             if let Some(ref sound) = instance.sound {
-                sound.tx.send(sound_regs)?;
+                sound.tx.send(RegisterUpdate {
+                    time,
+                    data: sound_regs,
+                })?;
             }
 
             let framebuffer = &memory[120..(120 + 320 * 240)];
@@ -312,9 +315,14 @@ fn instantiate_platform(
     Ok(platform_instance)
 }
 
+struct RegisterUpdate {
+    time: i32,
+    data: [u8; 32],
+}
+
 struct Uw8Sound {
     stream: cpal::Stream,
-    tx: mpsc::SyncSender<[u8; 32]>,
+    tx: mpsc::SyncSender<RegisterUpdate>,
 }
 
 fn init_sound(
@@ -368,7 +376,7 @@ fn init_sound(
     let buffer_size = match *config.buffer_size() {
         cpal::SupportedBufferSize::Unknown => cpal::BufferSize::Default,
         cpal::SupportedBufferSize::Range { min, max } => {
-            cpal::BufferSize::Fixed(256.max(min).min(max))
+            cpal::BufferSize::Fixed(65536.max(min).min(max))
         }
     };
     let config = cpal::StreamConfig {
@@ -378,9 +386,7 @@ fn init_sound(
 
     let sample_rate = config.sample_rate.0 as usize;
 
-    let (tx, rx) = mpsc::sync_channel::<[u8; 32]>(1);
+    let (tx, rx) = mpsc::sync_channel::<RegisterUpdate>(30);
-
-    let start_time = Instant::now();
 
     struct Resampler {
         resampler: rubato::FftFixedIn<f32>,
@@ -403,17 +409,42 @@ fn init_sound(
     };
 
     let mut sample_index = 0;
+    let mut pending_updates: Vec<RegisterUpdate> = Vec::with_capacity(30);
+    let mut current_time = 0;
     let stream = device.build_output_stream(
         &config,
-        move |mut buffer: &mut [f32], _| {
+        move |mut outer_buffer: &mut [f32], _| {
-            if let Ok(regs) = rx.try_recv() {
+            let mut first_update = true;
-                memory.write(&mut store, 80, &regs).unwrap();
+            while let Ok(update) = rx.try_recv() {
+                if first_update {
+                    current_time += update.time.wrapping_sub(current_time) / 8;
+                    first_update = false;
+                }
+                pending_updates.push(update);
             }
 
+            while !outer_buffer.is_empty() {
+                while pending_updates
+                    .first()
+                    .into_iter()
+                    .any(|u| u.time.wrapping_sub(current_time) <= 0)
+                {
+                    let update = pending_updates.remove(0);
+                    memory.write(&mut store, 80, &update.data).unwrap();
+                }
+
+                let duration = if let Some(update) = pending_updates.first() {
+                    ((update.time.wrapping_sub(current_time) as usize) * sample_rate + 999) / 1000
+                } else {
+                    outer_buffer.len()
+                };
+                let step_size = (duration.max(64) * 2).min(outer_buffer.len());
+
+                let mut buffer = &mut outer_buffer[..step_size];
+
                 {
-                let time = start_time.elapsed().as_millis() as i32;
                     let mem = memory.data_mut(&mut store);
-                mem[64..68].copy_from_slice(&time.to_le_bytes());
+                    mem[64..68].copy_from_slice(&current_time.to_le_bytes());
                 }
 
                 if let Some(ref mut resampler) = resampler {
@@ -444,7 +475,8 @@ fn init_sound(
                             resampler.output_index = 0;
                         } else {
                             for i in 0..copy_size {
-                            buffer[i * 2] = resampler.output_buffers[0][resampler.output_index + i];
+                                buffer[i * 2] =
+                                    resampler.output_buffers[0][resampler.output_index + i];
                                 buffer[i * 2 + 1] =
                                     resampler.output_buffers[1][resampler.output_index + i];
                             }
@@ -458,6 +490,11 @@ fn init_sound(
                         sample_index = sample_index.wrapping_add(1);
                     }
                 }
+
+                outer_buffer = &mut outer_buffer[step_size..];
+                current_time =
+                    current_time.wrapping_add((step_size * 500 / sample_rate).max(1) as i32);
+            }
         },
         move |err| {
             dbg!(err);

web/src/audiolet.js

@@ -3,13 +3,17 @@ class APU extends AudioWorkletProcessor {
     constructor() {
         super();
         this.sampleIndex = 0;
+        this.currentTime = 0;
+        this.isFirstMessage = true;
+        this.pendingUpdates = [];
         this.port.onmessage = (ev) => {
             if(this.memory) {
-                if(isNaN(ev.data)) {
+                if(this.isFirstMessage)
-                    U8(this.memory.buffer, 80, 32).set(U8(ev.data));
+                {
-                } else {
+                    this.currentTime += (ev.data.t - this.currentTime) / 8;
-                    this.startTime = ev.data;
+                    this.isFirstMessage = false;
                 }
+                this.pendingUpdates.push(ev.data);
             } else {
                 this.load(ev.data[0], ev.data[1]);
             }
@@ -55,9 +59,13 @@ class APU extends AudioWorkletProcessor {
     }
 
     process(inputs, outputs, parameters) {
-        if(this.snd && this.startTime) {
+        this.isFirstMessage = true;
+        if(this.snd) {
+            while(this.pendingUpdates.length > 0 && this.pendingUpdates[0].t <= this.currentTime) {
+                U8(this.memory.buffer, 80, 32).set(U8(this.pendingUpdates.shift().r));
+            }
             let u32Mem = new Uint32Array(this.memory.buffer);
-            u32Mem[16] = Date.now() - this.startTime;
+            u32Mem[16] = this.currentTime;
             let channels = outputs[0];
             let index = this.sampleIndex;
             let numSamples = channels[0].length;
@@ -66,6 +74,7 @@ class APU extends AudioWorkletProcessor {
                 channels[1][i] = this.snd(index++);
             }
             this.sampleIndex = index & 0xffffffff;
+            this.currentTime += numSamples / 44.1;
         }
 
         return true;

web/src/microw8.js

@@ -107,7 +107,7 @@ export default function MicroW8(screen, config = {}) {
             audioContext.close();
             keepRunning = false;
             abortController.abort();
-        }
+        };
 
         let cartridgeSize = data.byteLength;
     
@@ -232,7 +232,6 @@ export default function MicroW8(screen, config = {}) {
             let startTime = Date.now();
     
             const timePerFrame = 1000 / 60;
-            let nextFrame = startTime;
 
             audioNode.connect(audioContext.destination);
 
@@ -244,12 +243,10 @@ export default function MicroW8(screen, config = {}) {
                     isPaused = false;
                     audioContext.resume();
                     startTime += now - pauseTime;
-                    audioNode.port.postMessage(startTime);
                 } else {
                     isPaused = true;
                     audioContext.suspend();
                     pauseTime = now;
-                    audioNode.port.postMessage(0);
                 }
             };
             window.addEventListener('focus', () => updateVisibility(true), { signal: abortController.signal });
@@ -263,6 +260,7 @@ export default function MicroW8(screen, config = {}) {
     
                 try {
                     let restart = false;
+                    let thisFrame;
                     if (!isPaused) {
                         let gamepads = navigator.getGamepads();
                         let gamepad = 0;
@@ -291,7 +289,8 @@ export default function MicroW8(screen, config = {}) {
                         }
     
                         let u32Mem = U32(memory.buffer);
-                        u32Mem[16] = Date.now() - startTime;
+                        let time = Date.now() - startTime;
+                        u32Mem[16] = time;
                         u32Mem[17] = pad | gamepad;
                         if(instance.exports.upd) {
                             instance.exports.upd();
@@ -300,16 +299,21 @@ export default function MicroW8(screen, config = {}) {
 
                         let soundRegisters = new ArrayBuffer(32);
                         U8(soundRegisters).set(U8(memory.buffer, 80, 32));
-                        audioNode.port.postMessage(soundRegisters, [soundRegisters]);
+                        audioNode.port.postMessage({t: time, r: soundRegisters}, [soundRegisters]);
     
                         let palette = U32(memory.buffer, 0x13000, 1024);
                         for (let i = 0; i < 320 * 240; ++i) {
                             buffer[i] = palette[memU8[i + 120]] | 0xff000000;
                         }
                         canvasCtx.putImageData(imageData, 0, 0);
+
+                        let timeOffset = ((time * 6) % 100 - 50) / 6;
+                        thisFrame = startTime + time - timeOffset / 2;
+                    } else {
+                        thisFrame = Date.now();
                     }
                     let now = Date.now();
-                    nextFrame = Math.max(nextFrame + timePerFrame, now);
+                    let nextFrame = Math.max(thisFrame + timePerFrame, now);
     
                     if (restart) {
                         runModule(currentData);