仿微信语音 WaveView 实现

背景

之前项目里需要加入语音输入的功能,在 UI 上需要参考微信做一个随音量变化而跳动的音频 WaveView。找了很久,没有找到特别好的,于是自己实现一个。

效果比业界大多数的 IM 应用、ChatBot 应用的语音输入音频 WaveView 要更好。我看了大部分业界其他应用的实现,很多要么是伪动画(不随音量变化而变化),要么过于僵硬或者整齐,要么不支持低音量时的缓动。

效果展示

正常收音效果

gif的帧数不够,非常不流畅。可以直接去这里看录屏:www.bilibili.com/video/BV1rL...

缓动效果

代码仓库

github.com/ultimateHan...

如何使用

目前已经发布到 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 到项目里自己修改。

相关推荐
鬼手点金5 分钟前
如何选择模型
java·前端·人工智能·git·深度学习
恋猫de小郭6 分钟前
Dart 3.15 新特性:this 终于支持类型提升了
android·前端·flutter
IT_陈寒22 分钟前
Vue开发实战:从入门到精通
前端·人工智能·后端
ii_best35 分钟前
ios手机开发安卓脚本开发软件[按键精灵教程]从「找最小值」到「Boss 最近刷新」再到「屏幕范围极值」
android·ios·智能手机·自动化·按键精灵
znnnk37 分钟前
2026 前端工程化新纪元:Rust 重塑工具链,AI Agent 接管流水线
前端·人工智能·rust
王大师王文峰1 小时前
HTML 入门到进阶:语义化标签、表单与多媒体一篇打通【语义化布局、表单校验、video/audio、Canvas、无障碍与 SEO】
前端·css·node.js·html·css3·jquery·html5
开开心心就好1 小时前
安卓PDF处理工具,免费无广告零弹窗
android·服务器·开发语言·算法·pdf·ocr
风骏时光牛马1 小时前
AI_Coding:智能代码创作助手
前端
墨狂之逸才1 小时前
扫码枪响了,应用却没收到:一次 Android USB 线材问题排查
android
剪刀石头布啊10 小时前
vue-react为何要虚拟dom
前端