uiUI 组件系统
对比

录音与语音输入

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"取消录音请求"
demofalse
disabledfalse
constraints{"audio":true}
mimeType""
note"点击录音后才会请求麦克风权限。音频保留在当前页面。"

事件

ui:change ui:record ui:error

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 用文字明确是否在录音。
  • 停止和取消能通过键盘操作,保留非语音输入方式。

和相似组件的区别

录音产生音频;听写产生文字。按住说话也不等于持续双向语音会话。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Deep Chatmicrophone
官方提供

录制音频文件,不等于自动转写。

ElevenLabs UISpeechInput
官方提供

通过 ElevenLabs Scribe 将语音实时转为文字,需服务端生成 token。

关键状态

待开始请求权限录音中已停止权限被拒绝

React / Next.js、Web Components · 来源核验

一起了解

转录与同步文本 ↗实时语音会话 ↗上传与附件 ↗