波形与音频可视化
Waveform / Audio Visualizer
展示输入音量或音频随时间变化的形状。
波形是声音的形状，不是文字转写。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'waveform'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
需要确认麦克风有输入，或定位音频片段。
什么时候不用
装饰波形不能充当真实录音、转写成功或网络连接的证据。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "音频波形" |
samples | [0,0.1,-0.1,0.15,-0.2,0.1,0.3,-0.3,0.2,0.1,0.6,-0.6,0.4,-0.3,0.9,-0.9,0.6,-0.2,0.3,-0.4,0.2,0.1,0.7,-0.7,0.5,-0.2,0.3,-0.3,0.1,0] |
note | "波形是声音的形状，不是文字转写。" |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 视觉之外提供输入状态文字。
- 音频量不必持续逐帧播报；减少动态效果时仍可理解。
和相似组件的区别
实时波形说明声音输入；播放波形用于定位已存在音频，不能互相冒充。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js · 来源核验