uiUI 组件系统
对比

音频播放与进度

Audio Player / Scrub Bar

播放已生成或上传的语音,并控制时间与速度。

交互预览实时预览

合成示例音频

可播放、暂停和调整音量。

实际播放、暂停本地合成音频
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'audio-player',
  {
    "src": "/sample-tone.wav"
  }
);

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

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

什么时候用

音频需要回听、暂停或定位。

什么时候不用

未经用户动作自动播放会打断当前任务,应避免。

COMPONENT API

属性与事件

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

属性默认值
title"合成示例音频"
label"播放合成示例音频"
src""
preload"none"
loopfalse
mutedfalse
volume1
note"可播放、暂停和调整音量。"

事件

ui:change ui:error

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

INTERACTION NOTES

交互与可访问性

  • 播放和暂停按钮的名称随动作更新。
  • 进度滑块支持键盘,并提供时间文本。

和相似组件的区别

播放器控制既有音频;实时通话还涉及输入设备、连接和会话生命周期。

RESEARCH & ALTERNATIVES

官方实现映射

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

ElevenLabs UIAudioPlayer
官方提供

Provider 管理播放、进度、时间与速度等控件。

关键状态

未选音频缓冲播放暂停播放失败

React / Next.js · 来源核验

一起了解

转录与同步文本 ↗实时语音会话 ↗