背景
之前项目里需要加入语音输入的功能,在 UI 上需要参考微信做一个随音量变化而跳动的音频 WaveView。找了很久,没有找到特别好的,于是自己实现一个。
效果比业界大多数的 IM 应用、ChatBot 应用的语音输入音频 WaveView 要更好。我看了大部分业界其他应用的实现,很多要么是伪动画(不随音量变化而变化),要么过于僵硬或者整齐,要么不支持低音量时的缓动。
效果展示
正常收音效果
gif的帧数不够,非常不流畅。可以直接去这里看录屏:www.bilibili.com/video/BV1rL...
缓动效果

代码仓库
如何使用
目前已经发布到 maven central: central.sonatype.com/artifact/io...
-
在 Android 项目中引入依赖: io.github.ultimatehandsomeboy666:soundwavelib:1.0.0
-
在 xml 中指定想要设置的属性:
attr | |
---|---|
volumeCount | 全部的音柱数量 |
volumeIdleCount | 参与缓动的音柱数量 |
minVolume | 定义最小音量,当低于最小音量时,就会进入缓动状态 |
maxVolume | 定义最大音量 |
danceDuration | 跳动一次的时长 |
maxDanceDelay | 音柱跳动的相位差,这个值越大,音柱跳动越不整齐。为0则所有音柱同步跳动 |
idleDuration | 缓动一整次的时长,这个值越大,缓动得越慢;越小越快 |
minVolumeBarHeight | 跳动音柱的最小高度 |
maxVolumeBarHeight | 跳动音柱的最大高度 |
minVolumeBarHeight | 跳动音柱的最小高度 |
volumeBarMargin | 音柱之间的间距 |
volumeBarHalfWidth | 音柱的一半宽度 |
volumeBarColor | 音柱的颜色 |
- 代码中还可以调用的一些方法:
setIdleHeightGetter(idleHeightGetter: (x: Int) -> Float)
:设置缓动的波形,x 代表当前时刻在缓动的音柱 index。比如想要一个曲线缓动,传入一个二次函数即可。
enableIdle(enable: Boolean)
:设置是否支持缓动
setDistribution(distribution: FloatArray)
:设置音柱高度分布。按需求将音柱高度设置得更加错落,比如两边相对低,中间相对高。
handleVolume(newVolume: Int)
:音柱跳动的入口方法,在监听音量的地方将调用该方法将音量传入,就会绘制跳动的 wave 啦。
总结
总的来说,代码不复杂,400多行。个人感觉效果确实挺不错的。如果有更多自定义需求,也可以把代码 copy 到项目里自己修改。