🍭 Wow, A react wrapper of the beautiful HTML5 music APlayer
npm install react-aplayer --save
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>
);
}
}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 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 can be accessed through onInit