React-audio-player-component NPM

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)

screenshot 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