React Modular Audio Player

React Audio Player Component for HTML5 Audio: Customizable, Modular, & Styleable

This is the react audio player solution you've been looking for! It looks great with almost no learning curve, and setup is fast 'n easy. If you want more options, it's highly customizable and easily styled.

Check out examples with accompanying code snippets.

Features

• Single component, ready for use instantly
• Customizable, modular, and styleable
• Add your own icons, change the order, decide which subcomponents/icons are rendered

Table of Contents

1. Setup
   • Quick Setup
2. Props
3. Rearrange Prop
   • Subcomponents
   • Tier Object
   • Tier Example
   • Rearrange Styling
     • Default Tier Styling
     • Default InnerComponent Styling
   • Rearrange Example
4. Component Styling
   • Main AudioPlayer Component
   • Icons
   • Range Inputs

Setup

Only required prop is an ARRAY of audioFile OBJECTs, which follows the pattern

[{ src: "/linkToAudioFile",
  title: "Toxic",
  artist: "Britney Spears" }]

Within the audioFile object, only src is required, title and artist are optional. If you only want to include a single piece of text as the name, set it as the title with no artist.

Quick setup with this simple example

import AudioPlayer from 'react-modular-audio-player';

let playlist = [
  { src: "/music.mp3",
    title: "Song",
    artist: "Singer" },
  { src: "/moreMusic.mp3",
    title: "Another Song",
    artist: "Another Singer" }
];

//inside render() function
<AudioPlayer 
  audioFiles={playlist}
/>

Acceptable Props

Prop Name	Value Type	Default Value	isRequired	Explanation
audioFiles	array of objects	no default value	yes	array of audioFile objects following the pattern { src: "/required string pointing to audio file", title: "optional title of track", artist: "optional artist name"}
rearrange	array of objects	no default value	no	see more information about rearrange prop below
playerWidth	string	"20rem"	no	sets the width of the player, can be set to any acceptable css unit
hideSeeking	bool	false	no	prevents the seeking bar from being rendered
hideForward	bool	false	no	prevents the skip forward icon from being rendered
hideLoop	bool	false	no	prevents the loop current track icon from being rendered
hideRewind	bool	false	no	prevents the rewind/previous icon from being rendered
hideTime	bool	false	no	prevents the current time/duration from being rendered
hideName	bool	false	no	prevents the scrolling marquee that displays track name and artist from being rendered
loopPlaylist	bool	false	no	causes the playlist to continue playing again after the last track finishes
sliderClass	string	"slider"	no	sets the className of the volume and seeking input range elements for easier css styling
playIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the default initial play icon
playHoverIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the play icon when mouse is hovering, note: enter the same string as playIcon if you don't want the icon to change when hovering
pauseIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the default pause icon
pauseHoverIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the pause icon when mouse is hovering, note: enter the same string as pauseIcon if you don't want the icon to change when hovering
forwardIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the default forward icon
forwardHoverIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the forward icon when mouse is hovering, note: enter the same string as forwardIcon if you don't want the icon to change when hovering
rewindIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the default rewind icon
rewindHoverIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the rewind icon when mouse is hovering, note: enter the same string as rewindIcon if you don't want the icon to change when hovering
volumeIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the default volume icon when track is not playing
volumeEngagedIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the volume icon when track is playing, note: enter the same string as volumeIcon if you don't want the icon to change when track is playing
muteIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the default mute icon when track is not playing
muteEngagedIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the mute icon when track is playing, note: enter the same string as muteIcon if you don't want the icon to change when track is playing
loopIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the default loop icon
loopEngagedIcon	string	included in module	no	accepts a string referencing an img src that will be rendered as the loop icon when looping is engaged or mouse is hovering over default loop icon
iconSize	string	"1rem"	no	can be set to any acceptable css unit, icon images' heights are set to size entered, widths are set to auto
fontFamily	string	"sans-serif"	no	can be set to any acceptable css font-family, changes font of the scrolling title/artist marquee and time/duration
fontWeight	string	"100"	no	can be set to any acceptable css font-weight, changes font-weight of the scrolling title/artist marquee and time/duration
fontSize	string	"small"	no	can be set to any acceptable css font-size, changes font-size of the scrolling title/artist marquee and time/duration
fontColor	string	"black"	no	can be set to any acceptable css color, changes color of the scrolling title/artist marquee and time/duration fonts

Rearrange Prop

The rearrange prop allows you to render subcomponents in any order you wish. It also allows you to build your audioplayer in multiple columns called tiers.

The rearrange prop allows you to arrange the following subcomponents. All of these subcomponents are referenced by a string name.

Available Subcomponents

Name	Description
"play"	renders the play icon
"rewind"	renders the rewind/previous icon
"forward"	renders the skip/forward icon
"loop"	renders the loop icon
"name"	renders the scrolling title/artist marquee
"time"	renders the current time/duration
"seek"	renders the seeking range input
"volume"	renders the volume/mute icon and corresponding range input

