react-cl-audio-player

A simple audio player with ReactJS and CSS3.

Inspiration: Thanks Rovane Durso

TODO

• shuffle
• mute/unmute
• repeat song
• cover
• play/pause song
• prev/next song
• Drag n Drop of the songs
• Better volume control
• List of the songs
• Drag of the progress bar

Demo & Examples

Live demo: http://cezarsmpio.github.io/react-cl-audio-player/

To run it on your local environment:

Using yarn

yarn install
yarn start
yarn build // to build

Using npm

npm install
npm run start
npm run build // to build

Then open localhost:3000.

Installation

npm install react-cl-audio-player --save

Usage

import AudioPlayer from 'react-cl-audio-player';
 
<AudioPlayer
  songs={songs}
  autoplay
/>

Properties

propTypes = {
  songs: PropTypes.array.isRequired,
  autoplay: PropTypes.bool,
  onTimeUpdate: PropTypes.func,
  onEnded: PropTypes.func,
  onError: PropTypes.func,
  onPlay: PropTypes.func,
  onPause: PropTypes.func,
  onPrevious: PropTypes.func,
  onNext: PropTypes.func,
};

Songs model:

const songs = [
  {
    url: 'path/to/mp3',
    cover: 'path/to/jpeg',
    artist: {
      name: 'Metallica',
      song: 'Fuel'
    }
  },
  {
    url: 'path/to/your/mp3',
    artist: {
      name: 'X Japan',
      song: 'Art of Life'
    }
  }
];
 
// Then call
<CLAudioPlayer
  songs={songs}
  autoplay
/>

CSS classes

• .no-height - A helper class for songs without covers
• .player-container
• .player-cover
• .artist-info
• .artist-name
• .artist-song-name
• .player-progress-container
• .player-progress-value
• .player-options
• .player-buttons
• .player-btn
• .player-btn i (.fa .fa-play .fa-pause .fa-volume .fa-volume-off .fa-forward .fa-backward .fa-repeat .fa-random)
• .player-btn.big.medium.small.active.volume:disabled
• .player-controls

PS: react-cl-audio-player uses font-awesome, the used classes are:

.fa .fa-play .fa-pause .fa-volume .fa-volume-off .fa-forward .fa-backward .fa-repeat .fa-random

Don't forget to import it into your project or feel free to use your own icons.

Notes

Works perfectly in Chrome, Firefox, Safari and IE.

Version 2.0 was rewritten.

License

MIT License.

Made with ❤️