react-visual-audio-player v2.0.0

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

StyleProps

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,
  }}
/>