React-aplayer音乐播放组件引入

博客更新日志(一)之 react-aplayer引入

博客源码

博客前台使用的技术栈:Next.js+React Hooks+Antd+Axios

---

一款可爱的很火的音乐播放组件(react-aplayer)

配置详情查看文档: 访问地址

废话不多说,接下来就是如何在本博客实现

---

一、项目准备

1. 下载react-aplayer 我的博客是基于react写的,这是react版本的aplayer,上面文档不是react版本的,详情查看react版本的aplayer改造

npm install react-aplayer --save

---

二、项目实现步骤

1.创建组件

1. 在components创建一个Music的组件,名字自定义就可以
2. 在Music组件写如下代码

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

由于我的数据库没有实现音乐的存储,故只能用这种方式,后续完善

2. 项目引入

1. 在想要的页面引入改播放组件,需要引入以下代码

    import dynamic from 'next/dynamic'; #头部引入
    const Music = dynamic(import("../components/Music"), {
    ssr: false,
     }); #引入组件

2. 使用组件
   如果配置项选中了fixed:true,那么他永远在底部,可以通过修改对应样式来改变位置,具体自己可以瞎鼓捣以下,如果样式没生效,可以在后面添加(!important)赋予优先权限

   <Music/> #在对应的地方使用组件

恭喜

如果以上没有出现报错,那么恭喜你,你的博客音乐小组件已经引入了,你可以运行项目查看

---

总结:

1. 如果改项目报错window is not defind 并提示module.exports = require (‘react-aplayer’),不要慌,检查一下你的头部是否引入dynamic 以及对应组件的引入,详情请看宝藏入口
   2.我的博客类型在第一篇部署的时候提到过,遇到困难不要慌,多查百度,多浏览博客,不过能白嫖就是爽.