UNPKG

@chayns/react-audio-editor

Version:

Tool to edit audio tracks.

59 lines (42 loc) 2.2 kB
# @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