React-APlayer

🍭 Wow, A react wrapper of the beautiful HTML5 music APlayer

Introduction

Demo

List with lyrics

:star2: Fixed Mode

Usage

Install

npm install react-aplayer --save

Example

Check src/app.js to get more example;

import React from 'react';
import ReactAplayer from 'react-aplayer';

export default class App extends React.Component {
  // event binding example
  onPlay = () => {
    console.log('on play');
  };

  onPause = () => {
    console.log('on pause');
  };

  // example of access aplayer instance
  onInit = ap => {
    this.ap = ap;
  };

  render() {
    const props = {
      theme: '#F57F17',
      lrcType: 3,
      audio: [
        {
          name: '光るなら',
          artist: 'Goose house',
          url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
          cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
          lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
          theme: '#ebd0c2'
        }
      ]
    };

    return (
      <div>
        <ReactAplayer
          {...props}
          onInit={this.onInit}
          onPlay={this.onPlay}
          onPause={this.onPause}
        />
        {/* example of access aplayer instance API */}
        <button onClick={() => this.ap.toggle()}>toggle</button>
      <div>
    );
  }
}

Props

onInit as a callback function will be invoked when aplayer instance get initialized and with the instance as parameter, through which you can get the full control of aplayer API. see onInit in above example

Other props are exactly the same with original APlayer, please check the docs for more details.

Event Handlers

Event handlers are triggered when corresponding event happens, it takes a callback function as parameter.

All the event handlers in react-aplayer are in a format of captalized event name prefixed with on, e.g. in aplayer, event play will be onPlay in react-aplayer,

Please check the docs for more events.

APlayer Instance

APlayer Instance can be accessed through onInit

LICENSE

MIT License