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.tsx to get more example;

import React from 'react';
import ReactAplayer from 'ReactAplayer';

export default function () {
    let [ap, setAp] = React.useState(null);
    const onPause = () => {
        console.log('onPause');
    };
    const onInit = ap => {
        setAp(ap);
        ap.on('play', () => {
            console.log('on play');
        });
    };
    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={onInit}
                onPause={onPause}
            />
            {/* example of access aplayer instance API */}
            <button onClick={() => 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,

If you need to add event handlers, you don't have to get the aplayer instance through onInit, you can just use the event handlers in props, e.g. onPlay, onPause etc. see onPause in above example.

Please check the docs for more events.

APlayer Instance

Use onInit to get the instance and then use it to call the API. onInit must be a function whose parameter is the aplayer instance.

tips: use setState to ensure the API isn't null like the example above.

LICENSE

MIT License