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