@chayns/react-audio-editor

chayns-audio-editor

The chayns-audio-editor allows the user to choose, edit and save an audio file.

Usage

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

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

import AudioEditor from 'chayns-audio-editor';

<Social
    <AudioEditor onRemove={console.log} onSave={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
onSave	Function which will be called after user has saved the audio file.	function	FileSaver.saveAs
onRemove	Function which will be called when user clicks on the delete Icon.	function	console.log

Browser compatibility

The chayns-audio-editor has been developed with Google Chrome. For this, all features are working and there are no known issues.

Browser	Max playback rate	Known issues
Chrome 72	16x	-
Firefox 65	4x	-
Safari 12	1x	You don't hear anything. The spectrum can't be shown because it's not allowed to start an audio player without a click.
Edge 17	1x	Downloaded Files have no name
IE 11	-	IE don't supports the web audio API. You can only choose a mp3 file.
Chrome Mobile 72	16x	The exported File has a bad quality.
Firefox Mobile 65	4x	The storage process does not end.
Safari Mobile	1x	On iOS, you are not able to choose an audio file.

The maximum playback rate is used to generate the spectrum.

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

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