# @audio-ui/react 中文文档

规范地址：https://npmcn.com/package/%40audio-ui/react/

版本：0\.13\.0
npm 元数据更新时间：2026-11-06T09:22:32.483Z
中文译文更新时间：2026-11-07T04:23:33.413Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40audio-ui/react
原文对照：https://npmcn.com/package/%40audio-ui/react/?lang=original
项目主页：https://www.audio-ui.dev/docs/primitives
源码仓库：https://github.com/ouestlabs/audio-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.1 MB，376 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^19\.2\.7，react-dom ^19\.2\.7，@types/react ^18 \|\| ^19
- 首次发布：2025-12-24T06:30:59.039Z
- 最新版本发布：2026-11-06T09:22:31.928Z
- 近 30 天下载量：5621（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：39（近 12 个月 39 个）

## 中文简介

可访问,无头反应 音频界面原始:knobs, 已淡出, XY 垫子, 信封, 仪表,波形, 时间表, 步序器, 鼓垫, 钢琴键盘和钢琴卷.

## 安装

```sh
npm install @audio-ui/react
```

也可以使用：`pnpm add @audio-ui/react`、`yarn add @audio-ui/react`、`bun add @audio-ui/react`

## README

# @adio-ui/反应

在React中为音频界面提供的无头,可访问的原始:一个 DAW 或合成器的控制和编辑器,其行为被构建在其中并留给了您.

-   **无头.** 部件生成您给出的元素,状态为 `data-*` 从属性和 CSS 变量到样式。 没有风格的船.
-   **无障碍.** 每个控件都持有自有输入,因此聚焦,键盘,屏幕读取器和窗体对滑动器一样工作.
-   **作是说已.** 组合在一起的小部分`Knob.Root`, (中文(简体) ), `Knob.Control`, (中文(简体) ), `Knob.Thumb`),每个带一个 `render` 螺旋桨和 `className` 编号 : `style` 作为国家的职能.
-   **建为音相.** 缩放(线性,日志),精细拖放,一个不重放回放而移动的活位置,以及音乐时间.
-   **树可摇.** 从根或从子路径导入,例如 `@audio-ui/react/knob`并且只运送你使用的东西.

## 安装

```bash
npm install @audio-ui/react
```

需要反应19。 这是建立在 `@audio-ui/core`,原始人的框架-不可知逻辑,它与它相接而起.

## 使用

```tsx
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 (英语)](https://www.audio-ui.dev/)。这些原始物上所建的样式化组件被复制到您的工程中,并带有阴影 CLI :

```bash
npx shadcn@latest add @audio-ui/knob
```

对于AI代理,有一个MCP服务器(`https://www.audio-ui.dev/mcp`)和技能: `npx skills add ouestlabs/audio-ui`。 。 。 .

## 许可证

麻省理工学院

## 常见问题

### @audio-ui/react 是什么？

可访问,无头反应 音频界面原始:knobs, 已淡出, XY 垫子, 信封, 仪表,波形, 时间表, 步序器, 鼓垫, 钢琴键盘和钢琴卷\.

### 如何安装 @audio-ui/react？

在项目目录运行 npm install @audio-ui/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.7）、react-dom（^19\.2\.7）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @audio-ui/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @audio-ui/react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @audio-ui/react 可以商用吗？

@audio-ui/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @audio-ui/react 的下载量有多少？

根据 npm 官方下载统计，@audio-ui/react 在 2026/10/07 – 2026/11/05 这 30 天内被下载 5,621 次，日均约 187 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @audio-ui/react 还在维护吗？

最新版本 0\.13\.0 发布于 2026/11/06（1 天前）；至今共发布 39 个版本，其中过去 12 个月发布了 39 个；首次发布于 2025/12/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。