Added option to adjust type of oscillator in the Playground demo.

KristofferStrube · Jan 31, 2024 · 279ad52 · 279ad52
1 parent d172634
commit 279ad52
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/...istofferStrube.Blazor.WebAudio.WasmExample/AudioEditor/NodeEditors/OscillatorEditor.razor b/...istofferStrube.Blazor.WebAudio.WasmExample/AudioEditor/NodeEditors/OscillatorEditor.razor
@@ -23,9 +23,16 @@
               fill="@SVGElement.Fill"
               style="filter:brightness(@(SVGElement.Selected ? "0.9" : "1"))">
         </rect>
-        <foreignObject @onpointermove:stopPropagation=!ChildContentIsNoninteractive x="@((SVGElement.X+10).AsString())" y="@((SVGElement.Y+10).AsString())" height="80" width="200" style="border:solid @(SVGElement.StrokeWidth)px @(SVGElement.Stroke);padding:2;pointer-events:@(ChildContentIsNoninteractive ? "none" : "inherit");touch-action:@(ChildContentIsNoninteractive ? "none" : "inherit");">
+        <foreignObject @onpointermove:stopPropagation=!ChildContentIsNoninteractive 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:@(ChildContentIsNoninteractive ? "none" : "inherit");touch-action:@(ChildContentIsNoninteractive ? "none" : "inherit");">
             Oscillator
             <br />
+            <select @bind=SVGElement.Type @bind:after="SetType">
+                <option value="@OscillatorType.Sine" title="A sine wave.">Sine</option>
+                <option value="@OscillatorType.Square" title="A square wave of duty period 0.5.">Square</option>
+                <option value="@OscillatorType.Sawtooth" title="A sawtooth wave.">Sawtooth</option>
+                <option value="@OscillatorType.Triangle" title="A triangle wave.">Triangle</option>
+            </select>
+            <br />
             @if (FrequencyAudioParam is not null)
             {
                 <AudioParamSlider AudioParam="FrequencyAudioParam" Label="Frequency" Min="1" Max="2000" StepSize="1" UpdateCallback="f => SVGElement.Frequency = f" />
@@ -65,4 +72,12 @@
             StateHasChanged();
         }
     }
+
+    private async Task SetType()
+    {
+        if (SVGElement.Type is {} type)
+        {
+            await ((OscillatorNode)await SVGElement.AudioNode(AudioContext)).SetTypeAsync(type);
+        }
+    }
 }
diff --git a/samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioEditor/Nodes/Oscillator.cs b/samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioEditor/Nodes/Oscillator.cs
@@ -1,6 +1,7 @@
 using AngleSharp.Dom;
 using KristofferStrube.Blazor.WebAudio.WasmExample.AudioEditor.NodeEditors;
 using System.Globalization;
+using static System.Text.Json.JsonSerializer;
 
 namespace KristofferStrube.Blazor.WebAudio.WasmExample.AudioEditor;
 
@@ -25,6 +26,29 @@ public Oscillator(IElement element, SVGEditor.SVGEditor svg) : base(element, svg
         return audioNode;
     };
 
+    public new float Height
+    {
+        get => 130;
+        set => base.Height = 130;
+    }
+
+    public OscillatorType? Type
+    {
+        get => Element.GetAttribute("data-type") is { } value ? Deserialize<OscillatorType>($"\"{value}\"") : null;
+        set
+        {
+            if (value is null)
+            {
+                _ = Element.RemoveAttribute("data-type");
+            }
+            else
+            {
+                Element.SetAttribute("data-type", Serialize(value.Value)[1..^1]);
+            }
+            Changed?.Invoke(this);
+        }
+    }
+
     public float? Frequency
     {
         get => Element.GetAttribute("data-frequency") is { } value ? float.Parse(value, CultureInfo.InvariantCulture) : null;
@@ -54,7 +78,7 @@ public float? Frequency
             Changed = SVG.UpdateInput,
             Stroke = "#28B6F6",
             StrokeWidth = "2",
-            Height = 100,
+            Height = 150,
             Width = 250,
         };