Merge pull request #15 from KristofferStrube/master

EngstromJimmy · web-flow · commit 8ec753c62643 · 2025-11-11T22:48:12.000+01:00
Updated JSInterop for sending and playing audio data.
diff --git a/Platforms/ZXBox.Blazor/Components/EmulatorComponent.razor.cs b/Platforms/ZXBox.Blazor/Components/EmulatorComponent.razor.cs
@@ -138,19 +138,20 @@ private async void GameLoop_Elapsed(object sender, ElapsedEventArgs e)
         IntPtr pinnedsound;
         WebAssemblyJSRuntime mono;
         byte[] soundbytes;
+
         protected async Task BufferSound()
         {
             soundbytes = beeper.GetSoundBuffer();
-            gchsound = GCHandle.Alloc(soundbytes, GCHandleType.Pinned);
-            pinnedsound = gchsound.AddrOfPinnedObject();
-            mono.InvokeUnmarshalled<IntPtr, string>("addAudioBuffer", pinnedsound);
-            gchsound.Free();
+            mono.InvokeVoid("addAudioBuffer", soundbytes);
         }
 
         public double PercentLoaded = 0;
         protected async override void OnAfterRender(bool firstRender)
         {
-
+            if (firstRender)
+            {
+                await JSRuntime.InvokeAsync<bool>("InitCanvas");
+            }
             base.OnAfterRender(firstRender);
         }
 
diff --git a/Platforms/ZXBox.Blazor/wwwroot/index.html b/Platforms/ZXBox.Blazor/wwwroot/index.html
@@ -13,62 +13,37 @@
 
 <body>
     <script>
-        //Sound
-        var audiobuffer = [];
+        // Variables
         var nextStartTime = 0;
-        var lastcall = performance.now()
-        var audiocontext = new (window.AudioContext || window.webkitAudioContext)();
-        var gainNode = audiocontext.createGain();
-        gainNode.gain.value = 0.01;
-
-        function addAudioBuffer
-            (dataPtr) {
-            var buffersize = 960;
-            var myArrayBuffer = audiocontext.createBuffer(1, buffersize, audiocontext.sampleRate);
-            var nowBuffering = myArrayBuffer.getChannelData(0);
-
-            for (var d = 0; d < buffersize; d++) {
-                nowBuffering[d] = Module.HEAPU8[dataPtr + d];
-                //console.log(nowBuffering[d]);
-            }
-            let source = audiocontext.createBufferSource();
-            source.buffer = myArrayBuffer;
+        var buffersize = 960;
 
-            gainNode.connect(audiocontext.destination);
-            source.connect(gainNode);
-            if (nextStartTime == 0) nextStartTime = audiocontext.currentTime + (myArrayBuffer.length / myArrayBuffer.sampleRate);
+        // Create audioContext and gain node.
+        // Gain is set to 10% as we will add data 256 times larger than the normal max to our audio buffer source node.
+        var audioContext = new AudioContext();
+        var gainNode = new GainNode(audioContext, { gain: 0.1 / 256 });
 
-            source.start(nextStartTime);
-            nextStartTime += myArrayBuffer.length / myArrayBuffer.sampleRate;
-            gainNode.gain.value = 0.0005;
-
-            //console.log(dataPtr);
-        }
+        // Connect the gain node.
+        gainNode.connect(audioContext.destination);
 
+        function addAudioBuffer(byteData) {
+            // Create audiobuffer
+            var audioBuffer = audioContext.createBuffer(1, buffersize, audioContext.sampleRate);
 
+            // Create Float32Array from UInt8Array via constructor.
+            var newChannelData = new Float32Array(byteData)
+            audioBuffer.copyToChannel(newChannelData, 0);
 
-        //function play() {
-        //    console.log("Playing sound");
-        //    soundon = true;
-        //    //end of stream has been reached
-        //    if (audiobuffer.length === 0)
-        //    {
-        //        console.log("To slow");
-        //        soundon = false;
-        //        return;
-        //    }
-        //    let source = audiocontext.createBufferSource();
-        //    //get the latest buffer that should play next
-        //    source.buffer = audiobuffer.shift();
-        //    source.connect(audiocontext.destination);
-
-        //    //add this function as a callback to play next buffer
-        //    //when current buffer has reached its end
-        //    source.onended = play;
-        //    source.start();
-        //}
+            // Create audio source from audio buffer
+            let source = new AudioBufferSourceNode(audioContext, { buffer: audioBuffer })
 
+            // Connect the new source node to the main gain node.
+            source.connect(gainNode);
 
+            // Update nextStartTime and start source node.
+            if (nextStartTime == 0) nextStartTime = audioContext.currentTime + (audioBuffer.length / audioBuffer.sampleRate);
+            source.start(nextStartTime);
+            nextStartTime += audioBuffer.length / audioBuffer.sampleRate;
+        }
 
         var pressedKeys = [];
 

Original file line number	Diff line number	Diff line change
`@@ -138,19 +138,20 @@ private async void GameLoop_Elapsed(object sender, ElapsedEventArgs e)`
`138`	`138`	`IntPtr pinnedsound;`
`139`	`139`	`WebAssemblyJSRuntime mono;`
`140`	`140`	`byte[] soundbytes;`
	`141`	`+`
`141`	`142`	`protected async Task BufferSound()`
`142`	`143`	`{`
`143`	`144`	`soundbytes = beeper.GetSoundBuffer();`
`144`		`- gchsound = GCHandle.Alloc(soundbytes, GCHandleType.Pinned);`
`145`		`- pinnedsound = gchsound.AddrOfPinnedObject();`
`146`		`- mono.InvokeUnmarshalled<IntPtr, string>("addAudioBuffer", pinnedsound);`
`147`		`- gchsound.Free();`
	`145`	`+ mono.InvokeVoid("addAudioBuffer", soundbytes);`
`148`	`146`	`}`
`149`	`147`
`150`	`148`	`public double PercentLoaded = 0;`
`151`	`149`	`protected async override void OnAfterRender(bool firstRender)`
`152`	`150`	`{`
`153`		`-`
	`151`	`+ if (firstRender)`
	`152`	`+ {`
	`153`	`+ await JSRuntime.InvokeAsync<bool>("InitCanvas");`
	`154`	`+ }`
`154`	`155`	`base.OnAfterRender(firstRender);`
`155`	`156`	`}`
`156`	`157`