https://github.com/morzhanov/react-audio-comments

React components library with graphical Audio representation and comments.
https://github.com/morzhanov/react-audio-comments

audio comments components library npm react rollup-js yarn

Last synced: 8 days ago
JSON representation

React components library with graphical Audio representation and comments.

• Host: GitHub
• URL: https://github.com/morzhanov/react-audio-comments
• Owner: morzhanov
• License: mit
• Created: 2018-12-11T15:50:56.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-30T12:24:43.000Z (over 5 years ago)
• Last Synced: 2024-11-03T14:03:40.372Z (12 days ago)
• Topics: audio, comments, components, library, npm, react, rollup-js, yarn
• Language: JavaScript
• Homepage:
• Size: 281 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Audio Comments

#### React components library with graphical Audio representation and comments.

[![npm version](https://badge.fury.io/js/react-audio-comments.svg)](https://badge.fury.io/js/react-audio-comments)

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/morzhanov/react-audio-comments/issues)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)



## 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(

  


    

  
,

  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

## More

If you would like to edit images or video files please take a look on react-media-editor library.

## 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.