音乐播放器

2022-01-12 14:50:43 更新浏览量: 890

本章

本章完

学习其他章节 react插件案例

音乐播放器

安装：

使用 npm:

    npm install react-aplayer --save

使用 Yarn:

    yarn add react-aplayer

实例：


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>
    );
  }
}