react-audioplayer v0.3.1

react-audioplayer

A customizable HTML5 audio player for React.js

Live demo

Features

• A ready-to-use web audio player for React.js
• Highly-customizable. You can change theme color, size, functions of this player as you want.
• Just one single component on the top to use (Almost no learning cost).

Install

• npm: npm install react-audioplayer --save
• yarn: yarn add react-audioplayer

Usage

A simple example below.

import Audio from 'react-audioplayer';
// In your render() function:
<Audio
  width={600}
  height={400}
  autoPlay={true}
  playlist={somePlaylist}
/>

Acceptable props

playlist prop

playlist is an array of songObj, where

songObj = {
  name: string, // song name
  src: string, // song source address
  img: string, // (optional) song image source address
  comments: an commentObj array // (optional) comments to display of that song
}

commentObj = {
  time: number,
  content: string
}

songObj.img is required when fullPlay = true, songObj.comments is required when comment = true.

Manually control the state of the player in code

To play/pause/skip-to-next/skip-to-previous the player in code, four event listeners are added inside the <Audio /> component.

The name of these events are:

• audio-play
• audio-pause
• audio-skip-to-next
• audio-skip-to-previous

and a typical example:

class App extends React.Component {
  someMethod() {
    // Some code ...
    // This code can only be able to execute when the audio component is already mounted
    ReactDOM.findDOMNode(this.audioComponent).dispatchEvent(new Event('audio-play'));
  }

  render() {
    return (
      <Audio
        width={600}
        height={300}
        playlist={playlist}
        
        // store a reference of the audio component
        ref={audioComponent => { this.audioComponent = audioComponent; }}
      />
    );
  }
}

As you can see in the example above, there are two steps: 1. Store the audio component using ref 2. Get the DOM node (ReactDOM.findDOMNode) and dispatch the event (dispatchEvent)

TODO

• Loading animation and optimisation

Development

$ git clone https://github.com/wenliangdai/react-audioplayer.git
$ npm install
$ npm start

Then a localhost is open on port 8080.

ChangeLog

Details changes for each release are documented in the release notes or the ChangeLog.md file.

Need help or find a bug?

• github issues
• Email: daiwenliang123@gmail.com