2.0.0 • Published 7 months ago

react-visual-audio-player v2.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
7 months ago

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

PropTypeDefaultDescription
srcfileFile or Blob or undefinedundefinedAccepts a file or blob as the audio source.
srcUrlURL or stringundefinedThe URL string pointing to the audio source.
downloadOptionbooleanfalseDisplays a download button if set to true.
minimalbooleanfalseIf true, renders a minimal version of the player.
loadingComponent() => ReactNodeundefinedA custom loading component to display while the audio loads.
styleStyleProps{}Customizable styles for the audio player and visualizations.

StyleProps

PropTypeDefaultDescription
widthnumber400The width of the audio player visualization in pixel.
heightnumber100The height of the audio player visualization in pixel.
lineGapnumber2The gap between bars in the visualization in pixel.
barColorstring#000The color of the bars in the visualization.
barWidthnumber2The 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,
  }}
/>
2.0.0

7 months ago

1.3.10

7 months ago

1.3.9

7 months ago

1.3.8

7 months ago

1.3.7

7 months ago

1.3.6

7 months ago

1.3.5

7 months ago

1.3.4

7 months ago

1.3.3

7 months ago

1.3.2

7 months ago

1.3.1

7 months ago

1.3.0

7 months ago

1.2.0

7 months ago

1.1.9

7 months ago

1.1.8

7 months ago

1.1.7

7 months ago

1.1.6

7 months ago

1.1.5

7 months ago

1.1.3

7 months ago

1.1.2

7 months ago

1.1.1

7 months ago

1.1.0

7 months ago

1.0.9

7 months ago

1.0.8

7 months ago

1.0.7

7 months ago

1.0.6

7 months ago

1.0.5

7 months ago

1.0.4

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago