How can I visualize audio levels from both the user and the LiveKit Community #ask-ai

How can I visualize audio levels from both the use...

kind-school-76204

07/31/2025, 2:03 AM

How can I visualize audio levels from both the user and the agent in Flutter? I'm trying to visualize audio like in the image below. In Flutter, what's the best way to get a smooth audio level stream? I tried using

audioLevel

from the

Participant

, but it seems to return only discrete values like 0, 0.125, 0.25, etc. This makes the animation feel choppy. Is there a way to get higher-resolution or more continuous audio level data?

tall-airline-16756

07/31/2025, 2:03 AM

Thanks for reaching out, Jex. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.

tall-airline-16756

07/31/2025, 2:04 AM

To visualize audio levels in Flutter using LiveKit and achieve smoother animations, you can follow these approaches: 1. Use the Built-in AudioVisualizerWidget The LiveKit Components Flutter package provides a pre-built widget for audio visualization:

Copy code

import 'package:livekit_client/livekit_client.dart';

AudioVisualizerWidget(
  options: AudioVisualizerWidgetOptions(
    barCount: 7,
    centeredBands: true,
    width: 12,
    minHeight: 12,
    maxHeight: 100,
    durationInMilliseconds: 500,
    spacing: 5,
    cornerRadius: 9999,
  ),
)

2. Create a Custom Visualizer For more control, you can create your own visualizer. Here's an example: Sources: lib/src/ui/widgets/track/audio_visualizer_widget.dart | example/lib/widgets/sound_waveform.dart

Open in Slack

Previous Next