cezarsmpio / react-cl-audio-player

A simple audio player with ReactJS and CSS3.

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 ❤️

react-cl-audio-player's Issues

Classnames

When requiring the module error: "Cannot find module Classnames"

Module parse failed: Unexpected token.

FULL ERROR:

Module parse failed: Unexpected token.
You may need an appropriate loader to handle this file type.

I really like the plugin. But I tried to use it with create-react-app
and it seems to have problem with webpack config.
do we need custom config in order to use this?
Greetings

Gapping Loop

Whenever I play a song on a loop there is a gap before the song start, is there any way to crossfade over that gap or to remove the gap itself

Demo page is down

As titled, please fix demo page

Universal rendering / static rendering fails due to document reference

I'm using this component with gatsby, and static rendering is failing due to the document reference. I can see how it might be necessary to get the DOM element directly to attach event listeners, etc, but perhaps some of this work could be moved to componentDidMount?