@adio-ui/反应
在React中为音频界面提供的无头,可访问的原始:一个 DAW 或合成器的控制和编辑器,其行为被构建在其中并留给了您.
- 无头. 部件生成您给出的元素,状态为
data-*从属性和 CSS 变量到样式。 没有风格的船. - 无障碍. 每个控件都持有自有输入,因此聚焦,键盘,屏幕读取器和窗体对滑动器一样工作.
- 作是说已. 组合在一起的小部分
Knob.Root, (中文(简体) ),Knob.Control, (中文(简体) ),Knob.Thumb),每个带一个render螺旋桨和className编号 :style作为国家的职能. - 建为音相. 缩放(线性,日志),精细拖放,一个不重放回放而移动的活位置,以及音乐时间.
- 树可摇. 从根或从子路径导入,例如
@audio-ui/react/knob并且只运送你使用的东西.
安装
npm install @audio-ui/react
需要反应19。 这是建立在 @audio-ui/core,原始人的框架-不可知逻辑,它与它相接而起.
使用
import { Knob } from "@audio-ui/react";
export function Cutoff() {
return (
<Knob.Root
defaultValue={1000}
max={20_000}
min={20}
onValueChange={(hz, eventDetails) => setCutoff(hz)}
scale="log"
>
<Knob.Label>Cutoff</Knob.Label>
<Knob.Control className="size-16">
<Knob.Track />
<Knob.Indicator />
<Knob.Thumb aria-label="Cutoff" />
</Knob.Control>
<Knob.Value />
</Knob.Root>
);
}
变化以 onValueChange(value, eventDetails)数字 : eventDetails.reason 说什么移动它("drag", (中文(简体) ), "wheel", (中文(简体) ), "keyboard", (中文(简体) ), "reset"),以及 eventDetails.cancel() 拒绝. onValueCommitted 一旦改变值的手势结束,即启动注释或保存预设的时间.
初级
| 初级 | 这是什么 |
|---|---|
Knob, (中文(简体) ), Fader, (中文(简体) ), XYPad | 扶轮、线性和二维参数 |
Envelope, (中文(简体) ), Plot | 断点和曲线编辑器(ADSR、EQ、过滤器、压缩机) |
Meter, (中文(简体) ), Waveform | 水平、峰值、波形、活信号和可视化器 |
Timeline | 一种安排的地面:缩放、网格、范围、有剪接和淡出的剪接、可寻找的道 |
Sequencer, (中文(简体) ), Pad, (中文(简体) ), Piano, (中文(简体) ), PianoRoll | 台阶网格、鼓垫、键盘和一个注释编辑器 |
活值(玩家头,一米) source, (中文(简体) ), { getSnapshot, subscribe },并在移动时写给DOM. createSource 做一个.
文档
指南、每个部分的API和活例: https://www.audio-ui.dev (英语)。这些原始物上所建的样式化组件被复制到您的工程中,并带有阴影 CLI :
npx shadcn@latest add @audio-ui/knob
对于AI代理,有一个MCP服务器(https://www.audio-ui.dev/mcp)和技能: npx skills add ouestlabs/audio-ui。 。 。 .
许可证
麻省理工学院