Audio audio-volume and audio-pitch css properties (#109)

ProGM · KurtGokhan · web-flow · commit 3bf133a24cca · 2024-06-01T20:05:44.000+03:00
* wip: added audio-volume and audio-pitch css properties

* fix: feedback after testing in the editor

* fix: more testing in the editor

* fix(audio): compound form

* dont store volume and pitch in state

---------

Co-authored-by: Gokhan Kurt &lt;krtgkn@gmail.com&gt;
diff --git a/Editor/Renderer/EditorContext.cs b/Editor/Renderer/EditorContext.cs
@@ -99,7 +99,7 @@ protected override IReactComponent CreateComponentInternal(string tag, string te
             return res;
         }
 
-        public override void PlayAudio(AudioClip clip)
+        public override void PlayAudio(AudioClip clip, float volume, float pitch)
         {
             EditorSFX.PlayClip(clip);
         }
diff --git a/Runtime/Core/ReactContext.cs b/Runtime/Core/ReactContext.cs
@@ -168,7 +168,7 @@ public virtual ScriptSource CreateStaticScript(string path)
             return src;
         }
 
-        public abstract void PlayAudio(AudioClip clip);
+        public abstract void PlayAudio(AudioClip clip, float volume, float pitch);
 
         public void Start(Action afterStart = null)
         {
diff --git a/Runtime/Frameworks/Noop/NoopContext.cs b/Runtime/Frameworks/Noop/NoopContext.cs
@@ -67,6 +67,6 @@ protected override IReactComponent CreatePseudoComponentInternal(string tag)
             return tc;
         }
 
-        public override void PlayAudio(AudioClip clip) { }
+        public override void PlayAudio(AudioClip clip, float volume, float pitch) { }
     }
 }
diff --git a/Runtime/Frameworks/UGUI/General/UGUIContext.cs b/Runtime/Frameworks/UGUI/General/UGUIContext.cs
@@ -155,10 +155,11 @@ protected override IReactComponent CreatePseudoComponentInternal(string tag)
             return tc;
         }
 
-        public override void PlayAudio(AudioClip clip)
+        public override void PlayAudio(AudioClip clip, float volume, float pitch)
         {
             var source = (Host as HostComponent).GetOrAddComponent<AudioSource>();
-            source.PlayOneShot(clip);
+            source.pitch = pitch;
+            source.PlayOneShot(clip, volume);
         }
 
         public GameObject CreateNativeObject(string name, params Type[] components)
diff --git a/Runtime/Frameworks/UIToolkit/General/ReactRendererUIToolkit.cs b/Runtime/Frameworks/UIToolkit/General/ReactRendererUIToolkit.cs
@@ -40,10 +40,11 @@ protected override ReactContext CreateContext(ScriptSource script)
             return ctx;
         }
 
-        public void PlayAudio(AudioClip clip)
+        public void PlayAudio(AudioClip clip, float volume, float pitch)
         {
             var source = GetComponent<AudioSource>();
-            source.PlayOneShot(clip);
+            source.pitch = pitch;
+            source.PlayOneShot(clip, volume);
         }
 
         protected override IMediaProvider CreateMediaProvider()
diff --git a/Runtime/Frameworks/UIToolkit/General/UIToolkitContext.cs b/Runtime/Frameworks/UIToolkit/General/UIToolkitContext.cs
@@ -12,7 +12,7 @@ public class UIToolkitContext : ReactContext
         public new class Options : ReactContext.Options
         {
             public VisualElement HostElement;
-            public Action<AudioClip> OnAudioPlayback;
+            public Action<AudioClip, float, float> OnAudioPlayback;
             public override bool CalculatesLayout => false;
         }
 
@@ -69,7 +69,7 @@ public static Dictionary<string, Func<string, string, UIToolkitContext, IReactCo
                 { "hover", typeof(HoverStateHandler) },
             };
 
-        private Action<AudioClip> OnAudioPlayback = null;
+        private Action<AudioClip, float, float> OnAudioPlayback = null;
 
         public VisualElement HostElement { get; }
 
@@ -115,9 +115,9 @@ protected override IReactComponent CreatePseudoComponentInternal(string tag)
             return tc;
         }
 
