Aplayer音乐插件不会pjax?真正的网页背景音乐!

最新推荐文章于 2022-06-07 10:19:21 发布
最新推荐文章于 2022-06-07 10:19:21 发布
阅读量598 收藏 1
点赞数
分类专栏： Hexo博客 文章标签： 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Dragon_1718/article/details/108174567
版权
本文介绍了一款名为梨花带雨的播放器，特别适合免费使用爱好者。文章详细讲解了如何在butterfly主题下注册、生成歌单及播放器的使用教程，重点演示了将播放器代码插入主题的具体步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

在网上无意中刷到一个大佬的博客文章，介绍了一种播放器，详细可见大佬的文章。在文章提到了一个播放器，梨花带雨。（适合我们这样的白嫖党(￥__￥)）

注册、生成歌单……都很简单，而且该播放器还附有教程，可能最后一点如何插入butterfly主题会有的困难，但也不是事～

如何插入到butterfly主题

打开主题文件_config.yml，找到如下代码区域

在这里插入图片描述

把播放器代码，如上图插入到我框出来的区域即可，完成！

在这里插入图片描述

效果展示：传送门

Hexo + Next 主题实现全局播放背景音乐
Luis
04-09 5536
欢迎访问我的博客：https://iluis.cn/ 第一种方式：使用网易云音乐插件 此种方式特点： 十分方便快捷 有版权保护的歌无法播放 1. 生成网易云歌单插件 为什么要创建歌单外链而不是创建歌曲外链：以后添加或者删除歌曲不用修改代码，直接在网易云歌单中操作即可。 步骤一：创建歌单并添加自己喜爱的歌曲 小贴士：若我们的歌单中添加了受网易云版权保护的歌，在博客中我们的歌单就GG了，要避...
Hexo-tag-aplayer重复载入Aplayer.js 资源脚本问题
gznc_pcc的博客
02-23 738
背景： hexo-theme-next主题 1、关闭插件的自动脚本插入功能 在 Hexo 配置文件 _config.yml 中设置： aplayer: meting: true asset_inject: false 2、自己在主题文件中手动加入 Aplayer.js 与 Meting.js 新建文件aplayer.swig放在/themes/hexo-theme-next/layout/_third-party/statistics文件夹下，写入： {%- if theme.aplayer.
APlayer.js迷你音乐播放器插件
06-11
APlayer.js迷你音乐播放器插件是一款小型的网页音乐播放器代码，支持歌词滚动，带播放进度条和声音控制，暂停播放等功能。
APlayer, 哇这么漂亮的HTML5音乐播放器.zip
10-09
APlayer, 哇这么漂亮的HTML5音乐播放器 APlayer哇这么可爱的HTML5音乐播放器 简介 APlayer是一个可爱的HTML5音乐播放器。APlayer支持：媒体格式MP4 H.264 ( AAC或者 MP3 )波形
添加网页播放器 + 全站pjax
幸运草的博客
09-19 775
前言 本博客使用solo开源博客，最喜欢的nijigen主题自带pjax，但是不完善。看了看官方皮肤开发指南。开始写了 solo官方文档 Pjax 使用 引入 ${staticServePath}/js/lib/compress/pjax.min.js [已包含 jquery-3.1.0.min.js] 引入 ${staticServePath}/js/lib/nprogress/nprogre...
hexo pjax“暂时”解决aplayer插件间断播放问题
Sky_True的博客
02-29 3619
写在前面 单独拿出来写是因为这点东西让我花了一些时间，毕竟新版的教程真的太少了，官方源码又看不懂，上tg问开发者也是听得一脸懵逼，他们会怼你简洁不好吗？非要自己修改主题。其实也是，想要DIY也是要付出一些代价的，比如花时间去学习。 开始 hexo添加aplayer音乐播放插件 1、首先新版主题的aplayer已经不在主题配置文件里出现了，需要到github下载源码解压到themes/next/s...
Wordress博客网站使用Aplayer播放器与Pjax解决网页跳转时音乐重新播放
豪先生的博客
12-08 880
在Wordress的主题里面的header.php里面放入我给的3行代码即可 如果不知道header.php在哪里，可以参考我的路径： wp-content/themes/dashscroll/header.php wp-content/ themes/ Wordress的网页主题 dashscroll/ 主题 博主当前使用的主题 header.php头部文件 在header.php里面中的body前面添加下面代码 注意:jquery.js要在jquery.pjax.js前面 .
Hexo博客设置背景音乐
qq_39800978的博客
10-31 3501
本文讲解如何给HEXO的Next主题添加背景音乐，主要有以下应用场景： 在单篇博文中添加音乐播放器 在Next菜单栏添加一个全局的背景音乐播放器 下面详细展开…… 1 网易云生成HTML代码 HEXO支持Markdown语法下直接解析HTML代码，故我们可以考虑利用网易云Iframe插件生成播放器 第一步，在网页版网易云找到你想要的音乐，这里我以《The Fight Song》举例 第二步，点击《生成外链播放器》按钮并跳转，设置好高宽后复制粘贴HTML代码即可 注：网易云现在只支持一首歌
Hexo博客技巧：为博客插入音乐
Amnesia-Fu的博客
05-10 6644
前言 想要给博客添加音乐，最简单的方法便是利用第三方音乐平台提供的外链播放器，可是效果并不好，外观丑没歌词且体验极差。 如果使用Hexo-Tag-Aplayer插件的话这个问题就能很好地解决了。 原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。 但是3.0新版本的Aplayer已经支持MeingJS了，MetingJS 是基于Meting API 的 APlayer 衍生
Hexo-Next 博客搭建
热门推荐
qq_37828104的博客
05-16 9万+
整理网上的 Next 优化方法，外加写一份文章 感觉博客还行，不再羡慕别人的主题了 特效全开，跟开了吃鸡一样，电脑呼呼的 看了下建站时间，花了 23 天整，为了一个工具，感觉血亏
HTML网页音乐播放器
04-21
HTML网页音乐播放器，支持上下首、快进倒退、随机播放单曲循环等模式。
Pjax加持APlayer，音乐无间断
Ariescat Blog
01-30 1247
原文来自个人小站：Pjax加持APlayer，音乐无间断，转载请备注 起因 下午在 @樱花庄的白猫 博客中看到左下角有个小小的音乐播放器，新奇的东西 F12 上，瞅一下名字：aplayer，啥？！谷哥度娘走起 首条记录上就出现了 APlayer 的官方网站，这么简单嘛？！只要有文档，一切都好说嘛。跟着导航找找找，是你了！吸附底边的播放样式： APlayer 可以通过吸底模式固定在页面底部。 APlayer播放器 官方对它的介绍： ???? Wow, such a beautiful HTML5 music
PJAX全局无刷新的设置方法~
07-08 588
先添加必要文件： <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/jquery.pjax/1.9.5/jquery.pjax.min.js"></script> ...
开源html5在线音乐网站,一个漂亮的开源HTML5音乐播放器——APlayer
weixin_29094775的博客
05-31 2545
介绍APlayer是一个简约且漂亮的html5音乐播放器，支持多种模式，包括播放列表模式、吸底模式、迷你模式、MSE模式、HLS模式。Githubhttps://github.com/diygod/APlayer安装使用 npm:npm install aplayer --save使用 Yarn:yarn add aplayer使用const ap = new APlayer({container...
React + Vite 实现一个音乐网站（aplayer音乐播放器 ）
qq_44417818的博客
01-30 1392
react学习，制作音乐网站，又是充实的一天呢 ^-^
hexo butterfly主题 添加全局吸底APlayer
超逸の学习技术博客
05-19 4068
第一步 打开 themes\Butterfly\layout\includes\head.pug 结尾加一句 include ./third-party/aplayer.pug 第二步 然后在themes\Butterfly\layout\includes\third-party\里面新建一个文件叫 aplayer.pug ,内容如下 if theme.aplayer && theme.aplayer.enable .aplayer(data-id=theme.aplayer.id d
Vue使用vue-aplayer实现音乐播放
搬运工
06-07 6848
Vue Nuxt 使用 vue-aplayer 组件实现音乐播放！
梨花带雨html音乐播放器源码,梨花带雨网页悬浮音乐播放器V3开源
weixin_33609020的博客
06-05 2095
程序不是我写的，但是梨花带雨已被我接手，并且V3版本已完全开源，我尽量剔除了源码中可能出现的联系方式之类。如果安装后发现某些按钮无效的，那是因为类似于加群链接被我替换成中文了，自己在源码修改成自己的就好。 环境:国内外服务器都可以用主机无法运行需求环境 php7.3+mysql5.6/5.7 推荐5.7,设置public为运行目录，thinkphp伪静态安装:导入根目录install.sq...
hexo next主题深度优化(三)，引入require.js,适配pjax。
as403045314的博客
12-10 683
文章目录require.js的好处，hexo next中加入require.js新建一个main.js作为所有js的入口pjax的require.js实现关于require js适配过程中报的错误aplayer.min.js只能在——lauout加载一直报错：MISMATCHED ANONYMOUS DEFINE() MODULES ......
APlayer.js插件实现迷你音乐播放器功能
- **APlayer**: APlayer 是一款基于Web的音乐播放器插件，它允许开发者轻松地在网页中嵌入音乐播放功能。它通常用于展示小型音乐播放界面，支持自定义样式，且能与歌词（LRC格式）同步显示。 - **迷你**: 描述了这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值