# Audio Volume Indicator

The audio indicator provides visual feedback when a user is speaking.
To identify who's speaking, use `call.state.dominantSpeaker` and `call.state.activeSpeakers`.
For individual participants, observe `participant.speaking`, `participant.dominantSpeaker`, `participant.audioLevel`, and `participant.audioLevels`.

This example shows how to render a visual UI indicator that changes based on the audio level.

First, let's create some fake audio data for the preview and create the preview

```kotlin
fun fakeAudioState(): StateFlow<List<Float>> {
    val audioFlow = flow {
        val audioLevels = mutableListOf(0f, 0f, 0f, 0f, 0f)
        while (true) {
            val newValue = Random.nextFloat()
            audioLevels.removeAt(0)
            audioLevels.add(newValue)
            emit(audioLevels.toList())
            delay(300)
        }
    }
    return audioFlow.stateIn(
        scope = CoroutineScope(Dispatchers.Default),
        started = SharingStarted.Eagerly,
        initialValue = listOf(0f, 0f, 0f, 0f, 0f)
    )
}

@Preview(showBackground = true)
@Composable
fun AudioPreview() {
    val audioLevels by fakeAudioState().collectAsState()
    MyApplicationTheme {
        AudioVolumeIndicator(audioLevels)
    }
}
```

Next here's a little custom audio visualization:

```kotlin
@Composable
fun AudioVolumeIndicator(audioState: List<Float>) {
    // based on this fun blogpost: https://proandroiddev.com/jetpack-compose-tutorial-replicating-dribbble-audio-app-part-1-513ac91c02e3
    val infiniteAnimation = rememberInfiniteTransition()
    val animations = mutableListOf<State<Float>>()

    repeat(5) {
        val durationMillis = Random.nextInt(500, 1000)
        animations += infiniteAnimation.animateFloat(
            initialValue = 0f,
            targetValue = 1f,
            animationSpec = infiniteRepeatable(
                animation = tween(durationMillis),
                repeatMode = RepeatMode.Reverse,
            )
        )
    }

    Canvas(modifier = Modifier.width(45.dp).padding(horizontal = 12.dp)) {
        val canvasCenterY = 0
        var startOffset = 0f
        val barWidthFloat = 10f
        val barMinHeight = 0f
        val barMaxHeight = 150f
        val gapWidthFloat = 1f

        repeat(5) { index ->
            val currentSize = animations[index % animations.size].value
            var barHeightPercent = audioState[index] + currentSize
            if (barHeightPercent > 1.0f) {
                val diff = barHeightPercent - 1.0f
                barHeightPercent = 1.0f - diff
            }
            val barHeight = barMinHeight + (barMaxHeight - barMinHeight) * barHeightPercent
            drawLine(
                color = Color(0xFF9CCC65),
                start = Offset(startOffset, canvasCenterY - barHeight / 2),
                end = Offset(startOffset, canvasCenterY + barHeight / 2),
                strokeWidth = barWidthFloat,
                cap = StrokeCap.Round,
            )
            startOffset += barWidthFloat + gapWidthFloat
        }
    }
}
```

And here's how you can use your custom volume indicator for a single video renderer by implementing `labelContent` composable parameter on `ParticipantVideo` component like the example below:

```kotlin
CallContent(
    modifier = Modifier.background(color = VideoTheme.colors.appBackground),
    videoRenderer = { modifier, call, participant, style ->
        ParticipantVideo(
            modifier = modifier,
            call = call,
            participant = participant,
            style = style,
            labelContent = {
                val fakeAudio by fakeAudioState().collectAsState()
                ParticipantLabel(
                    participant = participant,
                    soundIndicatorContent = {
                        AudioVolumeIndicator(fakeAudio)
                    }
                )
            }
        )
    },
  ..
)
```

The end result looks like this:

![Audio Volume Indicator](https://getstream.io/docs-assets/images/44da7aafcbfd.png)

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/android/ui-cookbook/audio-volume-indicator/](https://getstream.io/video/docs/android/ui-cookbook/audio-volume-indicator/).