Use this library to add graphical audio files representations in your React application.
The second part of this library provides components to split and comment your audio tracks, each comment bined to specific point on audio track and you can change audio progress by clicking on comments items.
NPM package:
yarn i react-audio-comments
Also you can modify project files directly, project built using RollupJS module bundler.
To run example:
- go to /example folder
- yarn i
- yarn start
- open localhost:3000
Here is an example how to use AudioComments compoent within you application:
import React from 'react'
import { render } from 'react-dom'
import AudioComments from 'react-audio-comments'
const rootNode = document.getElementById('app')
render(
<div className="page-wrapper editor">
<AudioComments
enableComments
src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"
/>
</div>,
rootNode
)
src - path to audio source file
enableComments - enable audio comments components; this components contains CommantsList and AddCommentPopup. Every comment bined to specific point on the audio graphic. By clicking on specific comment playback will jump to bined part of the song.
To add comment use this steps:
- click on specific point in audio graph
- click on
Add Comment
button - Enter comment in popup and click
Add
- Comment will be added to comments list. If you click on specific comment playback will jump to bined part of the audio.
If you would like to edit images or video files please take a look on react-media-editor library.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Vlad Morzhanov
Copyright (c) 2018 Vlad Morzhanov. You can review license in the LICENSE file.