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:

npm install react-visual-audio-player

Usage

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

Import the Component

Import the AudioPlayer component and necessary styles in your component:

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

Use the Component

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

return (
  <AudioPlayer srcUrl={"https://example.com/lib/preview/mp3/sample-15s.mp3"} />
);

Props

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:

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