# @chayns/react-audio-editor

> Tool to edit audio tracks.

Latest version **0.0.2** (published 2019-04-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chayns/react-audio-editor
pnpm add @chayns/react-audio-editor
yarn add @chayns/react-audio-editor
bun add @chayns/react-audio-editor
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-04-29 |
| First published | 2019-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 77.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tobit.Software |
| Maintainers | braun-michael, jonasgossens, tobit.software |
| Keywords | tobit, chayns, audio, editor, audio-editor, web audio api, mp3 |

## Links

- npm: https://www.npmjs.com/package/@chayns/react-audio-editor
- npm.io page: https://npm.io/package/@chayns/react-audio-editor

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.8.4
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.4
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.1
- [inline-worker](https://npm.io/package/inline-worker.md) ^1.1.0
- [chayns-components](https://npm.io/package/chayns-components.md) ^4.5.4
- [@fortawesome/pro-light-svg-icons](https://npm.io/package/@fortawesome/pro-light-svg-icons.md) ^5.8.0
- [@fortawesome/pro-solid-svg-icons](https://npm.io/package/@fortawesome/pro-solid-svg-icons.md) ^5.8.0
- [@fortawesome/free-brands-svg-icons](https://npm.io/package/@fortawesome/free-brands-svg-icons.md) ^5.8.0
- [@fortawesome/pro-regular-svg-icons](https://npm.io/package/@fortawesome/pro-regular-svg-icons.md) ^5.8.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.0.2 (latest) — 2019-04-29
- 0.0.1 — 2019-04-02

## README

# @chayns/react-audio-editor

This audio editor allows the user to choose, edit and confirm an audio file.

Features:
- Choose a track using an file input
- Listen to the track
- Cut track
- Change volume
- Highpass and lowpass filter
- Save audio file as mp3


## Usage

To use the audio editor, you also have to use the chayns JS API and chayns CSS API. To getting started with the chayns APIs, follow [this guide](https://github.com/TobitSoftware/chayns-js/wiki/Getting-Started).

You have to install this package with `npm i -S @chayns/react-audio-editor`.

At first time the component needs to be imported:

```jsx
import AudioEditor from '@chayns/react-audio-editor';
```

After this, you can than use the `AudioEditor` in your react component like in the following example:

```jsx
<AudioEditor onConfirm={console.log} onClear={console.log}/>
```

### Properties
The following properties can be set on the `AudioEditor` component:

| **Property**            | **Description**                                                     | **Type** | **Default** |
| ----------------------- | ------------------------------------------------------------------- | -------- | ----------- |
| file                    | Initial chosen file. If not set, user has the possibility to choose a file. | File   | null  |
| onConfirm               | Function which will be called after user has saved the audio file.  | function | FileSaver.saveAs |
| onClear                 | Function which will be called when user clicks on the delete Icon.  | function | console.log |

## Development
1. Install dependencies with `npm i`
2. Start dev task with `npm start`
3. Link in an other project with `npm link chayns-audio-editor`

## ESLint
Check your code style with `npm run eslint` before publishing.

### Publish
1. Commit all changes
2. Bump version with 
    - `npm version patch` to increase patch version
    - `npm version minor` to increase minor version
    - `npm version major` to increase major version
3. Push your branch or branches and version tag.
4. Publish with `npm publish`

> **Note**: `npm version [...]` adds a git commit and a git tag

---
_Source: https://npm.io/package/@chayns/react-audio-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._