Tier Object

The rearrange prop accepts an array of objects, representing tiers. The tier object follows the pattern below.

//Single Tier Object Shape
{
  className: "string",
  style: {JSXstyleElement: "value"},
  innerComponents: [
    {
      type: "subcomponent string name",
      style: {JSXstyleElement: "value", JSXstyleElement: "value"}
    },
    {
      type: "another subcomponent string name",
      style: {JSXstyleElement: "value"}
    },
  ]
}

Example Tier Object

Below is an example tier rendering the play icon and volume icon/range input with comments.

{
  //className supplies a CSS class to the div containing the given subcomponents
  className: "first-tier",

  //style is an optional property
  //style appends and rewrites the default styling options for the current tier
  //style accepts an object with any JSX inline style properties
  style: {marginBottom: "0.3em"}

  //innerComponents is an array of objects that arrange the desired subcomponents
  innerComponents: [
    {
      //type is a string that will render a specific subcomponent
      type: "play",

      //style is an optional property
      //style appends and rewrites the default styling options for the div containing the subcomponent
      //style accepts an object with any JSX inline style properties
      style: {width: "fit-content"}
    },
    {
      type: "volume"
    }
  ]
}

Default Styling When Using rearrange Prop

Tiers have two default inline style properties, tier and innerComponent. Both of these JSX inline styles can be appended or rewritten with the style properties available within the rearrange prop.

Default Tier Styling

The tier div itself, which contains all the tier's innerComponents, has the following default style

defaultTierStyle = {
  display: "flex", 
  flexDirection: "row", 
  justifyContent: "left",
  alignContent: "left",
  width: "100%"
}

Default innerComponent Styling

The innerComponent div, which contains a specific subcomponent, has the following default style

defaultInnerComponentStyle = {
  display: "flex", 
  alignItems: "center", 
  justifyContent: "left",
  width: "100%" 
}

Example AudioPlayer using rearrange

Below is an example of a custom arranged AudioPlayer with two tiers. The first tier contains the play, rewind, forward, and volume innerComponents. The second tier contains the time and seek innerComponents. It appears like this:

let rearrangedPlayer = [
  {
    className: "tier-top",
    style: {margin: "0.3rem"},
    innerComponents: [
      { 
        type: "play",
        style: {width: "fit-content"}
      },
      {
        type: "rewind",
        style: {width: "fit-content"}
      },
      {
        type: "forward",
        style: {width: "fit-content"}
      },
      {
        type: "volume"
      }
    ]
  },
  {
    className: "tier-bottom",
    style: {margin: "0rem 0.3rem 0.3rem 0.3rem"},
    innerComponents: [
      {
        type: "time",
        style: {width: "fit-content"}
      },
      {
        type: "seek"
      }
    ]
  }
]

//render
<AudioPlayer
  rearrange={rearrangedPlayer}
  audioFiles={anArrayOfAudioFileObjects}
  playerWidth="10em"
  fontSize="1.5rem"
  iconSize="1.5rem"
/>

Styling

AudioPlayer component

To style the whole AudioPlayer component, you can target the class 'audio-player'.

Icons

The icon sizes are set by the iconSize prop, but individual icon sizes and styling can be overwritten by the following selectors.

Selector	Info
#play-icon	requires !important attribute, includes pause icon
#rewind-icon	requires !important attribute
#forward-icon	requires !important attribute
#volume-icon	requires !important attribute
#loop-icon	requires !important attribute

Range-input

To style the range-input for the volume and seek subcomponents, provide a class selector name for the sliderClass prop (not 'slider', which will have the default styling). I recommend using http://danielstern.ca/range.css/#/ to generate your desired slider style. Include the class name you provided as a prop in the Namespace input at the bottom of the page under 'General'. Copy the generated code into your style sheet and Voila!, a new slider style.

//in render()
<AudioPlayer
  sliderClass="my-slider"/>

//in style sheet 
input[type=range].my-slider {
  //style
}
input[type=range].my-slider:focus {
  //style
}
input[type=range].my-slider::-webkit-slider-runnable-track {
  //style
}
input[type=range].my-slider::-webkit-slider-thumb {
  //style
}
input[type=range].my-slider:focus::-webkit-slider-runnable-track {
  //style
}
input[type=range].my-slider::-moz-range-track {
  //style
}
input[type=range].my-slider::-moz-range-thumb {
  //style
}
input[type=range].my-slider::-ms-track {
  //style
}
input[type=range].my-slider::-ms-fill-lower {
  //style
}
input[type=range].my-slider::-ms-fill-upper {
  //style
}
input[type=range].my-slider::-ms-thumb {
  //style
}
input[type=range].my-slider:focus::-ms-fill-lower {
  //style
}
input[type=range].my-slider:focus::-ms-fill-upper {
  //style
}