Made Analyzer more stable.

Author: KristofferStrube

samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioEditor/AudioEditor.razor

@@ -31,7 +31,7 @@
 
         while (running)
         {
-            await Task.Delay(100);
+            await Task.Delay(50);
             foreach (ITaskQueueable taskQueueable in SVGEditor.Elements.Where(e => e is ITaskQueueable))
             {
                 while (taskQueueable.QueuedTasks.TryDequeue(out var task))

samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioEditor/NodeEditors/AnalyserEditor.razor

@@ -27,7 +27,7 @@
         <foreignObject @onpointerdown:stopPropagation=!SVGElement.Selected x="@((SVGElement.X+10).AsString())" y="@((SVGElement.Y+10).AsString())" height="110" width="200" style="border:solid @(SVGElement.StrokeWidth)px @(SVGElement.Stroke);padding:2;pointer-events:@(SVGElement.Selected ? "none" : "inherit");touch-action:@(SVGElement.Selected ? "none" : "inherit")">
             Analyser
             <br />
-            <select @bind=analyzeOutput>
+            <select @bind=SVGElement.Type>
                 <option value="TimeDomain" title="Time Domain Data.">Time Domain</option>
                 <option value="Frequency" title="Frequency Data.">Frequency</option>
             </select>
@@ -49,7 +49,6 @@
 
 @code {
     private AnalyserNode? analyser;
-    private string analyzeOutput = "TimeDomain";
 
     private byte[] measurements = Array.Empty<byte>();
 
@@ -65,27 +64,42 @@
             analyser = (AnalyserNode)await SVGElement.AudioNode(AudioContext);
 
             int bufferLength = (int)await analyser.GetFrequencyBinCountAsync();
-            Uint8Array dataArray = await Uint8Array.CreateAsync(AudioContext.JSRuntime, bufferLength);
+            await using Uint8Array dataArray = await Uint8Array.CreateAsync(AudioContext.JSRuntime, bufferLength);
 
             SVGElement.Running = true;
 
             while (SVGElement.Running)
             {
                 try
                 {
-                    if (analyzeOutput is "TimeDomain")
+                    SVGElement.QueuedTasks.Enqueue(async _ =>
                     {
-                        await analyser.GetByteTimeDomainDataAsync(dataArray);
-                    }
-                    else
-                    {
-                        await analyser.GetByteFrequencyDataAsync(dataArray);
-                    }
+                        if (SVGElement.Type is "TimeDomain")
+                        {
+                            await analyser.GetByteTimeDomainDataAsync(dataArray);
+                            measurements = await dataArray.GetAsArrayAsync();
+                        }
+                        else
+                        {
+                            await analyser.GetByteFrequencyDataAsync(dataArray);
+
+                            var data = (await dataArray.GetAsArrayAsync());
+                            int endOfPlateau = 1;
+                            for (int i = data.Length - 1; i >= 0; i--)
+                            {
+                                if (data[i] != 0)
+                                {
+                                    endOfPlateau = i;
+                                    break;
+                                }
+                            }
+                            measurements = data[..endOfPlateau];
+                        }
+                        SVGElement._stateRepresentation = "";
 
-                    measurements = await dataArray.GetAsArrayAsync();
-                    await Task.Delay(10);
-                    SVGElement._stateRepresentation = "";
-                    StateHasChanged();
+                        await InvokeAsync(StateHasChanged);
+                    });
+                    await Task.Delay(50);
                 }
                 catch (Exception)
                 {

samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioEditor/Nodes/Analyser.cs

@@ -24,6 +24,23 @@ public Analyser(IElement element, SVGEditor.SVGEditor svg) : base(element, svg)
         set => base.Height = 130;
     }
 
+    public string Type
+    {
+        get => Element.GetAttribute("data-type");
+        set
+        {
+            if (value is null)
+            {
+                _ = Element.RemoveAttribute("data-type");
+            }
+            else
+            {
+                Element.SetAttribute("data-type", value);
+            }
+            Changed?.Invoke(this);
+        }
+    }
+
     public bool Running { get; set; }
 
     public override Type Presenter => typeof(AnalyserEditor);
@@ -40,6 +57,7 @@ public Analyser(IElement element, SVGEditor.SVGEditor svg) : base(element, svg)
             StrokeWidth = "2",
             Height = 130,
             Width = 250,
+            Type = "TimeDomain",
         };
 
         (node.X, node.Y) = SVG.LocalDetransform(SVG.LastRightClick);

samples/KristofferStrube.Blazor.WebAudio.WasmExample/Shared/Plot.razor

@@ -1,7 +1,7 @@
-<svg width="100%" height="@(Height)px" viewBox="0 -5 @Data.Length 261">
+<svg width="100%" height="@(Height)px" viewBox="0 -5 2000 261">
     @for (int i = 1; i < Data.Length; i++)
     {
-        <line x1="@(i-1)" x2="@i" y1="@Data[i-1]" y2="@Data[i]" stroke="red" stroke-width="2"></line>
+        <line x1="@(((i-1) * 2000.0 / @Data.Length).AsString())" x2="@((i * 2000.0 / @Data.Length).AsString())" y1="@Data[i-1]" y2="@Data[i]" stroke="red" stroke-width="2"></line>
     }
 </svg>