React Wavy Audio

React player library to display audio with waveform

This package uses wavesurfer.js under the hood and provides an easier way to use it in react applications. It is a wrapper for wavesurfer.js, you can use it is a reference or use it directly in your react apps.

It covers basic features, but if you want something else supported, please feel free to open an issue, and contribute. 😄

If you find any issues, please do let me know and we can fix it as soon as possible :)

Install

npm install --save react-wavy-audio

Usage

Check Example Folder for a basic example

Example folder deployed on Github actions -> https://kartik-budhiraja.github.io/react-wavy-audio/

CodeSandbox -> https://codesandbox.io/s/react-wavy-audio-example-d6hin

Props

| Props | Type | Default | Description | |---|---|---| --- |
| playBackSpeedOptions | Array | [0.5, 1, 1.2, 1.5, 2] | Array of valid playback speed options for the audio | | hideWave | bool | false | Hide the wave formation | | waveStyles | object | { responsive: true } | The list of paramterers which can be found here to change default settings and style of the waveplayer | | waveJson | Json | N/A | You can use the (audiowaveform)[https://github.com/bbc/audiowaveform] to generate the waveform data on server and pass it through this props to the player. This recommended for bigger audio files where waveform generation could take some time or even not load on its own. | | audioUrl | url | N/A | The url to load audio from | | zoom | number | 0 | Widens the waveform in display, Try it out in example | | imageUrl | url | N/A | The image to be shown right next to the player. It is not required | | events | Json | N/A | You can pass a json object with events available here . Use wavesurfer for manipulation. Only on events supported for now. Example: {'pause' : () => { wavesurfer.params.container.style.opacity = 0.9} } | hideImage | bool | false | To hide the image if imageUrl is present | | containerStyles | Style object | Check Below | Styles for the container of player

                    {
                        display: "flex",
                        flexDirection: "row",
                        maxWidth: "50vh",
                        marginLeft: "auto",
                        marginRight: "auto"
                    }

Methods

The list of wavesurfer.js supported methods can be find (here)[http://wavesurfer-js.org/docs/methods.html]. Use getWaveSurferInstance to get the instance reference and call the methods according to your requirements. :)

License

MIT © kartik-budhiraja