HarmonyOS鸿蒙Next中音波图怎么实现

HarmonyOS鸿蒙Next中音波图怎么实现 我想实现音波图效果，最有效和快速的方法？怎么去实现

6 回复

是这种吗？

音频波形动画是音频数据的线性波形显示，其中，水平X轴用于衡量时间，垂直Y轴用于衡量振幅，如下图所示：

cke_345.png

有官方教程和Demo哦：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-audio-ripple-animation

cke_1892.png

更多关于HarmonyOS鸿蒙Next中音波图怎么实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


目前我自己现在也是按照这个去弄的，

学习了

音波图本质上是音频信号振幅的可视化。实现流程通常分为三步：

  1. 获取音频数据：通过AudioCapturer（录音）或AudioRenderer（播放）的回调获取原始的PCM数据（ArrayBuffer）。
  2. 计算音量强度：将PCM数据转换为一个代表音量大小的归一化值（例如0~1范围），常用方法是计算RMS（均方根）并转换为dBFS（分贝满刻度），再映射到0~1。
  3. 绘制波形：使用Canvas的2D上下文，定时将计算出的强度值绘制为竖线或曲线，并通过滚动或清屏实现动态效果。

具体可参见这篇文章：HarmonyOS ArkTS 实战：实现本地录音（PCM→WAV）与实时波形（Canvas）

在HarmonyOS NEXT中实现音波图，主要步骤如下：

  1. 使用@ohos.multimedia.audio的AudioCapturer或AudioRenderer获取PCM音频数据。
  2. 解析PCM数据为振幅数组。
  3. 借助Canvas组件（CanvasRenderingContext2D），在onDraw回调中通过moveTo和lineTo绘制波形。
  4. 利用requestAnimationFrame实现实时刷新。
  5. 可通过Path对象构建曲线并调用stroke或fill渲染。，

在HarmonyOS Next中，最快实现音波图的方式是使用Canvas组件结合音频PCM数据绘制波形。核心流程：通过AudioRenderer或音频播放的回调获取实时PCM采样点，将每个采样点的数值映射为Canvas上的纵坐标，结合横坐标等间距排列，用Path一次性绘制连续曲线。如需降低复杂度，也可先生成静态正弦波或随机数据绘制模拟波形。绘制时在Canvas的onReady事件中创建OffscreenCanvas或直接操作RenderingContext，定时刷新即可获得动态音波图。

回到顶部