Made high and low tid parameters to push audio processor.

KristofferStrube · Apr 21, 2024 · e68d9cf · e68d9cf
1 parent 4174edb
commit e68d9cf
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 13 deletions.
diff --git a/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/AudioWorklets.razor b/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/AudioWorklets.razor
@@ -11,7 +11,21 @@
 {
     <div style="display:flex; flex-direction:column; grid-gap: 5px;">
         <button class="btn btn-success" @onclick=PlayWhiteSound>Play Sound from static JS White Noise Generator</button>
+        <hr />
         <button class="btn btn-success" @onclick=PlayPushProcessedSound>Play Sound that is pushed from Blazor</button>
+        <div>
+            <label for="lowTide">Low Tide</label>
+            <input id="lowTide" @bind=lowTide />
+        </div>
+        <div>
+            <label for="highTide">High Tide</label>
+            <input id="highTide" @bind=highTide />
+        </div>
+        <div>
+            <label for="bufferRequestSize">Buffer Request Size</label>
+            <input id="bufferRequestSize" @bind=bufferRequestSize />
+        </div>
+        <hr />
     </div>
 }
 else
@@ -22,8 +36,16 @@ else
 <GainSlider GainNode=gainNode />
 
 @code {
+    int lowTide = 100;
+    int highTide = 500;
+    int bufferRequestSize = 100;
+
     AudioContext? context;
+
     AudioWorkletNode? worktletNode;
+    MessagePort? messagePort;
+    EventListener<MessageEvent>? 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<MessageEvent> messageEventListener = await EventListener<MessageEvent>.CreateAsync(JSRuntime, async (e) =>
+        messageEventListener = await EventListener<MessageEvent>.CreateAsync(JSRuntime, async (e) =>
         {
             var dataNeededToReachLowTide = await e.GetDataAsync<int>();
             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/...fferStrube.Blazor.WebAudio/wwwroot/KristofferStrube.Blazor.WebAudio.PushAudioProcessor.js b/...fferStrube.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) {