React Audio Comments

React components library with graphical Audio representation and comments.

Description

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.

Installation

NPM package:

yarn i react-audio-comments

Also you can modify project files directly, project built using RollupJS module bundler.

Example

To run example:

• go to /example folder
• yarn i
• yarn start
• open localhost:3000

Usage

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
)

props

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.

Comments usage

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.

Main Technologies and libraries

• React
• Rollup.JS
• Webpack 4
• ESLint
• Prettier
• Babel

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

Vlad Morzhanov

License

(The MIT License)

Copyright (c) 2018 Vlad Morzhanov. You can review license in the LICENSE file.