faizanbhat / react-audio-waveform

React component for generating an audio waveform from an array of peak data

react-audio-waveform

Render waveforms from arrays of peak data generated by Audio Waveform quickly and easily.

Installation

npm install react-audio-waveform --save

or

yarn add react-audio-waveform

Usage

import Waveform from "react-audio-waveform"

// ...

<Waveform
  barWidth={4}
  peaks={this.props.peaks}
  height={200}
  pos={this.props.pos}
  duration={210}
  onClick={this.handleClick}
  color="#676767"
  progressGradientColors={[[0, "#888"], [1, "#aaa"]]}
  transitionDuration={300}
/>

Options

Parameter	Description	Permitted Values	Default
barWidth	Width of the peaks	Number	undefined
color	The main waveform's color	String (hex value)	undefined
duration	Audio length in seconds	Number	undefined
gradientColors	The main waveform's color as an array of arrays containing start positions (from 0 to 1) and colors; example: [[0, "#888888"], [1, "#aaaaaa"]]	Array	undefined
height	The waveform's height	Integer	undefined
onClick	Handler for seeking. This is a function with a single argument of seconds as a number.	function	() => {}
peaks	Array of peaks.	Array	undefined
pixelRatio	Determines how many pixels to fit inside a single pixel space.	Number	The current device's pixel ratio
pos	The audio's current position in seconds	Number	undefined
progressColor	The progress waveform's color	String (hex value)	undefined
progressGradientColors	The progress waveform's color as an array of arrays containing start positions (from 0 to 1) and colors; example: [[0, "#888888"], [1, "#aaaaaa"]]	Array	undefined
transitionDuration	Length in milliseconds of the waveform animation transition	Number	200