react-aplayer-2.0
Version:
A React wrapper component of APlayer
93 lines (71 loc) ā¢ 3.48 kB
Markdown
# React-APlayer
[](https://www.npmjs.com/package/react-aplayer)
[](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)
## Introduction
[Demo](http://sabrinaluo.github.io/react-aplayer/)
### List with lyrics
### :star2: Fixed Mode
## Usage
### Install
```
npm install react-aplayer --save
```
### Example
Check `src/App.tsx` to get more example;
```javascript
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](https://aplayer.js.org/#/home) 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](https://aplayer.js.org/#/home?id=event-binding) 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](https://github.com/sabrinaluo/react-aplayer/blob/master/LICENSE)