waveform

Draw audio waveforms

Table of Contents

• waveform
  • Table of Contents
  • Installation
  • API documentation
  • Examples
  • Demos

Installation

To install, you can use npm or yarn:

$ npm install @zcool/waveform
$ yarn add @zcool/waveform

API documentation

Name	Type	Default	Description
data	number[]	null	waveform data
progress	float	null	progress of playback. 0-1
height	number	44	waveform height
theme	Object	/src/theme.ts	waveform theme
onMouseUp	(progress: number) => void	null	waveform click event
onGhostProgressChange	(ghostProgress: number) => void	null	waveform ghostProgressChange callback
renderGhostProgress	(left: number, ghostProgress: number) => React.ReactNode	() => null	waveform ghostProgressChange renderer
showGhostProgress	boolean	false	If showGhostProgress is true, the waveform will show a ghostProgress when mouse move

Examples

Here is a simple example of waveform being used in an app:

importReactfrom'react'importReactDOMfrom'react-dom'importWaveformfrom'@zcool/waveform'constgetAudioBuffer=asyncpath=>{constresponse=awaitfetch(path)constaudioData=awaitresponse.arrayBuffer()constcontext=getContext()returnnewPromise(resolve=>{context.decodeAudioData(audioData,buffer=>{returnresolve(buffer)})})}/** * Get window audio context */constgetContext=()=>{window.AudioContext=window.AudioContext||window.webkitAudioContext||window.mozAudioContext||window.oAudioContextconstcontext=newAudioContext()returncontext}functionApp(){const[waveform,setWaveform]=useState([])functionhandleChange(e){constfiles=e.target.filesif(files.length>0){constfile=window.URL.createObjectURL(files[0])getAudioBuffer(file).then(buffer=>{setWaveform(Array.from(buffer.getChannelData(0)))forceUpdate()})}}return(<div><inputtype="file"onChange={handleChange}style={{marginBottom: 24}}/>{waveform.length>0&&<Waveformprogress={0.5}data={waveform}/>}</div>)}ReactDOM.render(<App/>,appElement)

You can find more examples in the examples directory, which you can run in a local development server using npm start or yarn run start.

Demos

There are several demos hosted on CodeSandbox which demonstrate various features of @zcool/waveform:

• Minimal example