录音与语音输入
Audio Recorder / Dictation
捕获麦克风输入,形成音频附件或可编辑的文字草稿。
不访问麦克风,仅模拟录音状态。
尚未开始
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'voice-recorder',
{
"demo": true,
"startLabel": "模拟录音",
"stopLabel": "结束模拟录音",
"note": "不访问麦克风,仅模拟录音状态。"
}
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
用户适合说话输入,或原始音频本身是任务材料。
什么时候不用
不能在没有用户动作时自动开始录音;安静环境优先保留文字入口。
COMPONENT API
属性与事件
传入业务数据,通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "录音与语音输入" |
startLabel | "开始录音" |
stopLabel | "停止录音" |
cancelLabel | "取消录音请求" |
demo | false |
disabled | false |
constraints | {"audio":true} |
mimeType | "" |
note | "点击录音后才会请求麦克风权限。音频保留在当前页面。" |
事件
ui:change ui:record ui:error
INTERACTION NOTES
交互与可访问性
- 用文字明确是否在录音。
- 停止和取消能通过键盘操作,保留非语音输入方式。
和相似组件的区别
录音产生音频;听写产生文字。按住说话也不等于持续双向语音会话。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Web Components · 来源核验