-        public override void PlayAudio(AudioClip clip)
+        public override void PlayAudio(AudioClip clip, float volume, float pitch)
         {
-            OnAudioPlayback?.Invoke(clip);
+            OnAudioPlayback?.Invoke(clip, volume, pitch);
         }
     }
 }
diff --git a/Runtime/Styling/NodeStyle.cs b/Runtime/Styling/NodeStyle.cs
@@ -122,6 +122,8 @@ public class NodeStyle
         public ICssValueList<AudioReference> audioClip => GetStyleValue(StyleProperties.audioClip);
         public ICssValueList<int> audioIterationCount => GetStyleValue(StyleProperties.audioIterationCount);
         public ICssValueList<float> audioDelay => GetStyleValue(StyleProperties.audioDelay);
+        public ICssValueList<float> audioVolume => GetStyleValue(StyleProperties.audioVolume);
+        public ICssValueList<float> audioPitch => GetStyleValue(StyleProperties.audioPitch);
 
         #endregion
 
diff --git a/Runtime/Styling/Properties/StyleProperties.cs b/Runtime/Styling/Properties/StyleProperties.cs
@@ -113,6 +113,8 @@ public static class StyleProperties
         public static readonly ValueListStyleProperty<AudioReference> audioClip = new ValueListStyleProperty<AudioReference>("audioClip");
         public static readonly ValueListStyleProperty<int> audioIterationCount = new ValueListStyleProperty<int>("audioIterationCount", 1);
         public static readonly ValueListStyleProperty<float> audioDelay = new ValueListStyleProperty<float>("audioDelay");
