Tool to edit audio tracks.

Usage no npm install needed!

<script type="module">
  import chaynsReactAudioEditor from 'https://cdn.skypack.dev/@chayns/react-audio-editor';



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


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


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}/>


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


  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


Check your code style with npm run eslint before publishing.


  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