# @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