React-aplayer音乐播放组件引入

博客更新日志(一)之 react-aplayer引入
- 博客前台使用的技术栈:Next.js+React Hooks+Antd+Axios
- 一款可爱的很火的音乐播放组件(react-aplayer)
- 废话不多说,接下来就是如何在本博客实现
- - 一、项目准备
  - 二、项目实现步骤
  - - 1.创建组件
- **由于我的数据库没有实现音乐的存储,故只能用这种方式,后续完善**
- - - 2. 项目引入
    - 恭喜
  - 总结:

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

博客源码

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

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

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

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

一、项目准备

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

npm install react-aplayer --save

二、项目实现步骤

1.创建组件

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

import React from 'react'; import ReactAplayer from 'react-aplayer';export default class App extends React.Component {// event binding exampleonPlay = () => {console.log('on play');};onPause = () => {console.log('on pause');};// example of access aplayer instanceonInit = 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. 项目引入

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

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

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

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

恭喜

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

总结:

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

React-aplayer音乐播放组件引入相关推荐

animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
个人博客的APlayer音乐播放器
大家好,今天看到的个人了博客音乐播放器,就想自己搞一个.弄了几个小时才搞懂.在网上找了好多资料,最后发现没用.出差各种问题,因为小编我一开始也不是很理解.我目前找到了三种方法,给大家分享一下,如果还有 ...
Hexo全局添加APlayer音乐播放器
本人博客相关站点 APlayer APlayer Github Hexo-Tag-Aplayer 音乐直链搜索工具基于 Yilia 主题全局添加 APlayer 音乐播放器编辑文件 hexo-t ...
【js】仿照网易云音乐制作的音乐播放组件
效果样式介绍仿照网易云音乐的音乐播放组件,使用JavaScript动态生成内容,无需更改原有HTML结构,只需要导入js与css文件即可在页面中拥有与网易云音乐同款的音乐播放组件 GitHub地址 ...
React + Vite 实现一个音乐网站（aplayer音乐播放器）
众所周知,音乐网站需要能播放音乐 1.页面搭建我们需要搭建这样一个部分那么秉承一分为二的原则,左边音乐列表,右边显示cd图片.理所应当我们得让cd运动起来. components里面建立文件夹Mu ...
Hexo主题插入音乐之aplayer音乐播放器
原文首发自:https://wiki.hushhw.cn/posts/a84d1ef1.html 今天折腾的点是给博客中插入音乐,找到的具体可行的方案有: 使用音乐平台提供的插件体验很差使用hex ...
如何在博客中添加Aplayer音乐播放器
前言是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗.音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受. 我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有 ...
Aplayer音乐播放插件
APlayer中文官网安装使用 npm: npm install aplayer --save 使用 Yarn: yarn add aplayer 入门 <link rel="st ...
为网站添加APlayer音乐播放控件
文章目录源代码和文档准备工作修改配置模型与视图管理后台编写模板收尾注意事项可优化内容源代码和文档 Github地址 APlayer文档准备工作默认你已拥有Django基础知识, ...

React-aplayer音乐播放组件引入

React-aplayer音乐播放组件引入

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

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

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

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

一、项目准备

二、项目实现步骤

1.创建组件

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

2. 项目引入

恭喜

总结:

React-aplayer音乐播放组件引入相关推荐

最新文章

热门文章