转录与同步文本
Transcript / Aligned Text
把语音内容变成可读文字，或将文字与播放时间对应。
可编辑的示例转写
我们先核对组件的来源，再比较它们的使用边界。
文本在本地编辑，不进行语音识别。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'transcription'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
需要静音阅读、检索或按文字回听。
什么时候不用
没有时间对齐数据时，不要制造逐字同步的准确性印象。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "示例转写文本" |
title | "可编辑的示例转写" |
text | "我们先核对组件的来源，再比较它们的使用边界。" |
editable | true |
segments | [] |
currentTime | 0 |
media | null |
note | "文本在本地编辑，不进行语音识别。" |
事件
ui:change ui:seek
INTERACTION NOTES
交互与可访问性
- 高亮不是唯一的当前片段标记。
- 可交互文字要有清晰焦点，保留完整可读文本。
和相似组件的区别
实时转写生产文字；Transcript Viewer 展示已有文字与时间对齐数据，本身不识别语音。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js · 来源核验