@chayns/react-audio-editor
Version:
Tool to edit audio tracks.
59 lines (42 loc) • 2.2 kB
Markdown
# @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