react-audio-player-component-z
v1.2.4
Published
A mobile-friendly audio player for React with a modern look and convenient usage.
Downloads
76
Maintainers
Keywords
Readme
react-audio-player-component
A mobile-friendly audio player for React with a modern look and convenient usage.
Installation
npm install react-audio-player-component
AudioPlayer Component (Example)
Minimal Audio player
import React, { useState } from 'react';
import { AudioPlayer } from 'react-audio-player-component';
const Player = () => {
return (
<AudioPlayer
src="audios/test.mp3"
minimal={false}
width={350}
trackHeight={75}
barWidth={1}
gap={1}
visualise={true}
backgroundColor="#FFF8DE"
barColor="#C1D0B5"
barPlayedColor="#99A98F"
skipDuration={2}
showLoopOption={true}
showVolumeControl={true}
// seekBarColor="purple"
// volumeControlColor="blue"
// hideSeekBar={true}
// hideTrackKnobWhenPlaying={true}
/>
)
}
Audio element native props
| Props | Description | Default | Optional |
| :------------ |:--------------- |:--------------- | :--------------- |
| src
| The address or URL of the a audio resource that is to be considered | N/A | No |
| volume
| Initial volume level for the audio, minimum being 0
, maximum being 1
| 0.75
| Yes |
| loop
| Sets a flag to specify whether playback should restart after it completes | false
| Yes |
| muted
| Sets a flag that indicates whether the audio is muted | false
| Yes |
| autoplay
| Sets a value that indicates whether to start playing the media automatically | false
| Yes |
| crossOrigin
| The CORS setting for this media element. MDN Reference | null
| Yes |
| autoplay
| Sets a value indicating what data should be preloaded, if any. Allowed values ""
, "none"
, "metadata"
, "auto"
| ""
| Yes |
| playbackRate
| Sets the rate at which media is being played back | 1.0
| Yes |
Audio element events
AudioPlayer
supports all the events for HTMLMediaElement
(MDN Reference). All of the events listed in the MDN docs can be passed as a prop to the AudioPlayer
Audio player props
| Props | Description | Default | Optional |
| :------------ |:--------------- |:--------------- | :--------------- |
| minimal
| Displays a minimal version of the audio player, with only the play/pause button, track bar and timestamp | false
| Yes |
| width
| Width of the audio player | N/A | No |
| barWidth
| Width of each individual bar in the visualization | 2
| Yes |
| gap
| Gap between each bar in the visualization | 1
| Yes |
| visualise
| Represents whether the audio visualization (waveform) should be displayed | true
| Yes |
| trackHeight
| Height of the visualization / trackbar area | 75
| Yes |
| backgroundColor
| Background color for the audio player | #EFEFEF
| Yes |
| barColor
| Color for the bars in the visualization. This only applies to bars that have not currently been played | "rgb(184, 184, 184)""
| Yes |
| barPlayedColor
| Color for the bars that have been played | "rgb(160, 198, 255)""
| Yes |
| allowSkip
| Represents whether the skip forward/backward options should be displayed | true
| Yes |
| skipDuration
| The number of seconds to skip forward/backward | 5
| Yes |
| showLoopOption
| Represents whether to show the loop options | true
| Yes |
| showVolumeControl
| Represents whether the volume control should be shown | true
| Yes |
| seekBarColor
| Color for the audio seek bar | rgba(140, 140, 140)
| Yes |
| volumeControlColor
| Color for the volumn control | rgba(140, 140, 140)
| Yes |
| hideSeekBar
| Hides the seek bar if set to true
, the audio will still be seekable | false
| Yes |
| hideSeekKnobWhenPlaying
| Hides the seek knob when audio is playing if set to true
| false
| Yes |