0.1.1 • Published 2 years ago
react-audio-waveform-nextjs v0.1.1
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 |