https://github.com/haruki-nikaidou/react-aplayer-2.0

https://github.com/haruki-nikaidou/react-aplayer-2.0

Last synced: 7 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/haruki-nikaidou/react-aplayer-2.0
• Owner: haruki-nikaidou
• License: mit
• Created: 2023-10-17T16:24:19.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-10-17T16:27:28.000Z (about 1 year ago)
• Last Synced: 2024-12-09T17:45:36.851Z (about 1 month ago)
• Language: TypeScript
• Size: 403 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# React-APlayer

[![npm](https://img.shields.io/npm/v/react-aplayer.svg)](https://www.npmjs.com/package/react-aplayer)

[![GitHub tag](https://img.shields.io/github/tag/sabrinaluo/react-aplayer.svg)](https://github.com/sabrinaluo/react-aplayer/releases) [![npm](https://img.shields.io/npm/dm/react-aplayer.svg)](https://www.npmjs.com/package/react-aplayer) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](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

![image](https://user-images.githubusercontent.com/5300359/38107595-f7fd325a-33c4-11e8-9a9a-5d60613c9458.png)

### :star2: Fixed Mode

![image](https://user-images.githubusercontent.com/5300359/38107623-11ad0874-33c5-11e8-8e0b-1e9625571e4b.png)

## 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 (

        


            

            {/* example of access aplayer instance API */}

             ap.toggle()}>toggle

        

    );

}

```


### 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)