react-aplayer
Version:
A React wrapper component of APlayer
94 lines (72 loc) ā¢ 2.97 kB
Markdown
[](https://github.com/sabrinaluo/react-aplayer/releases) [](https://www.npmjs.com/package/react-aplayer) [](https://github.com/sabrinaluo/react-aplayer/blob/master/LICENSE)
š Wow, A react wrapper of the beautiful HTML5 music [APlayer](https://github.com/MoePlayer/APlayer)
[](http://sabrinaluo.github.io/react-aplayer/)
```
npm install react-aplayer --save
```
Check `src/app.js` to get more example;
```javascript
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](https://aplayer.js.org/#/home) 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](https://aplayer.js.org/#/home?id=event-binding) for more events.
APlayer Instance can be accessed through `onInit`
[](https://github.com/sabrinaluo/react-aplayer/blob/master/LICENSE)