0.0.5 • Published 5 years ago
react-audio-waveform v0.0.5
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"]]}
/>
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 |