react插件

音乐播放器

2022-01-12 14:50:43 更新   浏览量: 317
本章 本章完

学习其他章节 react插件案例

音乐播放器


  1. 安装:

使用 npm:

    npm install react-aplayer --save

使用 Yarn:

    yarn add react-aplayer
  1. 实例:
  1. import React from 'react';
  2. import ReactAplayer from 'react-aplayer';
  3. export default class App extends React.Component {
  4. // event binding example
  5. onPlay = () => {
  6. console.log('on play');
  7. };
  8. onPause = () => {
  9. console.log('on pause');
  10. };
  11. // example of access aplayer instance
  12. onInit = ap => {
  13. this.ap = ap;
  14. };
  15. render() {
  16. const props = {
  17. theme: '#F57F17',
  18. lrcType: 3,
  19. audio: [
  20. {
  21. name: '光るなら',
  22. artist: 'Goose house',
  23. url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
  24. cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
  25. lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
  26. theme: '#ebd0c2'
  27. }
  28. ]
  29. };
  30. return (
  31. <div>
  32. <ReactAplayer
  33. {...props}
  34. onInit={this.onInit}
  35. onPlay={this.onPlay}
  36. onPause={this.onPause}
  37. />
  38. {/* example of access aplayer instance API */}
  39. <button onClick={() => this.ap.toggle()}>toggle</button>
  40. <div>
  41. );
  42. }
  43. }
扫二微码
本章 本章完
学习其他章节 react插件案例

最近更新 免责声明 关于我们

Copyright © 2004-2021 前端教程 qianduan.cn All Rights Reserved   陕ICP备2021014585号-1 陕公网安备 61012402000223号 前端教程

友情链接:  前端工具 前端插件 前端小川

react插件