looping Spectrogram.

KristofferStrube · Dec 21, 2023 · 3577683 · 3577683
1 parent 3d7bc05
commit 3577683
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 23 deletions.
diff --git a/...ferStrube.Blazor.WebAudio.WasmExample/KristofferStrube.Blazor.WebAudio.WasmExample.csproj b/...ferStrube.Blazor.WebAudio.WasmExample/KristofferStrube.Blazor.WebAudio.WasmExample.csproj
@@ -9,6 +9,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="CommunityToolkit.HighPerformance" Version="8.2.2" />
     <PackageReference Include="KristofferStrube.Blazor.SVGEditor" Version="0.2.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.4" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.4" PrivateAssets="all" />

diff --git a/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/Drums.razor b/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/Drums.razor
@@ -20,7 +20,7 @@
 
 <h3>Spectrogram</h3>
 <hr />
-<SpectrogramPlot Analyser=analyser UpperFrequency="30" />
+<SpectrogramPlot Analyser=analyser UpperFrequency="40" Height="400" />
 
 @code {
     static readonly float[] timpsFrequencies = new float[] { 1.00f, 1.50f, 1.98f, 2.44f };

diff --git a/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/Spectrogram.razor b/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/Spectrogram.razor
@@ -41,7 +41,6 @@ else
     byte[] frequencyMeasurements = Array.Empty<byte>();
     float frequency;
     OscillatorType type;
-    bool makeMeasurements = false;
 
     protected override async Task OnInitializedAsync()
     {
@@ -68,7 +67,6 @@ else
 
     public async Task StopSound()
     {
-        makeMeasurements = false;
         if (oscillator is null) return;
         await oscillator.StopAsync();
         oscillator = null;

diff --git a/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Shared/SpectrogramPlot.razor b/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Shared/SpectrogramPlot.razor
@@ -1,9 +1,11 @@
-<svg width="100%" height="@(Height)px" preserveAspectRatio="none" viewBox="0 0 @(TimeInSeconds * 1000) @(UpperFrequency - LowerFrequency)">
-    @for (int i = 1; i < data.Count; i++)
+@if (data is null) return;
+
+<svg width="100%" height="@(Height)px" preserveAspectRatio="none" viewBox="0 0 100 @(UpperFrequency - LowerFrequency)">
+    @for (int i = 1; i < 100; i++)
     {
         for (int j = 0; j < UpperFrequency - LowerFrequency; j++)
         {
-            <rect @key=@((i, j)) x="@intervals[i].start.AsString()" y="@j" height="1" width="@intervals[i].length.AsString()" fill=@($"#F{(255-data[i][j])/16:X}{(255-data[i][j])/16:X}") ></rect>
+            <rect @key=@((i, j)) x="@i" y="@j" height="1" width="1" fill=@($"#F{(255-data[j,i])/16:X}{(255-data[j,i])/16:X}")></rect>
         }
     }
 </svg>

diff --git a/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Shared/SpectrogramPlot.razor.cs b/samples/KristofferStrube.Blazor.WebAudio.WasmExample/Shared/SpectrogramPlot.razor.cs
@@ -1,14 +1,15 @@
 using KristofferStrube.Blazor.WebIDL;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
+using CommunityToolkit.HighPerformance;
+using System;
 
 namespace KristofferStrube.Blazor.WebAudio.WasmExample.Shared;
 
 public partial class SpectrogramPlot : IDisposable
 {
     private bool running;
-    private readonly List<byte[]> data = [];
-    private readonly List<(double start, double length)> intervals = [];
+    private byte[,]? data;
 
     [Inject]
     public required IJSRuntime JSRuntime { get; set; }
@@ -28,18 +29,13 @@ public partial class SpectrogramPlot : IDisposable
     [Parameter]
     public int UpperFrequency { get; set; } = 100;
 
-
-
-    protected override void OnParametersSet()
-    {
-
-    }
-
     protected override async Task OnAfterRenderAsync(bool _)
     {
         if (running || Analyser is null) return;
         running = true;
 
+        data = new byte[UpperFrequency - LowerFrequency, 100];
+
         int bufferLength = (int)await Analyser.GetFrequencyBinCountAsync();
         Uint8Array frequencyDataArray = await Uint8Array.CreateAsync(JSRuntime, Math.Min(bufferLength, UpperFrequency - LowerFrequency));
 
@@ -48,19 +44,29 @@ protected override async Task OnAfterRenderAsync(bool _)
         while (running)
         {
             await Analyser.GetByteFrequencyDataAsync(frequencyDataArray);
-            data.Add((await frequencyDataArray.GetByteArrayAsync())[LowerFrequency..UpperFrequency]);
+            byte[] reading = await frequencyDataArray.GetByteArrayAsync();
 
             DateTimeOffset currentTime = DateTimeOffset.UtcNow;
-            var intervalLength = (currentTime - lastTime).TotalMilliseconds;
-            intervals.Add(((lastTime - start).TotalMilliseconds, intervalLength));
+            int intervalStart = (int)((lastTime - start).TotalMilliseconds / TimeInSeconds / 10);
+            int intervalEnd = (int)((currentTime - start).TotalMilliseconds / TimeInSeconds / 10);
+            lastTime = currentTime;
 
-            if ((currentTime - start).TotalMilliseconds > TimeInSeconds * 1000)
+            for (int i = intervalStart; i < intervalEnd; i++)
             {
-                start = DateTimeOffset.UtcNow;
-                data.Clear();
-                intervals.Clear();
+                if (i > 99)
+                {
+                    start = DateTimeOffset.UtcNow;
+                    lastTime = start;
+                    break;
+                }
+                for (int j = 0; j < reading.Length; j++)
+                {
+                    data[j, i] = reading[j];
+                }
+                //Memory2D<byte> readingAs2dMemory = reading.AsMemory2D(UpperFrequency - LowerFrequency, 1);
+                //Memory2D<byte> viewInData = buffer.Slice(0, i, UpperFrequency - LowerFrequency, 1);
+                //readingAs2dMemory.CopyTo(viewInData);
             }
-            lastTime = currentTime;
 
             StateHasChanged();
             await Task.Delay(10);