AudioWaveform

AudioWaveform is a Compose component that visualizes audio amplitudes as animated bars—perfect for showing recording activity or audio levels.

Basic usage

Connect to RecorderState.liveAmplitudes for real-time visualization during recording:

val recorderState = rememberRecorderState()

if (recorderState.isRecording) {
    AudioWaveform(
        amplitudes = recorderState.liveAmplitudes,
        modifier = Modifier.fillMaxWidth().height(64.dp)
    )
}

The amplitudes parameter expects a List<Float> where each value is between 0.0 (silence) and 1.0 (maximum).

Color customization

Use a single color for all bars:

AudioWaveform(
    amplitudes = amplitudes,
    barColor = Color.Blue
)

Apply a gradient across the waveform:

AudioWaveform(
    amplitudes = amplitudes,
    brush = Brush.horizontalGradient(
        colors = listOf(Color.Cyan, Color.Magenta)
    )
)

Use Material theme colors:

AudioWaveform(
    amplitudes = amplitudes,
    barColor = MaterialTheme.colorScheme.primary
)

Bar configuration

Customize the appearance of individual bars:

AudioWaveform(
    amplitudes = amplitudes,
    barWidth = 4.dp,      // Width of each bar
    barSpacing = 2.dp,    // Gap between bars
    maxBars = 50          // Maximum number of bars shown
)

Preset colors

Kodio includes color presets for quick styling:

AudioWaveform(
    amplitudes = amplitudes,
    barColor = WaveformColors.Green        // Default
)

AudioWaveform(
    amplitudes = amplitudes,
    brush = WaveformColors.BlueGradient    // Gradient
)

Available presets

Preset	Type	Description
`WaveformColors.Green`	Solid	Classic green waveform
`WaveformColors.Blue`	Solid	Blue waveform
`WaveformColors.Purple`	Solid	Purple waveform
`WaveformColors.GreenGradient`	Gradient	Green to teal gradient
`WaveformColors.BlueGradient`	Gradient	Blue to purple gradient

Full example

A recording screen with styled waveform:

@Composable
fun WaveformDemo() {
    val recorderState = rememberRecorderState()

    Column(
        modifier = Modifier.fillMaxSize().padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Waveform container
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(120.dp)
                .background(
                    color = MaterialTheme.colorScheme.surfaceVariant,
                    shape = RoundedCornerShape(12.dp)
                )
                .padding(16.dp),
            contentAlignment = Alignment.Center
        ) {
            if (recorderState.isRecording) {
                AudioWaveform(
                    amplitudes = recorderState.liveAmplitudes,
                    modifier = Modifier.fillMaxSize(),
                    brush = Brush.horizontalGradient(
                        colors = listOf(
                            MaterialTheme.colorScheme.primary,
                            MaterialTheme.colorScheme.tertiary
                        )
                    ),
                    barWidth = 3.dp,
                    barSpacing = 2.dp
                )
            } else {
                Text(
                    "🎤 Tap to record",
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        }

        Spacer(Modifier.height(24.dp))

        Button(onClick = { recorderState.toggle() }) {
            Text(if (recorderState.isRecording) "Stop" else "Record")
        }
    }
}

Parameters reference

amplitudes: List<Float>: Audio amplitude values between 0.0 and 1.0.
modifier: Modifier: Standard Compose modifier for sizing and positioning.
barColor: Color: Solid color for all bars. Ignored if brush is set.
brush: Brush: Gradient or pattern brush for bars. Overrides barColor.
barWidth: Dp: Width of each bar. Default: 3.dp
barSpacing: Dp: Gap between adjacent bars. Default: 2.dp
maxBars: Int: Maximum bars to display. Default: 50

Last modified: 13 January 2026