1.2.0 • Published 4 years ago

react-modular-audio-player v1.2.0

Weekly downloads
185
License
ISC
Repository
github
Last release
4 years ago

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
  2. Props
  3. Rearrange Prop
  4. Component Styling

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 NameValue TypeDefault ValueisRequiredExplanation
audioFilesarray of objectsno default valueyesarray of audioFile objects following the pattern { src: "/required string pointing to audio file", title: "optional title of track", artist: "optional artist name"}
rearrangearray of objectsno default valuenosee more information about rearrange prop below
playerWidthstring"20rem"nosets the width of the player, can be set to any acceptable css unit
hideSeekingboolfalsenoprevents the seeking bar from being rendered
hideForwardboolfalsenoprevents the skip forward icon from being rendered
hideLoopboolfalsenoprevents the loop current track icon from being rendered
hideRewindboolfalsenoprevents the rewind/previous icon from being rendered
hideTimeboolfalsenoprevents the current time/duration from being rendered
hideNameboolfalsenoprevents the scrolling marquee that displays track name and artist from being rendered
loopPlaylistboolfalsenocauses the playlist to continue playing again after the last track finishes
sliderClassstring"slider"nosets the className of the volume and seeking input range elements for easier css styling
playIconstringincluded in modulenoaccepts a string referencing an img src that will be rendered as the default initial play icon
playHoverIconstringincluded in modulenoaccepts 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
pauseIconstringincluded in modulenoaccepts a string referencing an img src that will be rendered as the default pause icon
pauseHoverIconstringincluded in modulenoaccepts 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
forwardIconstringincluded in modulenoaccepts a string referencing an img src that will be rendered as the default forward icon
forwardHoverIconstringincluded in modulenoaccepts 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
rewindIconstringincluded in modulenoaccepts a string referencing an img src that will be rendered as the default rewind icon
rewindHoverIconstringincluded in modulenoaccepts 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
volumeIconstringincluded in modulenoaccepts a string referencing an img src that will be rendered as the default volume icon when track is not playing
volumeEngagedIconstringincluded in modulenoaccepts 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
muteIconstringincluded in modulenoaccepts a string referencing an img src that will be rendered as the default mute icon when track is not playing
muteEngagedIconstringincluded in modulenoaccepts 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
loopIconstringincluded in modulenoaccepts a string referencing an img src that will be rendered as the default loop icon
loopEngagedIconstringincluded in modulenoaccepts 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
iconSizestring"1rem"nocan be set to any acceptable css unit, icon images' heights are set to size entered, widths are set to auto
fontFamilystring"sans-serif"nocan be set to any acceptable css font-family, changes font of the scrolling title/artist marquee and time/duration
fontWeightstring"100"nocan be set to any acceptable css font-weight, changes font-weight of the scrolling title/artist marquee and time/duration
fontSizestring"small"nocan be set to any acceptable css font-size, changes font-size of the scrolling title/artist marquee and time/duration
fontColorstring"black"nocan 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

NameDescription
"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.

SelectorInfo
#play-iconrequires !important attribute, includes pause icon
#rewind-iconrequires !important attribute
#forward-iconrequires !important attribute
#volume-iconrequires !important attribute
#loop-iconrequires !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
}
1.2.0

4 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.20

6 years ago

1.0.19

6 years ago

1.0.18

6 years ago

1.0.17

6 years ago

1.0.16

6 years ago

1.0.15

6 years ago

1.0.14

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago