语聊房中的声浪效果是怎么实现的

在语聊房、K 歌房等实时音频场景中我们经常能看到随着用户说话或唱歌界面上会出现动态的声浪波形或音量柱状图。这种视觉反馈不仅让用户感知到音频正在传输还能增强互动体验。那么这种声浪效果是如何实现的呢本文将基于ZEGO 实时音视频 SDKZEGO Express SDK为例详细讲解声浪效果的技术实现。一、什么是声浪效果1.1 什么是声浪声浪效果是指根据音频信号的音量大小实时在界面上渲染出动态的视觉效果。常见的表现形式包括音量波动动画头像周围的圆环随音量大小变化柱状图频谱类似音乐播放器的频谱可视化波形动画模拟声波传播的动态效果1.2 声浪常见的应用场景语聊房显示正在说话的用户K 歌房展示主播的音调与音量变化视频会议标识当前发言人在线教育提示学生发言状态1.3 声浪实现的技术原理声浪效果的实现流程可以概括为三个步骤音频采集 → 音量计算 → UI 渲染ZEGO Express SDK 负责音频采集和音量计算开发者只需监听回调并将数据渲染到 UI 上。二、ZEGO SDK 提供的声浪能力ZEGO Express SDK 提供了完整的声浪监控能力包括声浪音量和音频频谱两种数据类型。2.1 核心 API 介绍声浪监控 API// 启动声浪监控支持版本1.1.0 public void startSoundLevelMonitor(int millisecond) // 停止声浪监控 public void stopSoundLevelMonitor()参数说明millisecond声浪回调周期单位毫秒取值范围 [100, 3000]默认 100ms音频频谱监控 API// 启动音频频谱监控支持版本1.1.0 public void startAudioSpectrumMonitor() // 停止音频频谱监控 public void stopAudioSpectrumMonitor()特点固定回调周期100ms适用于 K 歌场景的音调与音量变化动画2.2 回调接口说明ZEGO SDK 通过IZegoEventHandler提供四个回调接口本地音频回调// 本地采集的声浪回调 public void onCapturedSoundLevelUpdate(double soundLevel) // 本地采集的音频频谱回调 public void onCapturedAudioSpectrumUpdate(float[] audioSpectrum)远端音频回调// 远端拉流的声浪回调 public void onRemoteSoundLevelUpdate(HashMapString, Double soundLevels) // 远端拉流的音频频谱回调 public void onRemoteAudioSpectrumUpdate(HashMapString, float[] audioSpectrums)关键点远端回调使用HashMap结构key为流 IDvalue为对应的声浪/频谱数据这样设计是因为语聊房中可能同时存在多路远端音频流三、实现步骤详解3.1 前置准备在使用声浪监控功能前需要完成以下准备工作// 1. 创建 ZEGO Express Engine 实例 ZegoExpressEngine engine ZegoExpressEngine.createEngine( appID, appSign, true, ZegoScenario.GENERAL, application, null ); // 2. 加入房间 engine.loginRoom(roomID, user); // 3. 推流本地音频 engine.startPublishingStream(streamID); // 4. 拉流远端音频 engine.startPlayingStream(streamID);3.2 监听声浪回调创建自定义的事件处理器实现声浪回调接口class MyEventHandler extends IZegoEventHandler { Override public void onCapturedSoundLevelUpdate(double soundLevel) { // 处理本地声浪数据 // soundLevel 范围0.0 ~ 100.0 updateLocalSoundLevelUI(soundLevel); } Override public void onRemoteSoundLevelUpdate(HashMapString, Double soundLevels) { // 处理远端声浪数据 for (Map.EntryString, Double entry : soundLevels.entrySet()) { String streamID entry.getKey(); Double soundLevel entry.getValue(); updateRemoteSoundLevelUI(streamID, soundLevel); } } Override public void onCapturedAudioSpectrumUpdate(float[] audioSpectrum) { // 处理本地音频频谱数据 // audioSpectrum 为频谱值数组范围 [0, 2^30] updateLocalSpectrumUI(audioSpectrum); } Override public void onRemoteAudioSpectrumUpdate(HashMapString, float[] audioSpectrums) { // 处理远端音频频谱数据 for (Map.EntryString, float[] entry : audioSpectrums.entrySet()) { String streamID entry.getKey(); float[] spectrum entry.getValue(); updateRemoteSpectrumUI(streamID, spectrum); } } }3.3 启动声浪监控// 设置事件回调 engine.setEventHandler(new MyEventHandler()); // 启动声浪监控设置 100ms 回调周期 engine.startSoundLevelMonitor(100);注意事项调用startSoundLevelMonitor后onCapturedSoundLevelUpdate会立即触发未推流且未预览时本地声浪回调值为 0远端声浪需要在startPlayingStream之后才会回调3.4 处理远端多路流数据在语聊房场景中房间内可能有多个用户同时推流。为了正确处理每路流的声浪数据需要先获取流列表class MyEventHandler extends IZegoEventHandler { // 保存房间内的流列表 private ListZegoStream streamList new ArrayList(); Override public void onRoomStreamUpdate(String roomID, ZegoUpdateType updateType, ArrayListZegoStream streamList, JSONObject extendedData) { if (updateType ZegoUpdateType.ADD) { // 有新流加入 this.streamList.addAll(streamList); } else { // 有流移除 this.streamList.removeAll(streamList); } } Override public void onRemoteSoundLevelUpdate(HashMapString, Double soundLevels) { // 遍历保存的流列表获取对应的声浪数据 for (ZegoStream stream : streamList) { String streamID stream.streamID; if (soundLevels.containsKey(streamID)) { Double soundLevel soundLevels.get(streamID); // 根据流 ID 更新对应用户的 UI updateUserSoundLevelUI(stream.user.userID, soundLevel); } } } }四、进阶音频频谱可视化如果需要实现更炫酷的音频可视化效果如 K 歌房的频谱动画可以使用音频频谱监控功能。4.1 频谱数据特点回调周期固定 100ms数据格式float[]数组每个元素代表一个频段的能量值数值范围[0, 2^30]适用场景主播 K 歌场景让主播或观众看到音调与音量变化的动画4.2 启动频谱监控// 启动音频频谱监控 engine.startAudioSpectrumMonitor();4.3 频谱数据渲染将频谱数组映射到 UI 柱状图Override public void onCapturedAudioSpectrumUpdate(float[] audioSpectrum) { // audioSpectrum 长度通常为 512 或 1024 // 可以根据需要进行降采样例如只显示 32 个柱状图 int barCount 32; float[] displaySpectrum new float[barCount]; // 将频谱数据分组求平均 int groupSize audioSpectrum.length / barCount; for (int i 0; i barCount; i) { float sum 0; for (int j 0; j groupSize; j) { sum audioSpectrum[i * groupSize j]; } displaySpectrum[i] sum / groupSize; } // 更新 UI自定义 View 绘制柱状图 spectrumView.updateSpectrum(displaySpectrum); }五、实战技巧与注意事项5.1 性能优化合理设置回调周期// 对于普通语聊房200ms 的回调周期足够 engine.startSoundLevelMonitor(200); // 对于 K 歌房等对实时性要求高的场景使用 100ms engine.startSoundLevelMonitor(100);UI 渲染使用节流策略private long lastUpdateTime 0; private static final long UPDATE_INTERVAL 50; // 50ms 更新一次 UI Override public void onCapturedSoundLevelUpdate(double soundLevel) { long currentTime System.currentTimeMillis(); if (currentTime - lastUpdateTime UPDATE_INTERVAL) { updateUI(soundLevel); lastUpdateTime currentTime; } }5.2 常见问题问题 1未推流时声浪回调值为 0原因启动声浪监控后即使未启动本地音频采集onCapturedSoundLevelUpdate也会有回调但声浪值为 0。解决方案在推流或预览后再处理声浪数据。问题 2远端声浪没有回调原因onRemoteSoundLevelUpdate需要在拉流startPlayingStream之后才会回调。解决方案确保已成功拉流可以通过onPlayerStateUpdate回调确认拉流状态。问题 3声浪数据跳变明显原因音频信号本身存在波动直接渲染会导致 UI 抖动。解决方案对声浪数据进行平滑处理private double smoothedSoundLevel 0; private static final double SMOOTH_FACTOR 0.3; Override public void onCapturedSoundLevelUpdate(double soundLevel) { // 指数移动平均 smoothedSoundLevel smoothedSoundLevel * (1 - SMOOTH_FACTOR) soundLevel * SMOOTH_FACTOR; updateUI(smoothedSoundLevel); }5.3 混流场景处理在混流场景下如果需要获取混流后的声浪数据可以通过拉取混流后的流来获取// 拉取混流后的流 engine.startPlayingStream(mixStreamID); // 在 onRemoteSoundLevelUpdate 中获取混流的声浪 Override public void onRemoteSoundLevelUpdate(HashMapString, Double soundLevels) { if (soundLevels.containsKey(mixStreamID)) { Double mixedSoundLevel soundLevels.get(mixStreamID); updateMixedSoundLevelUI(mixedSoundLevel); } }六、完整示例代码以下是一个完整的语聊房声浪效果实现示例public class VoiceChatActivity extends AppCompatActivity { private ZegoExpressEngine engine; private String roomID room_001; private String userID user_001; private String streamID stream_001; Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_voice_chat); initZegoEngine(); joinRoom(); startPublishing(); startSoundLevelMonitor(); } private void initZegoEngine() { // 创建引擎 engine ZegoExpressEngine.createEngine( YOUR_APP_ID, YOUR_APP_SIGN, true, ZegoScenario.GENERAL, getApplication(), null ); // 设置事件回调 engine.setEventHandler(new IZegoEventHandler() { Override public void onCapturedSoundLevelUpdate(double soundLevel) { runOnUiThread(() - { // 更新本地用户的声浪 UI updateLocalSoundLevel(soundLevel); }); } Override public void onRemoteSoundLevelUpdate(HashMapString, Double soundLevels) { runOnUiThread(() - { // 更新远端用户的声浪 UI for (Map.EntryString, Double entry : soundLevels.entrySet()) { updateRemoteSoundLevel(entry.getKey(), entry.getValue()); } }); } Override public void onRoomStreamUpdate(String roomID, ZegoUpdateType updateType, ArrayListZegoStream streamList, JSONObject extendedData) { if (updateType ZegoUpdateType.ADD) { // 有新流加入开始拉流 for (ZegoStream stream : streamList) { engine.startPlayingStream(stream.streamID); } } } }); } private void joinRoom() { ZegoUser user new ZegoUser(userID); engine.loginRoom(roomID, user); } private void startPublishing() { engine.startPublishingStream(streamID); } private void startSoundLevelMonitor() { // 启动声浪监控100ms 回调一次 engine.startSoundLevelMonitor(100); } private void updateLocalSoundLevel(double soundLevel) { // 更新本地用户头像的声浪动画 // 例如根据 soundLevel 调整圆环的大小或透明度 localUserView.setSoundLevel(soundLevel); } private void updateRemoteSoundLevel(String streamID, double soundLevel) { // 更新远端用户头像的声浪动画 RemoteUserView userView findUserViewByStreamID(streamID); if (userView ! null) { userView.setSoundLevel(soundLevel); } } Override protected void onDestroy() { super.onDestroy(); // 停止声浪监控 engine.stopSoundLevelMonitor(); // 登出房间 engine.logoutRoom(roomID); // 销毁引擎 ZegoExpressEngine.destroyEngine(null); } }七、总结声浪效果的实现核心流程可以总结为初始化 SDK创建 ZEGO Express Engine 实例设置回调实现IZegoEventHandler中的声浪回调接口启动监控调用startSoundLevelMonitor开启声浪监控处理数据在回调中获取声浪数据并渲染到 UI性能优化合理设置回调周期对数据进行平滑处理ZEGO Express SDK 的优势在于低延迟声浪数据实时回调延迟低至 100ms高精度提供精确的音量值和频谱数据易集成API 简洁几行代码即可实现跨平台支持 Android、iOS、Web、Flutter 等多平台参考资料ZEGO Express Android SDK API 文档ZEGO Express 示例代码 – 声浪和频谱模块音量变化与音频频谱文档希望这篇文章能帮助您理解语聊房声浪效果的实现原理。如果您有任何问题欢迎查阅 ZEGO 官方文档或联系技术支持。