在Android Jetpack Compose中实现波浪式音乐进度条的技术咨询

这类进度条属于音频可视化波形进度条，有两种实现路径：

1. 自定义Compose组件实现 #

无需额外依赖，借助Compose的Canvas就能实现核心效果：

• 监听音乐播放进度，若要实时匹配音频波形，还需获取音频PCM数据
• 在Canvas中根据进度绘制动态变化的柱状图形，控制柱的高度、宽度、滚动节奏，复刻示例效果
• 用animateFloatAsState或LaunchedEffect处理柱形的动画过渡，模拟进度推进时的波形滚动

核心代码示例：

@Composable
fun WaveProgressBar(progress: Float) {
    Canvas(modifier = Modifier.fillMaxWidth().height(60.dp)) {
        val barCount = 20
        val barWidth = size.width / barCount
        val maxBarHeight = size.height

        repeat(barCount) { index ->
            // 根据进度和索引计算柱高，加入随机波动模拟波形
            val barHeight = maxBarHeight * (0.2f + kotlin.random.Random.nextFloat() * 0.8f * progress)
            drawRect(
                color = Color.Green,
                topLeft = Offset(index * barWidth, size.height - barHeight),
                size = Size(barWidth - 2.dp.toPx(), barHeight)
            )
        }
    }
}

2. 使用现成开源库 #

如果不想手动写绘制逻辑，可选用专注于Jetpack Compose的音频可视化库：

• Compose Audio Visualizer：专为Compose设计的音频可视化组件，支持包括滚动柱状波形在内的多种样式，直接绑定播放进度或音频数据即可使用
• 若仅需基础进度可视化，也可尝试Accompanist库的相关扩展，但更推荐专注音频可视化的专用库

注：如果要实现和音频实时同步的波形，需要先获取音频的PCM数据，再将数据转换为波形高度参数传递给组件；若仅需模拟进度滚动的视觉效果，直接根据播放进度计算柱形高度即可。

内容的提问来源于stack exchange，提问作者Mehedi Hasan