Create a music playing bars animation on Compose

I'm working on a project that creates cards to see what your friends are listening to.

    @Composable
fun FriendCard(friend: User, recentTracks: RecentTracks?) {
    var albumNameWidth by remember { mutableStateOf(200.dp) }
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
    ) {
        Row(
            modifier = Modifier
                .padding(8.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column(
                horizontalAlignment = Alignment.Start,
            ) {
                recentTracks?.track?.firstOrNull()?.let { track ->
                    Text(
                        text = track.name,
                        style = MaterialTheme.typography.titleMedium,
                        maxLines = 1,
                        modifier = Modifier
                            .width(750.dp)
                            .basicMarquee()
                    )
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween
                    ) {
                        albumNameWidth =
                            if (track.dateInfo?.formattedDate == null) 230.dp else 200.dp
                        Text(
                            text = track.album.name.ifEmpty { stringResource(R.string.unknown_album) },
                            style = MaterialTheme.typography.labelLarge.copy(
                                color = MaterialTheme.colorScheme.onSurface
                            ),
                            maxLines = 1,
                            modifier = Modifier
                                .padding(end = 8.dp)
                                .width(albumNameWidth)
                                .basicMarquee()
                        )
                        if (track.dateInfo?.formattedDate == null) {
                            //if the person is listening to it right now
                              Icon(
                                  imageVector = Icons.Default.PlayArrow,
                                  tint = MaterialTheme.colorScheme.onSurfaceVariant,
                                  contentDescription = stringResource(R.string.now_playing),
                                  modifier = Modifier.align(Alignment.CenterVertically)
                              )
                        } else {
                            Text(
                                text = formatData(track.dateInfo.formattedDate),
                                style = MaterialTheme.typography.labelLarge.copy(
                                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                                    fontSize = 13.sp
                                ),
                                maxLines = 1,
                                modifier = Modifier.align(Alignment.CenterVertically)
                            )
                        }
                    }
                } ?: Text(
                    text = stringResource(id = R.string.no_recent_tracks),
                    style = MaterialTheme.typography.bodySmall.copy(
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                )
            }
        }
    }
}

Currently, when someone is listening to music at the moment the app is opened, it just displays a simple "play" icon from the Material Icons library. However, I want to replace it with an animation of three bars, similar to the one in the Spotify desktop app: sample gif

I found this question, which asks about the same kind of animation, but it's 10 years old, and the library provided in the answer hasn't been updated for Jetpack Compose. Any help is appreciated. Thanks!

Find a nice Lottie Animation

Under res folder create a new Android Resource Directory with name raw and download there the json file that you found. Finally simply create a composable like so:

@Composable
private fun LottieAnimation(modifier: Modifier) {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.your_lottie_file))
    LottieAnimation(
        modifier = modifier,
        composition = composition,
        speed = 0.5f, //1f is default
        iterations = LottieConstants.IterateForever
    )
}

And call it from anywhare. Happy coding!