# @dschoon/react-waves 中文文档

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

版本：4\.0\.3
npm 元数据更新时间：2022-04-05T05:44:13.237Z
中文译文更新时间：2026-11-13T05:45:18.155Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dschoon/react-waves
原文对照：https://npmcn.com/package/%40dschoon/react-waves/?lang=original
项目主页：https://dschoon.github.io/react-waves
源码仓库：https://github.com/dschoon/react-waves

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

- 包体积（解压后）：1.8 MB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=8
- 运行依赖：6 个
- peer 依赖：prop-types ^15\.7\.2，react ^15\.0\.0 \|\| ^16\.0\.0 \|\| ^17\.0\.0，react-dom ^15\.0\.0 \|\| ^16\.0\.0 \|\| ^17\.0\.0
- 首次发布：2018-12-13T15:00:26.027Z
- 最新版本发布：2020-11-30T19:17:07.498Z
- 近 30 天下载量：2183（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 0 个）

## 中文简介

为wasurfer.js 执行组件包装

## 安装

```sh
npm install @dschoon/react-waves
```

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

## README

# 反弹窗口

反应组件包装 [Vavesurfer.js (英语)](http://wavesurfer-js.org/)

[![NPM](https://img.shields.io/npm/v/@dschoon/react-waves.svg)](https://www.npmjs.com/package/@dschoon/react-waves) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com/) [![CircleCI](https://circleci.com/gh/dschoon/react-waves.svg?style=svg)](https://circleci.com/gh/dschoon/react-waves)

#### 背景情况

本构成部分最初以在2008年1月1日至12月31日期间开展的工作为基础 [反应波突起器](https://github.com/mspae/react-wavesurfer) 以 [翻译:](https://github.com/mspae) (和 [其他人员](https://npmcn.com/package/%40dschoon/react-waves/\(https://github.com/mspae/react-wavesurfer/graphs/contributors\))) (中文(简体) ). 在Wowsurfer-js发布第2版后,反应-波浪预测变得无法维持后,我决定开始我自己的版本比较安全,我对这个版本有更好的控制.

#### 版本4.x

使这个组件与底部相对应 [(原始内容存档于2018-03-21). wasurfer.js](https://github.com/katspaugh/wavesurfer.js) 我决定跳过第二版 然后直接转到第三版 随着Wasurfer现在进入第4版,我们做了必要的更新,现在也在v4上.

#### 问题

请报告任何 [问题](https://github.com/dschoon/react-waves/issues) 你遇到,我会尽力去修理.

* * *

## 实例

![ReactWaves](https://npmcn.com/package/%40dschoon/react-waves/example/public/react-waves.jpg)

以下是一个基本演示,示例代码包含在这个repo中:

-   **[演示](https://dschoon.github.io/react-waves/)**
-   **[基本示例](https://github.com/dschoon/react-waves/blob/master/example/src/components/BasicExample.js)**
-   **[麦克风插件示例](https://github.com/dschoon/react-waves/blob/master/example/src/components/MicrophoneExample.js)**
-   **[区域插件示例](https://github.com/dschoon/react-waves/blob/master/example/src/components/RegionsExample.js)**
-   **[时间线示例](https://github.com/dschoon/react-waves/blob/master/example/src/components/TimelineExample.js)**
-   **[大文件示例](https://github.com/dschoon/react-waves/blob/master/example/src/components/LargeFilePeaksExample.js)**
-   **[生成 PCM 数据示例](https://github.com/dschoon/react-waves/blob/master/example/src/components/GetPeaksExample.js)**
-   **[光谱示例](https://github.com/dschoon/react-waves/blob/master/example/src/components/SpectrogramExample.js)**

以下是我使用这个代码的个人项目的例子:

-   **[Casts.co (英语)](https://pod.casts.co/)** (原缩写)
-   **[剪贴板播放器 (Demo)](https://dschoon.github.io/clipp-player)**

## 安装

```bash
npm install @dschoon/react-waves
```

或者说

```bash
yarn add @dschoon/react-waves
```

## 基本示例

```jsx
import React from "react";
import ReactWaves from "@dschoon/react-waves";

import africa from "../audio/africa.mp3";

export default class BasicExample extends React.Component {
  state = {
    playing: false,
  };

  render() {
    return (
      <div className={"container example"}>
        <div
          className="play button"
          onClick={() => {
            this.setState({ playing: !this.state.playing });
          }}
        >
          {!this.state.playing ? "▶" : "■"}
        </div>
        <ReactWaves
          audioFile={africa}
          className={"react-waves"}
          options={{
            barHeight: 2,
            cursorWidth: 0,
            height: 200,
            hideScrollbar: true,
            progressColor: "#EC407A",
            responsive: true,
            waveColor: "#D1D6DA",
          }}
          volume={1}
          zoom={1}
          playing={this.state.playing}
        />
      </div>
    );
  }
}
```

## 可用的道具

```jsx
props = {
  playing: PropTypes.bool,
  pos: PropTypes.number,
  audioFile: (props, propName, componentName) => {
    const prop = props[propName];
    if (
      prop &&
      typeof prop !== "string" &&
      !(prop instanceof window.Blob) &&
      !(prop instanceof window.File)
    ) {
      return new Error(`Invalid ${propName} supplied to ${componentName}
        expected either string or file/blob`);
    }

    return null;
  },

  mediaElt: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.instanceOf(window.HTMLElement),
  ]),
  audioPeaks: PropTypes.array,
  volume: PropTypes.number,
  zoom: PropTypes.number,
  onPosChange: PropTypes.func,
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
  options: PropTypes.shape({
    audioRate: PropTypes.number,
    audioContext: PropTypes.object,
    audioScriptProcessor: PropTypes.object,
    autoCenter: PropTypes.bool,
    backend: PropTypes.oneOf([
      "WebAudio",
      "MediaElement",
      "MediaElementWebAudio",
    ]),
    barGap: positiveIntegerProptype,
    barHeight: positiveIntegerProptype,
    barRadius: positiveIntegerProptype,
    barWidth: (props, propName, componentName) => {
      const prop = props[propName];
      if (prop !== undefined && typeof prop !== "number") {
        return new Error(`Invalid ${propName} supplied to ${componentName}
          expected either undefined or number`);
      }

      return null;
    },
    closeAudioContext: PropTypes.bool,
    cursorColor: PropTypes.string,
    cursorWidth: positiveIntegerProptype,
    fillParent: PropTypes.bool,
    forceDecode: PropTypes.bool,
    height: positiveIntegerProptype,
    hideScrollbar: PropTypes.bool,
    interact: PropTypes.bool,
    loopSelection: PropTypes.bool,
    maxCanvasWidth: positiveIntegerProptype,
    mediaControls: PropTypes.bool,
    mediaType: PropTypes.oneOf(["audio", "video"]),
    minPxPerSec: positiveIntegerProptype,
    normalize: PropTypes.bool,
    partialRender: PropTypes.bool,
    pixelRatio: PropTypes.number,
    progressColor: PropTypes.string,
    removeMediaElementOnDestroy: PropTypes.bool,
    renderer: PropTypes.object,
    responsive: PropTypes.bool,
    scrollParent: PropTypes.bool,
    skipLength: PropTypes.number,
    splitChannels: PropTypes.bool,
    waveColor: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.instanceOf(window.CanvasGradient),
    ]),
    xhr: PropTypes.object,
  }),
  spectrogramOptions: PropTypes.object,
  timelineOptions: PropTypes.object,
};
```

## 许可证

麻省理工学院 [丹·肖恩马克](https://schoon.me/) [(gi)](https://github.com/dschoon)

_最后更新:2020年11月11日_

## 常见问题

### @dschoon/react-waves 是什么？

为wasurfer\.js 执行组件包装

### 如何安装 @dschoon/react-waves？

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

### @dschoon/react-waves 支持 TypeScript 吗？

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

### @dschoon/react-waves 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dschoon/react-waves 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @dschoon/react-waves 可以商用吗？

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

### @dschoon/react-waves 的下载量有多少？

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

### @dschoon/react-waves 还在维护吗？

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