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

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

At first time the component needs to be imported:

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

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

<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