react-ds-audio-player

react-cl-audio-player

A simple audio player with ReactJS and CSS3.

Inspiration: Thanks Rovane Durso

** FIXED: single file playing without repeating if repeating is disabled **

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://cezarlz.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 ❤️