react-music-player

React Music Player

A simple HTML5 music player with ReactJS and CSS3.
Modified version of react-cl-audio-player

To see the examples locally, run:

npm install
npm run example

Then open localhost:8080 in a browser.

Installation

The easiest way to use react-music-player-player is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

You can also use the standalone build by including dist/ReactMusicPlayer.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install react-music-player --save

Usage

To use, just call the ReactMusicPlayer instance and render it.

import ReactMusicPlayer from 'react-music-player';
<ReactMusicPlayer songs={songs} autoplay />

Properties

• songs - An array with the object songs - required
• songs[0].url - string
• songs[0].cover - string - optional
• songs[0].artist - object
• songs[0].artist.name - string
• songs[0].artist.song - string
• autoplay - Is autoplay?

Songs model:

var 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'
    }
  }
];

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

Notes

Works perfectly in Chrome, Firefox and Safari. No test in IE.

Development (src and the build process)

NOTE: The source code for the component is in src. A UMD bundle is also built to dist, which can be included without the need for any build system.

To build and serve the examples, run npm run build, npm run example.

License

MIT License.

Copyright (c) 2015 smronju.