Updated demos some more to not have gain sliders jump.

Author: KristofferStrube

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

@@ -78,7 +78,7 @@ Status:
         </table>
     </div>
 }
-<GainSlider GainNode=gainNode />
+<GainSlider GainNode=gainNode InteractiveBeforeGainNodeIsPresent="true" />
 <TimeDomainPlot Analyser=analyser />
 
 @code {

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

@@ -13,12 +13,10 @@
     @foreach (var i in whiteKeyIndices)
     {
         var k = i;
-        <rect @onmousedown="e => Start(keys[k].Octave, keys[k].Pitch, e)"
-              @onmouseenter="e => Start(keys[k].Octave, keys[k].Pitch, e)"
-              @onmouseup="End"
-              @onmouseout="End"
-              @ontouchstart="e => Start(keys[k].Octave, keys[k].Pitch, e)"
-              @ontouchend="End"
+        <rect @onpointerdown="e => Start(keys[k].Octave, keys[k].Pitch, e)"
+              @onpointerenter="e => Start(keys[k].Octave, keys[k].Pitch, e)"
+              @onpointerup="End"
+              @onpointerout="End"
               x="@(keys.GetRange(0, i).Count(k => k.Color == "white") * 100)"
               y="0"
               width="100"
@@ -42,12 +40,10 @@
     @foreach (var i in blackKeyIndices)
     {
         var k = i;
-        <rect @onmousedown="e => Start(keys[k].Octave, keys[k].Pitch, e)"
-              @onmouseenter="e => Start(keys[k].Octave, keys[k].Pitch, e)"
-              @onmouseup="End"
-              @onmouseout="End"
-              @ontouchstart="e => Start(keys[k].Octave, keys[k].Pitch, e)"
-              @ontouchend="End"
+        <rect @onpointerdown="e => Start(keys[k].Octave, keys[k].Pitch, e)"
+              @onpointerenter="e => Start(keys[k].Octave, keys[k].Pitch, e)"
+              @onpointerup="End"
+              @onpointerout="End"
               x="@(keys.GetRange(0, i).Count(k => k.Color == "white") * 100 - 30 - (keys[k].Pitch is 2 or 7 ? 10 : 0) + (keys[k].Pitch is 4 or 11 ? 10 : 0))"
               y="0"
               width="60"
@@ -57,7 +53,7 @@
               stroke-width="1"></rect>
     }
 </svg>
-<GainSlider GainNode="mainNode" />
+<GainSlider GainNode="mainNode" InteractiveBeforeGainNodeIsPresent="true" />
 
 <div style="height:30vh;width:100%;">
     <ADSREditor @ref=ADSREditor />

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

@@ -8,21 +8,31 @@
        max="1"
        step="0.01"
        style="width:min(200px, 100%);"/>
-<span class="badge bg-primary">@Math.Round(Gain*100, 0)%</span>
+<span class="badge bg-primary">@Math.Round(Gain * 100, 0)%</span>
 
 @code {
     private string inputId = $"gain_{Guid.NewGuid()}"[..9];
 
     [Parameter, EditorRequired]
     public GainNode? GainNode { get; set; }
 
-    public float Gain { get; private set; } = 0.05f;
+    [Parameter]
+    public bool InteractiveBeforeGainNodeIsPresent { get; set; } = false;
+
+    public float Gain { get; private set; } = 0.1f;
 
     protected override async Task OnParametersSetAsync()
     {
         if (GainNode is null) return;
         await using AudioParam audioParam = await GainNode.GetGainAsync();
-        Gain = await audioParam.GetValueAsync();
+        if (InteractiveBeforeGainNodeIsPresent)
+        {
+            await audioParam.SetValueAsync(Gain);
+        }
+        else
+        {
+            Gain = await audioParam.GetValueAsync();
+        }
     }
 
     public async Task GainUpdatedAsync()