+        public static readonly ValueListStyleProperty<float> audioVolume = new ValueListStyleProperty<float>("audioVolume", 1f, true, baseConverter: AllConverters.PercentageConverter);
+        public static readonly ValueListStyleProperty<float> audioPitch = new ValueListStyleProperty<float>("audioPitch", 1f);
 
         public static readonly Dictionary<string, IStyleProperty> PropertyMap = new Dictionary<string, IStyleProperty>(StringComparer.InvariantCultureIgnoreCase)
         {
@@ -233,10 +235,14 @@ public static class StyleProperties
             { "audioClip", audioClip },
             { "audioDelay", audioDelay },
             { "audioIterationCount", audioIterationCount },
+            { "audioVolume", audioVolume },
+            { "audioPitch", audioPitch },
 
             { "audio-clip", audioClip },
             { "audio-delay", audioDelay },
             { "audio-iteration-count", audioIterationCount },
+            { "audio-volume", audioVolume },
+            { "audio-pitch", audioPitch },
 
             { "border-image-source", borderImageSource },
             { "border-image-slice", borderImageSlice },
diff --git a/Runtime/Styling/Shorthands/AudioShorthand.cs b/Runtime/Styling/Shorthands/AudioShorthand.cs
@@ -22,6 +22,7 @@ protected override List<IStyleProperty> ModifyInternal(IDictionary<IStylePropert
             var clips = new IComputedValue[count];
             var delays = new IComputedValue[count];
             var iterations = new IComputedValue[count];
+            var volumes = new IComputedValue[count];
 
             for (int ci = 0; ci < count; ci++)
             {
@@ -33,6 +34,7 @@ protected override List<IStyleProperty> ModifyInternal(IDictionary<IStylePropert
                 var countSet = false;
                 var delaySet = false;
                 var clipSet = false;
+                var volumeSet = false;
 
                 for (int i = 0; i < splits.Count; i++)
                 {
@@ -49,6 +51,17 @@ protected override List<IStyleProperty> ModifyInternal(IDictionary<IStylePropert
                         continue;
                     }
 
+                    if (AllConverters.PercentageConverter.TryParse(split, out var fvolume))
+                    {
+                        if (!volumeSet)
+                        {
+                            volumes[ci] = fvolume;
+                            volumeSet = true;
+                        }
+                        else return null;
+                        continue;
+                    }
+
                     if (AllConverters.DurationConverter.TryParse(split, out var f))
                     {
                         if (!delaySet)
@@ -75,11 +88,13 @@ protected override List<IStyleProperty> ModifyInternal(IDictionary<IStylePropert
                 if (!clipSet) return null;
                 if (!delaySet) delays[ci] = new ComputedConstant(0f);
                 if (!countSet) iterations[ci] = new ComputedConstant(1);
+                if (!volumeSet) volumes[ci] = new ComputedConstant(1f);
             }
 
             collection[StyleProperties.audioClip] = StyleProperties.audioClip.Converter.FromList(clips);
             collection[StyleProperties.audioDelay] = StyleProperties.audioDelay.Converter.FromList(delays);
             collection[StyleProperties.audioIterationCount] = StyleProperties.audioIterationCount.Converter.FromList(iterations);
+            collection[StyleProperties.audioVolume] = StyleProperties.audioVolume.Converter.FromList(volumes);
 
             return ModifiedProperties;
         }
diff --git a/Runtime/Styling/StyleState.cs b/Runtime/Styling/StyleState.cs
@@ -652,8 +652,10 @@ private bool UpdateAudio()
             var clip = Current.audioClip;
             var delay = Current.audioDelay;
             var iterationCount = Current.audioIterationCount;
+            var volume = Current.audioVolume;
+            var pitch = Current.audioPitch;
 
-            var maxLength = Mathf.Max(delay.Count, iterationCount.Count, clip.Count);
+            var maxLength = Mathf.Max(delay.Count, iterationCount.Count, clip.Count, volume.Count, pitch.Count);
 
             if (audioStates == null) audioStates = new AudioState[maxLength];
 
@@ -664,12 +666,14 @@ private bool UpdateAudio()
 
                 var state = audioStates[i] = audioStates[i] ?? new AudioState();
 
+                var curVolume = volume.Get(i, 1);
+                var curPitch = pitch.Get(i, 1);
 
                 Action tryPlayClip = () => {
                     if (state.Loaded && state.ShouldStart)
                     {
                         state.ShouldStart = false;
-                        Context.PlayAudio(state.Clip);
+                        Context.PlayAudio(state.Clip, curVolume, curPitch);
                     }
                 };
 
diff --git a/Tests/Runtime/Animations/AudioTests.cs b/Tests/Runtime/Animations/AudioTests.cs
@@ -14,7 +14,7 @@ public IEnumerator ParsingWorksCorrectly()
         {
             var view = Q("#test");
 
-            view.Style.Set("audio", $"url({TestHelpers.ClickUrl}) 3s 5, url(https://example.com/file.ogg) infinite 2s, url(res:something)");
+            view.Style.Set("audio", $"url({TestHelpers.ClickUrl}) 3s 5, url(https://example.com/file.ogg) infinite 2s, url(res:something), url(res:something) 50%");
             yield return null;
 
             var st = view.ComputedStyle;
@@ -35,13 +35,21 @@ public IEnumerator ParsingWorksCorrectly()
             Assert.AreEqual(1, st.audioIterationCount.Get(2));
 
 
+            Assert.AreEqual(AssetReferenceType.Resource, st.audioClip.Get(3).Type);
+            Assert.AreEqual("something", st.audioClip.Get(3).Value);
+            Assert.AreEqual(0, st.audioDelay.Get(3));
+            Assert.AreEqual(1, st.audioIterationCount.Get(3));
+            Assert.AreEqual(0.5f, st.audioVolume.Get(3));
+
+
             view.Style.Set("audio", "none");
             yield return null;
 
             st = view.ComputedStyle;
             Assert.AreEqual(null, st.audioClip.Get(0));
             Assert.AreEqual(0, st.audioDelay.Get(0));
             Assert.AreEqual(1, st.audioIterationCount.Get(0, 1));
+            Assert.AreEqual(1, st.audioVolume.Get(0, 1));
 
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ protected override IReactComponent CreateComponentInternal(string tag, string te`
`99`	`99`	`return res;`
`100`	`100`	`}`
`101`	`101`
`102`		`- public override void PlayAudio(AudioClip clip)`
	`102`	`+ public override void PlayAudio(AudioClip clip, float volume, float pitch)`
`103`	`103`	`{`
`104`	`104`	`EditorSFX.PlayClip(clip);`
`105`	`105`	`}`
Original file line number	Diff line number	Diff line change
`@@ -168,7 +168,7 @@ public virtual ScriptSource CreateStaticScript(string path)`
`168`	`168`	`return src;`
`169`	`169`	`}`
`170`	`170`
`171`		`- public abstract void PlayAudio(AudioClip clip);`
	`171`	`+ public abstract void PlayAudio(AudioClip clip, float volume, float pitch);`
`172`	`172`
`173`	`173`	`public void Start(Action afterStart = null)`
`174`	`174`	`{`
Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,6 @@ protected override IReactComponent CreatePseudoComponentInternal(string tag)`
`67`	`67`	`return tc;`
`68`	`68`	`}`
`69`	`69`
`70`		`- public override void PlayAudio(AudioClip clip) { }`
	`70`	`+ public override void PlayAudio(AudioClip clip, float volume, float pitch) { }`
`71`	`71`	`}`
`72`	`72`	`}`
Original file line number	Diff line number	Diff line change
`@@ -155,10 +155,11 @@ protected override IReactComponent CreatePseudoComponentInternal(string tag)`
`155`	`155`	`return tc;`
`156`	`156`	`}`
`157`	`157`
`158`		`- public override void PlayAudio(AudioClip clip)`
	`158`	`+ public override void PlayAudio(AudioClip clip, float volume, float pitch)`
`159`	`159`	`{`
`160`	`160`	`var source = (Host as HostComponent).GetOrAddComponent<AudioSource>();`
`161`		`- source.PlayOneShot(clip);`
	`161`	`+ source.pitch = pitch;`
	`162`	`+ source.PlayOneShot(clip, volume);`
`162`	`163`	`}`
`163`	`164`
`164`	`165`	`public GameObject CreateNativeObject(string name, params Type[] components)`
Original file line number	Diff line number	Diff line change
`@@ -40,10 +40,11 @@ protected override ReactContext CreateContext(ScriptSource script)`
`40`	`40`	`return ctx;`
`41`	`41`	`}`
`42`	`42`
`43`		`- public void PlayAudio(AudioClip clip)`
	`43`	`+ public void PlayAudio(AudioClip clip, float volume, float pitch)`
`44`	`44`	`{`
`45`	`45`	`var source = GetComponent<AudioSource>();`
`46`		`- source.PlayOneShot(clip);`
	`46`	`+ source.pitch = pitch;`
	`47`	`+ source.PlayOneShot(clip, volume);`
`47`	`48`	`}`
`48`	`49`
`49`	`50`	`protected override IMediaProvider CreateMediaProvider()`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ public class UIToolkitContext : ReactContext`
`12`	`12`	`public new class Options : ReactContext.Options`
`13`	`13`	`{`
`14`	`14`	`public VisualElement HostElement;`
`15`		`- public Action<AudioClip> OnAudioPlayback;`
	`15`	`+ public Action<AudioClip, float, float> OnAudioPlayback;`
`16`	`16`	`public override bool CalculatesLayout => false;`
`17`	`17`	`}`
`18`	`18`
`@@ -69,7 +69,7 @@ public static Dictionary<string, Func<string, string, UIToolkitContext, IReactCo`
`69`	`69`	`{ "hover", typeof(HoverStateHandler) },`
`70`	`70`	`};`
`71`	`71`
`72`		`- private Action<AudioClip> OnAudioPlayback = null;`
	`72`	`+ private Action<AudioClip, float, float> OnAudioPlayback = null;`
`73`	`73`
`74`	`74`	`public VisualElement HostElement { get; }`
`75`	`75`
`@@ -115,9 +115,9 @@ protected override IReactComponent CreatePseudoComponentInternal(string tag)`
`115`	`115`	`return tc;`
`116`	`116`	`}`
`117`	`117`
`118`		`- public override void PlayAudio(AudioClip clip)`
	`118`	`+ public override void PlayAudio(AudioClip clip, float volume, float pitch)`
`119`	`119`	`{`
`120`		`- OnAudioPlayback?.Invoke(clip);`
	`120`	`+ OnAudioPlayback?.Invoke(clip, volume, pitch);`
`121`	`121`	`}`
`122`	`122`	`}`
`123`	`123`	`}`