React-audio-comments NPM

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.