Skip to content

feat: audio visualizer configuration #316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thomasyuill-livekit merged 7 commits into from
Feb 13, 2026
Merged

feat: audio visualizer configuration #316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f02e3d9
feat: audio visualizer configuration
thomasyuill-livekit Jan 27, 2026
a5cc895
fix transitions
thomasyuill-livekit Feb 10, 2026
9bb80b0
reset layout
thomasyuill-livekit Feb 11, 2026
7849339
cleanup
thomasyuill-livekit Feb 11, 2026
f2d2caf
support light and dark mode audioVisualizerColor
thomasyuill-livekit Feb 13, 2026
59faa4a
update readme
thomasyuill-livekit Feb 13, 2026
0fe373c
latest agents-ui
thomasyuill-livekit Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Also available for:
- Real-time voice interaction with LiveKit Agents
- Camera video streaming support
- Screen sharing capabilities
- Audio visualization and level monitoring
- Multiple audio visualizer styles (`bar`, `grid`, `radial`, `wave`, `aura`)
- Virtual avatar integration
- Light/dark theme switching with system preference detection
- Customizable branding, colors, and UI text via configuration
Expand Down Expand Up @@ -129,6 +129,22 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
accentDark: '#1fd5f9',
startButtonText: 'Start call',

// optional: audio visualization configuration
// audioVisualizerColor: '#002cf2',
// audioVisualizerColorDark: '#1fd5f9',
// audioVisualizerType: 'bar',
// audioVisualizerBarCount: 5,
// audioVisualizerType: 'radial',
// audioVisualizerRadialBarCount: 24,
// audioVisualizerRadialRadius: 100,
// audioVisualizerType: 'grid',
// audioVisualizerGridRowCount: 25,
// audioVisualizerGridColumnCount: 25,
// audioVisualizerType: 'wave',
// audioVisualizerWaveLineWidth: 3,
// audioVisualizerType: 'aura',
// audioVisualizerAuraColorShift: 0.3,

// agent dispatch configuration
agentName: undefined,

Expand All @@ -139,6 +155,18 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {

You can update these values in [`app-config.ts`](./app-config.ts) to customize branding, features, and UI text for your deployment.

#### Audio visualizer presets

Set `audioVisualizerType` in [`app-config.ts`](./app-config.ts) to switch visualizer styles:

- `bar` (default): vertical bars with optional `audioVisualizerBarCount`
- `grid`: dot grid with `audioVisualizerGridRowCount` and `audioVisualizerGridColumnCount`
- `radial`: circular bars with `audioVisualizerRadialBarCount` and `audioVisualizerRadialRadius`
- `wave`: oscilloscope-style wave with `audioVisualizerWaveLineWidth`
- `aura`: shader-based aura with `audioVisualizerAuraColorShift`

Use `audioVisualizerColor` to set a shared accent color across all visualizer modes.

> [!NOTE]
> The `sandboxId` is for the LiveKit Cloud Sandbox environment.
> It is not used for local development.
Expand Down
27 changes: 27 additions & 0 deletions app-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,17 @@ export interface AppConfig {
logoDark?: string;
accentDark?: string;

audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura';
audioVisualizerColor?: `#${string}`;
audioVisualizerColorDark?: `#${string}`;
audioVisualizerBarCount?: number;
audioVisualizerGridRowCount?: number;
audioVisualizerGridColumnCount?: number;
audioVisualizerRadialBarCount?: number;
audioVisualizerRadialRadius?: number;
audioVisualizerAuraColorShift?: number;
audioVisualizerWaveLineWidth?: number;
Comment on lines +17 to +26
Copy link
Copy Markdown
Contributor

@1egoman 1egoman Feb 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: It might be nice to set this up so that the typescript logic will validate that all fields which are required for a certain audioVisualizerType value are non optional via something directionally like the below:

type Common = {
  audioVisualizerColor?: `#${string}`;
  audioVisualizerColorDark?: `#${string}`;
  audioVisualizerBarCount: number;
  audioVisualizerGridRowCount?: number;
  audioVisualizerGridColumnCount?: number;
  audioVisualizerRadialBarCount?: number;
  audioVisualizerRadialRadius?: number;
  audioVisualizerAuraColorShift?: number;
  audioVisualizerWaveLineWidth?: number;
};

type AudioVisualizerTypeBar = Common & {
  audioVisualizerType: 'bar'
  audioVisualizerBarCount: number;
};

type AudioVisualizerTypeRadial = Common & {
  audioVisualizerType: 'radial';
  audioVisualizerRadialBarCount: number;
  audioVisualizerRadialRadius: number;
};

// etc

type AudioVisualizer = AudioVisualizerTypeBar | AudioVisualizerTypeRadial;
export type AppConfig = AudioVisualizer & {
  // Rest of fields here
};

Then if somebody were configuring this locally they would be sure to have set all the right fields.

Copy link
Copy Markdown
Contributor Author

@thomasyuill-livekit thomasyuill-livekit Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thats a great idea

I'm going to do that in the next PR tho so I have some time to test it thoroughly


// agent dispatch configuration
agentName?: string;

Expand All @@ -37,6 +48,22 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
accentDark: '#1fd5f9',
startButtonText: 'Start call',

// optional: audio visualization configuration
// audioVisualizerColor: '#002cf2',
// audioVisualizerColorDark: '#1fd5f9',
// audioVisualizerType: 'bar',
// audioVisualizerBarCount: 5,
// audioVisualizerType: 'radial',
// audioVisualizerRadialBarCount: 24,
// audioVisualizerRadialRadius: 100,
// audioVisualizerType: 'grid',
// audioVisualizerGridRowCount: 25,
// audioVisualizerGridColumnCount: 25,
// audioVisualizerType: 'wave',
// audioVisualizerWaveLineWidth: 3,
// audioVisualizerType: 'aura',
// audioVisualizerAuraColorShift: 0.3,

// agent dispatch configuration
agentName: process.env.AGENT_NAME ?? undefined,

Expand Down
Loading