uiUI 组件系统
对比

实时语音会话

Realtime Voice Session

管理双向语音对话的连接、静音、打断与结束。

交互预览实时预览

本地模拟会话

未连接

不会建立网络或音视频连接。
模拟连接与结束,不建立外部连接
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'live-session',
  {
    "title": "本地模拟会话",
    "startLabel": "模拟连接",
    "stopLabel": "结束模拟会话",
    "demo": true,
    "note": "不会建立网络或音视频连接。"
  }
);

view.element.addEventListener('ui:change', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

用户需要连续说话并听取 Agent 回复。

什么时候不用

一次录音或朗读消息无需建立持续双向会话。

COMPONENT API

属性与事件

传入业务数据,通过事件连接你的应用。

属性默认值
title"实时语音会话"
startLabel"连接会话"
stopLabel"结束会话"
cancelLabel"取消连接"
demofalse
disabledfalse
connectnull
note"通过应用提供的连接适配器管理会话。"

事件

ui:change ui:connect ui:error

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

INTERACTION NOTES

交互与可访问性

  • 连接和静音状态有文字。
  • 始终保留可达的结束按钮和文字替代入口。

和相似组件的区别

语音会话拥有双向连接;听写只有语音到文字,朗读只有文字到音频。

RESEARCH & ALTERNATIVES

官方实现映射

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

ElevenLabs UIConversationBar
官方提供

需 ElevenLabs Agent ID 与 @elevenlabs/react;包含话筒和连接控制。

官方提供

UI 与 RealtimeVoiceAdapter 连接;实际语音服务需要另外配置。

关键状态

未连接连接中聆听Agent 讲话已静音断开

React / Next.js · 来源核验

一起了解

录音与语音输入 ↗波形与音频可视化 ↗转录与同步文本 ↗