NS React Visual Audio Player

React Visual Audio Player is a simple and customizable audio player component for React applications that offers audio level visualizations.

Installation

You can install React Visual Audio Player via npm:

``bash
npm install react-visual-audio-player
`

Usage

To use React Visual Audio Player in your React or Next.js application, follow these steps:

$3

Import the AudioPlayer component and necessary styles in your component:

`jsx
import { AudioPlayer } from "react-visual-audio-player";
`

$3

Use the AudioPlayer component in your JSX to display audio with visualizations:

`jsx
return (

);
`

$3

The AudioPlayer component supports the following props for customization:

#### AudioPlayerProps
| Prop | Type | Default | Description |
|-------------------|-----------------------------|---------------|----------------------------------------------------------------------------|
| srcfile | File or Blob or undefined | undefined | Accepts a file or blob as the audio source. |
| srcUrl | URL or string | undefined | The URL string pointing to the audio source. |
| downloadOption | boolean | false | Displays a download button if set to true. |
| minimal | boolean | false | If true, renders a minimal version of the player. |
| loadingComponent| () => ReactNode | undefined | A custom loading component to display while the audio loads. |
| style | StyleProps | {} | Customizable styles for the audio player and visualizations. |

#### StyleProps

| Prop | Type | Default | Description |
|----------|-----------|---------|-------------------------------------------------------|
| width | number | 400 | The width of the audio player visualization in pixel. |
| height | number | 100 | The height of the audio player visualization in pixel.|
| lineGap| number | 2 | The gap between bars in the visualization in pixel. |
| barColor| string | #000 | The color of the bars in the visualization. |
| barWidth| number | 2 | The width of each bar in the visualization in pixel. |

Example with Props

Here is an example of the AudioPlayer component with customized props:

`jsx
srcUrl="https://example.com/audio/sample.mp3"
downloadOption={true}
minimal={false}
style={{
width: 500,
height: 150,
lineGap: 4,
barColor: "#ff6347",
barWidth: 3,
}}
/>
``