React Visual Audio Player is a simple and customizable audio player component for React applications that offers audio level visualizations.
You can install React Visual Audio Player via npm:
npm install react-visual-audio-playerTo use React Visual Audio Player in your React or Next.js application, follow these steps:
Import the AudioPlayer component and necessary styles in your component:
import { AudioPlayer } from "react-visual-audio-player";Use the AudioPlayer component in your JSX to display audio with visualizations:
return (
<AudioPlayer srcUrl={"https://example.com/lib/preview/mp3/sample-15s.mp3"} />
);The AudioPlayer component supports the following props for customization:
| 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. |
| 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. |
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,
}}
/>