Improvements to marking for phone.

Author: KristofferStrube

samples/KristofferStrube.Blazor.WebAudio.WasmExample/Pages/RecordMediaStream.razor

@@ -50,11 +50,10 @@ else if (mediaStream is null)
 }
 else
 {
-    <AmplitudePlot Analyser="analyser" Color="@(recording ? "#F00" : "#000")" />
     if (!recording)
     {
         <button class="btn btn-primary" @onclick="Record">Record</button>
-
+        <br />
         @if (audioOptions.Count > 0)
         {
             <label for="audioSource">Audio Source</label>
@@ -70,6 +69,10 @@ else
     {
         <button class="btn btn-danger" @onclick="StopRecording">Stop Record</button>
     }
+    if (analyser is not null)
+    {
+        <AmplitudePlot Analyser="analyser" Color="@(recording ? "#F00" : "#000")" />
+    }
 }
 
 @code {
@@ -99,6 +102,8 @@ else
     {
         await StopAudioTrack();
 
+        await InvokeAsync(StateHasChanged);
+
         try
         {
             if (context is null)
@@ -271,6 +276,7 @@ else
         {
             await analyser.DisposeAsync();
         }
+        analyser = null;
     }
 
     public async ValueTask DisposeAsync()

samples/KristofferStrube.Blazor.WebAudio.WasmExample/Shared/AmplitudePlot.razor.cs

@@ -37,42 +37,49 @@ protected override async Task OnAfterRenderAsync(bool _)
 
         running = true;
 
-        int bufferLength = (int)await Analyser.GetFftSizeAsync();
-        await using Uint8Array timeDomainData = await Uint8Array.CreateAsync(JSRuntime, bufferLength);
-
-        while (running)
+        try
         {
-            for (int i = 0; i < Width; i++)
+            int bufferLength = (int)await Analyser.GetFftSizeAsync();
+            await using Uint8Array timeDomainData = await Uint8Array.CreateAsync(JSRuntime, bufferLength);
+
+            while (running)
             {
-                if (!running)
+                for (int i = 0; i < Width; i++)
                 {
-                    break;
-                }
+                    if (!running)
+                    {
+                        break;
+                    }
 
-                await Analyser.GetByteTimeDomainDataAsync(timeDomainData);
+                    await Analyser.GetByteTimeDomainDataAsync(timeDomainData);
 
-                byte[] reading = await timeDomainData.GetAsArrayAsync();
+                    byte[] reading = await timeDomainData.GetAsArrayAsync();
 
-                double amplitude = reading.Average(r => Math.Abs(r - 128)) / 128.0;
+                    double amplitude = reading.Average(r => Math.Abs(r - 128)) / 128.0;
 
-                await using (Context2D context = await canvas.GetContext2DAsync())
-                {
-                    if (i == 0)
+                    await using (Context2D context = await canvas.GetContext2DAsync())
                     {
+                        if (i == 0)
+                        {
+                            await context.FillAndStrokeStyles.FillStyleAsync($"#fff");
+                            await context.FillRectAsync(0, 0, Width * 10, Height * 10);
+                        }
+
                         await context.FillAndStrokeStyles.FillStyleAsync($"#fff");
-                        await context.FillRectAsync(0, 0, Width * 10, Height * 10);
-                    }
+                        await context.FillRectAsync(i * 10, 0, 10, Height * 10);
 
-                    await context.FillAndStrokeStyles.FillStyleAsync($"#fff");
-                    await context.FillRectAsync(i * 10, 0, 10, Height * 10);
+                        await context.FillAndStrokeStyles.FillStyleAsync(Color);
+                        await context.FillRectAsync(i * 10, (Height * 10 / 2.0) - (amplitude * Height * 10), 10, amplitude * 2 * Height * 10);
+                    }
 
-                    await context.FillAndStrokeStyles.FillStyleAsync(Color);
-                    await context.FillRectAsync(i * 10, (Height * 10 / 2.0) - (amplitude * Height * 10), 10, amplitude * 2 * Height * 10);
+                    await Task.Delay(1);
                 }
-
-                await Task.Delay(1);
             }
         }
+        catch (Exception e)
+        {
+            Console.WriteLine(e.Message);
+        }
     }
 
     public void Dispose()

samples/KristofferStrube.Blazor.WebAudio.WasmExample/Shared/AudioSlicer.razor.cs

@@ -14,7 +14,7 @@ public partial class AudioSlicer : ComponentBase, IDisposable
     private ElementReference wrapper;
     private readonly List<float> amplitudes = [];
 
-    private string canvasStyle => $"height:{Height}px;width:100%;";
+    private string canvasStyle => $"height:{Height}px;width:100%;user-select:none;touch-action:none;";
 
     [Inject]
     public required IJSRuntime JSRuntime { get; set; }