# sound-ui

> Sound UI Components with React.

Latest version **0.8.0** (published 2024-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install sound-ui
pnpm add sound-ui
yarn add sound-ui
bun add sound-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2024-10-16 |
| First published | 2023-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 216.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Octerv |
| Maintainers | octerv |
| Keywords | UI, React, Sound, Audio, Waves |

## Links

- npm: https://www.npmjs.com/package/sound-ui
- Repository: https://github.com/octerv/sound-ui
- Issues: https://github.com/octerv/sound-ui/issues
- npm.io page: https://npm.io/package/sound-ui

## Recent versions

- 0.8.0 (latest) — 2024-10-16
- 0.7.2 — 2024-07-28
- 0.7.1 — 2024-07-25
- 0.7.0 — 2024-07-24
- 0.6.0 — 2024-07-24
- 0.5.2 — 2024-07-24
- 0.5.1 — 2024-07-23
- 0.4.0 — 2024-07-05
- 0.3.1 — 2024-01-20
- 0.3.0 — 2023-10-16
- 0.2.1 — 2023-06-06
- 0.2.0 — 2023-05-09
- 0.1.1 — 2023-05-07
- 0.0.2 — 2023-01-10
- 0.0.1 — 2023-01-10

## README

# Sound UI

Sound UI Components with React.

## Usage

### Waves

Display waves from audio file.

```
import { Waves } from "sound-ui";

export const Default = () => {
  const [dataUrl, setDataUrl] = useState("");
  const [normalize, setNormalize] = useState(false);

  const selectFile = (e: ChangeEvent<HTMLInputElement>) => {
    const files = e.currentTarget.files;
    if (!files || files?.length === 0) return;
    const file = files[0];
    const reader = new FileReader();
    reader.addEventListener(
      "load",
      () => {
        if (reader.result) {
          setDataUrl(reader.result.toString());
        }
      },
      false
    );
    if (file) {
      reader.readAsDataURL(file);
    }
  };

  const handleNormalize = () => {
    setNormalize(!normalize);
  };

  return (
    <>
      <input type="file" accept="audio/*" onChange={selectFile} />
      <button onClick={handleNormalize}>
        Normalize ({normalize ? "ON" : "OFF"})
      </button>
      <br />
      <Waves
        dataUrl={dataUrl}
        width={800}
        height={400}
        samplingLevel={0.01}
        normalize={normalize}
        selectable
      />
    </>
  );
};
```

#### Parameters

- dataUrl(require:string): set Data URL (start at "data:audio/mpeg;base64,...")
- width(require:number): set Component width
- height(require:number): set Component height
- samplingLevel(optional:number): detail of waves (max:0.001, othre:0.01 0.1 1)
- normalize(optional:boolean): set true to normalize waves
- selectable(optional:boolean): set true to select range on waves
- stereo(optional:boolean): set true, mixing two stereo waveforms into a single waveform
- setMaxArea(optinal:(area: number[])=>void): return Maximum section, array 0 is start second, array 1 is end second

## Preview

```
npm run preview
```

![View1](https://user-images.githubusercontent.com/103025781/211580349-fc17c7eb-d4e2-42e2-a78b-b0ed19369657.png)

---
_Source: https://npm.io/package/sound-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._