diff --git a/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/AudioWorklets.razor b/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/AudioWorklets.razor index 1ecef8a..9bcb97a 100644 --- a/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/AudioWorklets.razor +++ b/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/AudioWorklets.razor @@ -11,7 +11,21 @@ {
+
+
+ + +
+
+ + +
+
+ + +
+
} else @@ -22,8 +36,16 @@ else @code { + int lowTide = 100; + int highTide = 500; + int bufferRequestSize = 100; + AudioContext? context; + AudioWorkletNode? worktletNode; + MessagePort? messagePort; + EventListener? messageEventListener; + AudioDestinationNode? destination; GainNode? gainNode; @@ -41,7 +63,7 @@ else // Get destination and connect worklet node through gainNode destination = await context.GetDestinationAsync(); - gainNode = await GainNode.CreateAsync(JSRuntime, context, new() { Gain = 0.05f } ); + gainNode = await GainNode.CreateAsync(JSRuntime, context, new() { Gain = 0.05f }); await worktletNode.ConnectAsync(gainNode); await gainNode.ConnectAsync(destination); } @@ -56,7 +78,15 @@ else await audioWorklet.AddModuleAsync("./_content/KristofferStrube.Blazor.WebAudio/KristofferStrube.Blazor.WebAudio.PushAudioProcessor.js"); // Create node from registered processor. - worktletNode = await AudioWorkletNode.CreateAsync(JSRuntime, context, "kristoffer-strube-webaudio-push-audio-processor"); + worktletNode = await AudioWorkletNode.CreateAsync(JSRuntime, context, "kristoffer-strube-webaudio-push-audio-processor", new() + { + ParameterData = new() + { + ["lowTide"] = lowTide, + ["highTide"] = highTide, + ["bufferRequestSize"] = bufferRequestSize, + } + }); // Get destination and connect worklet node through gainNode destination = await context.GetDestinationAsync(); @@ -65,9 +95,9 @@ else await gainNode.ConnectAsync(destination); // Get MessagePort and set up event listener for messages from the worklet. - MessagePort messagePort = await worktletNode.GetPortAsync(); + messagePort = await worktletNode.GetPortAsync(); await messagePort.StartAsync(); - EventListener messageEventListener = await EventListener.CreateAsync(JSRuntime, async (e) => + messageEventListener = await EventListener.CreateAsync(JSRuntime, async (e) => { var dataNeededToReachLowTide = await e.GetDataAsync(); Console.WriteLine(dataNeededToReachLowTide); @@ -109,12 +139,22 @@ else destination = null; } - if (worktletNode is not null) + if (messageEventListener is not null && messagePort is not null) + { + await messagePort.RemoveOnMessageEventListenerAsync(messageEventListener); + await messageEventListener.DisposeAsync(); + messageEventListener = null; + } + + if (messagePort is not null) { - // Get MessagePort and close it. - await using MessagePort messagePort = await worktletNode.GetPortAsync(); await messagePort.CloseAsync(); + await messagePort.DisposeAsync(); + messagePort = null; + } + if (worktletNode is not null) + { await worktletNode.DisconnectAsync(); await worktletNode.DisposeAsync(); worktletNode = null; diff --git a/src/KristofferStrube.Blazor.WebAudio/wwwroot/KristofferStrube.Blazor.WebAudio.PushAudioProcessor.js b/src/KristofferStrube.Blazor.WebAudio/wwwroot/KristofferStrube.Blazor.WebAudio.PushAudioProcessor.js index b0f6601..db2a362 100644 --- a/src/KristofferStrube.Blazor.WebAudio/wwwroot/KristofferStrube.Blazor.WebAudio.PushAudioProcessor.js +++ b/src/KristofferStrube.Blazor.WebAudio/wwwroot/KristofferStrube.Blazor.WebAudio.PushAudioProcessor.js @@ -4,6 +4,30 @@ frontIndex = 0; dataRequested = 100; + static get parameterDescriptors() { + return [{ + name: 'lowTide', + defaultValue: 100, + minValue: 1, + maxValue: 10000, + automationRate: "k-rate" + }, + { + name: 'highTide', + defaultValue: 500, + minValue: 1, + maxValue: 10000, + automationRate: "k-rate" + }, + { + name: 'bufferRequestSize', + defaultValue: 100, + minValue: 1, + maxValue: 10000, + automationRate: "k-rate" + }]; + } + constructor(...args) { super(...args); this.queue = []; @@ -17,6 +41,10 @@ process(inputs, outputs, parameters) { const output = outputs[0]; + const lowTide = parameters.lowTide[0]; + const highTide = parameters.highTide[0]; + const bufferRequestSize = parameters.bufferRequestSize[0]; + try { const count = this.frontIndex - this.backIndex; if (count != 0) { @@ -29,12 +57,9 @@ } }); } - if (count < 100) { - let dataNeededToReachLowTide = 100; - if (this.dataRequested + dataNeededToReachLowTide < 500) { - this.dataRequested += dataNeededToReachLowTide; - this.port.postMessage(dataNeededToReachLowTide); - } + if (count < lowTide && this.dataRequested + bufferRequestSize < highTide) { + this.dataRequested += bufferRequestSize; + this.port.postMessage(bufferRequestSize); } } catch (e) {