Updated sample to have cone visualizers.

Author: KristofferStrube

samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioPannerEditor/PannerNodeShapeEditor.razor

@@ -4,6 +4,7 @@
 @inherits ShapeEditor<PannerNodeShape>
 
 <g transform="translate(@SVGElement.SVG.Translate.x.AsString() @SVGElement.SVG.Translate.y.AsString()) scale(@SVGElement.SVG.Scale.AsString())">
+
     <rect @ref=ElementReference
           @onfocusin="FocusElement"
           @onfocusout="UnfocusElement"
@@ -17,6 +18,16 @@
           fill="@SVGElement.Fill"
           transform="rotate(@(SVGElement.Rotation.AsString()) @((SVGElement.X + SVGElement.Width / 2).AsString()) @((SVGElement.Y + SVGElement.Height / 2).AsString()))">
     </rect>
+    <polygon points=@Cone(20)
+             fill="red"
+             opacity="0.2"
+             transform="rotate(@(SVGElement.Rotation.AsString()) @((SVGElement.X + SVGElement.Width / 2).AsString()) @((SVGElement.Y + SVGElement.Height / 2).AsString()))">
+    </polygon>
+    <polygon points=@Cone(10)
+             fill="red"
+             opacity="0.2"
+             transform="rotate(@(SVGElement.Rotation.AsString()) @((SVGElement.X + SVGElement.Width / 2).AsString()) @((SVGElement.Y + SVGElement.Height / 2).AsString()))">
+    </polygon>
 </g>
 @if (SVGElement.Selected && SVGElement.SVG.EditMode is not EditMode.Add)
 {
@@ -29,4 +40,16 @@
             x: SVGElement.X + SVGElement.Width / 2 + Math.Sin(-SVGElement.Rotation / 180 * Math.PI) * SVGElement.Height,
             y: SVGElement.Y + SVGElement.Height / 2 + Math.Cos(-SVGElement.Rotation / 180 * Math.PI) * SVGElement.Height
         );
+
+    public string Cone(double angle)
+    {
+        List<(double x, double y)> points =
+        [
+            (SVGElement.X + SVGElement.Width / 2, SVGElement.Y + SVGElement.Height),
+    (SVGElement.X + SVGElement.Width / 2 + 10 * Math.Sin(angle / 180 * Math.PI), SVGElement.Y + SVGElement.Height + 10 * Math.Cos(angle / 180 * Math.PI)),
+    (SVGElement.X + SVGElement.Width / 2 + 10 * Math.Sin(-angle / 180 * Math.PI), SVGElement.Y + SVGElement.Height + 10 * Math.Cos(-angle / 180 * Math.PI)),
+    ];
+
+        return string.Join(" ", points.Select(point => $"{point.x.AsString()},{point.y.AsString()}"));
+    }
 }

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

@@ -8,9 +8,11 @@
 <PageTitle>WebAudio - Panning</PageTitle>
 <h2>Panning</h2>
 
-<p>On this page we present a view of two speakers directed towards the listener.
+<p>
+    On this page we present a view of two speakers directed towards the listener.
     The speakers can then be moved using a <code>PannerNode</code> in 3D space and be directed towards another orientation.
-    To simplify this demo we have limited ourselves to only edit the position in 2 dimensions</p>
+    To simplify this demo we have limited ourselves to only edit the position in 2 dimensions
+</p>
 
 @if (oscillatorDark is null)
 {
@@ -23,19 +25,19 @@ else
 <br />
 <GainSlider GainNode="gainNode" />
 
-<div style="height: 40vh;">
+<div style="height: 30vh;">
     <SVGEditor @ref=sVGEditor
-    Input=@input
-    InputUpdated="(string s) => { input = s; StateHasChanged(); }"
-    SupportedElements="supportedElements"
-    InputRendered="EditorLoaded" />
+               Input=@input
+               InputUpdated="(string s) => { input = s; StateHasChanged(); }"
+               SupportedElements="supportedElements"
+               InputRendered="EditorLoaded" />
 </div>
 
 <h3>Left speaker</h3>
-<Plot Data="leftTimeDomainMeasurements" />
+<Plot Height=100 Data="leftTimeDomainMeasurements" />
 
 <h3>Right speaker</h3>
-<Plot Data="rightTimeDomainMeasurements" />
+<Plot Height=100 Data="rightTimeDomainMeasurements" />
 
 @code {
     AudioContext context = default!;
@@ -68,12 +70,15 @@ else
             {
                 ConeInnerAngle = 20,
                 ConeOuterAngle = 40,
+                MaxDistance = 10
             });
         pannerDark = await PannerNode.CreateAsync(JSRuntime, context, new()
             {
                 ConeInnerAngle = 20,
                 ConeOuterAngle = 40,
+                MaxDistance = 10
             });
+
         gainNode = await GainNode.CreateAsync(JSRuntime, context, new() { Gain = 0.1f });
         AudioDestinationNode destination = await context.GetDestinationAsync();
 
@@ -91,19 +96,20 @@ else
         await gainNode.ConnectAsync(destination);
 
         int bufferLength = (int)await leftAnalyzerNode.GetFrequencyBinCountAsync();
-        await using var timeDomainDataArray = await Uint8Array.CreateAsync(JSRuntime, bufferLength);
+        await using var leftTimeDomainDataArray = await Uint8Array.CreateAsync(JSRuntime, bufferLength);
+        await using var rightTimeDomainDataArray = await Uint8Array.CreateAsync(JSRuntime, bufferLength);
 
-        while(true)
+        while (true)
         {
             await Task.Delay(500);
 
-            await leftAnalyzerNode.GetByteTimeDomainDataAsync(timeDomainDataArray);
-            leftTimeDomainMeasurements = await timeDomainDataArray.GetAsArrayAsync();
+            await leftAnalyzerNode.GetByteTimeDomainDataAsync(leftTimeDomainDataArray);
+            leftTimeDomainMeasurements = await leftTimeDomainDataArray.GetAsArrayAsync();
 
-            await rightAnalyzerNode.GetByteTimeDomainDataAsync(timeDomainDataArray);
-            rightTimeDomainMeasurements = await timeDomainDataArray.GetAsArrayAsync();
+            await rightAnalyzerNode.GetByteTimeDomainDataAsync(rightTimeDomainDataArray);
+            rightTimeDomainMeasurements = await rightTimeDomainDataArray.GetAsArrayAsync();
 
-            await Task.Delay(50);
+            await Task.Delay(10);
             StateHasChanged();
         }
     }

src/KristofferStrube.Blazor.WebAudio/Options/PannerOptions.cs

@@ -1,5 +1,4 @@
-using System.ComponentModel;
-using System.Text.Json.Serialization;
+using System.Text.Json.Serialization;
 
 namespace KristofferStrube.Blazor.WebAudio;