> For the complete documentation index, see [llms.txt](https://docs-siticoneframework.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/media-and-graphics/siticone-audio/sound-wave-animation-and-style.md).

# Sound Wave Animation and Style

A feature that animates sound waves around the speaker icon to visually represent volume changes and enhance user interaction.

## Overview

The Sound Wave Animation & Style feature renders animated sound wave arcs around the speaker icon when the control is unmuted. Developers can adjust the number of waves, control the spacing between them, and specify individual colors to match the desired design aesthetic. This feature adds a dynamic visual element that reflects audio activity and provides engaging feedback during user interactions.

***

### Key Points

| Property / Attribute  | Description                                                                                                  | Usage Example                                                                                 |
| --------------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
| WaveCount (int)       | Specifies the number of sound wave arcs to render (valid range: 0–8). A value of 0 disables the waves.       | `audioControl.WaveCount = 4;`                                                                 |
| WaveSpacing (float)   | Determines the spacing between waves as a percentage of the maximum radius (recommended range: 0.05 to 0.3). | `audioControl.WaveSpacing = 0.15f;`                                                           |
| WaveColors (Color\[]) | Defines the colors for individual sound waves. If not set, the control defaults to using IconColor.          | `audioControl.WaveColors = new Color[] { Color.Blue, Color.Green, Color.Orange, Color.Red };` |

***

### Best Practices

| Best Practice                           | Explanation                                                                                                                | Code Example                                                                                                   |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| Set WaveCount Appropriately             | Use a moderate wave count (e.g., 4–6) to provide visual feedback without cluttering the control.                           | `audioControl.WaveCount = 4;`                                                                                  |
| Adjust WaveSpacing to Suit Control Size | Ensure that the spacing between waves complements the control's size, avoiding overlaps or excessive gaps.                 | `audioControl.WaveSpacing = 0.15f;`                                                                            |
| Define Custom WaveColors                | Explicitly set WaveColors to create an engaging visual effect that matches your application's color scheme.                | `audioControl.WaveColors = new Color[] { Color.CadetBlue, Color.Teal, Color.SeaGreen, Color.MediumSeaGreen };` |
| Synchronize with Volume Changes         | Optionally tie wave animation intensity to volume changes by listening to the VolumeChanged event for dynamic adjustments. | Attach an event handler to update wave properties based on volume level.                                       |

***

### Common Pitfalls

| Pitfall                        | Description                                                                                             | Avoidance Strategy                                      |
| ------------------------------ | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| Excessive WaveCount            | Setting WaveCount too high can clutter the UI and reduce clarity.                                       | Limit WaveCount to a practical range (e.g., 4–6).       |
| Incorrect WaveSpacing          | Improper spacing may result in overlapping or overly dispersed wave arcs.                               | Test different values within the 0.05–0.3 range.        |
| Overreliance on Default Colors | Relying solely on the default IconColor for waves might not align with the application's design scheme. | Explicitly set WaveColors to match your design palette. |

***

### Usage Scenarios

| Scenario                   | Description                                                                                             | Implementation Example                                      |
| -------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| Media Player Interfaces    | Use animated waves to represent active audio playback, visually indicating sound intensity.             | Set WaveCount and WaveColors to reflect audio dynamics.     |
| Communication Applications | Enhance call interfaces with animated waves that provide real-time feedback during audio conversations. | Customize wave properties to match the application's theme. |
| Interactive Dashboards     | Use sound wave animations to indicate live audio input or volume levels in monitoring systems.          | Integrate with volume events to trigger wave animations.    |

***

### Real Life Usage Scenarios

#### Music Streaming App

Animated sound waves can visually represent the playing track's dynamics and volume.

```csharp
// In Form_Load
var audioControl = new SiticoneAudio
{
    WaveCount = 4,
    WaveSpacing = 0.15f,
    WaveColors = new Color[] { 
        Color.DarkBlue, 
        Color.MediumBlue, 
        Color.RoyalBlue, 
        Color.SkyBlue 
    }
};
this.Controls.Add(audioControl);
```

#### Video Conferencing Tool

During calls, dynamic wave animations can indicate active speakers and volume adjustments.

```csharp
// During call initialization
audioControl.WaveCount = 3;
audioControl.WaveSpacing = 0.1f;
audioControl.WaveColors = new Color[] { 
    Color.Green, 
    Color.Lime, 
    Color.ForestGreen 
};
this.Controls.Add(audioControl);
```

***

### Troubleshooting Tips

| Issue                          | Possible Cause                                                   | Resolution                                                                 |
| ------------------------------ | ---------------------------------------------------------------- | -------------------------------------------------------------------------- |
| Waves Not Displaying           | WaveCount may be set to 0 or the control might be muted.         | Ensure WaveCount is greater than 0 and verify that the control is unmuted. |
| Overlapping or Cluttered Waves | Incorrect WaveSpacing value causing waves to overlap.            | Adjust WaveSpacing within the recommended range (0.05–0.3).                |
| Incorrect Wave Colors          | WaveColors not explicitly defined may revert to using IconColor. | Explicitly set WaveColors to the desired color array.                      |

***

### Summary

The Sound Wave Animation & Style feature provides dynamic visual feedback by animating sound waves around the speaker icon. By configuring WaveCount, WaveSpacing, and WaveColors, developers can create an engaging UI element that reflects real-time audio activity and enhances user interaction. This feature is ideal for applications requiring clear audio indicators and interactive visual effects.