Gridea 添加 Aplayer 音乐播放插件 在head.ejs中添加 aplayer/1.10.1/APlayer.min.css"> 在footer.ejs中添加 aplayer-narrow 即可 --> aplayer9" class="aplayer aplayer-fixed aplayer-narrow...-- 迷你模式 --> aplayer6" class="aplayer aplayer-narrow" data-id="" data-server=”netease" data-type...-- 列表模式 --> aplayer5" class="aplayer aplayer-withlrc aplayer-withlist" data-id="" data-server
本文方法适用于Volantis 5.0.0.alpha.1,不保证其他版本可用 Volantis中使用APlayer作为音乐播放器,如果希望在播放音乐时网页能够做出响应,例如弹窗,就需要对播放事件进行捕获...目标效果 我的网页左下角有一个看板娘,我希望播放音乐时她会说: 而暂停时她会说: 浏览了APlayer官方文档的方法后,发现在volantis中根本无效,于是自己查看volantis的源码并实现。
在hexo博客上使用aplayer 起因 因为以前我配置aplayer遇到了挺多难题的 配置好之后 hexo s一看 没问题啊 但是hexo g -d上传完打开链接一看文字链接打不开 而现在 我才知道配置错了...可以直接在inject里面找到head和bottom分别写 先在head里面添加 - aplayer.../dist/APlayer.min.css" media="defer" onload="this.media='all'"> - 酱紫添加就ok了 之后在bottom里面添加 - aplayer...@1.10.1/dist/APlayer.min.js"> - <script async src="https://cdn.jsdelivr.net/npm/meting/dist/
之前 @狗子 在群里秀他的 Aplayer,还 post 了博文。然后我一看,哇!这就是我想要的!...[Aplayer Fixed Mode 效果] APlayer 的官方文档是这么写的: [Aplayer 的官方文档关于吸底模式的描述] 然而我 看!不!懂!啊! 折腾了好久都不知道怎么弄啊!...rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css"> aplayer@1.7.0/dist/APlayer.min.js"> aplayer.html (Cloudflare CDN) 目前,全站 APlayer 已经在博客可用: image.png
hexo-tag-aplayer 安装 npm install --save hexo-tag-aplayer 依赖 APlayer.js > 1.8.0 Meting.js > 1.1.1 使用 {%...aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %} 标签参数 title author url...picture_url narrow autoplay width:xxx lrc:xxx {% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "...如果需要在指定的文章上播放 首先在 Hexo 根目錄_config 里配置 asset_inject 为 false aplayer: asset_inject: false 然後在你需要使用 aplayer...的页面 Front-matter 添加 aplayer: true 这样只会在需要 aplayer 的页面插入 js 和 css。
超级推荐用这个大佬写的aplayer插件 地址:https://github.com/MoePlayer/APlayer-Typecho 然后在预加载重载函数里写上 loadMeting(); 即可...0; i < aplayers.length; i++) { try {aplayers[i].destroy()} catch(e){} } } ↓以下文章内容已弃用 APlayer...Typecho插件 https://github.com/FaithPatrick/APlayer-Typecho-Plugin instantclick 3.0.1版兼容 方法来自https://...+){ if(document.getElementById('player' + APlayerOptions[i]['id'])) { APlayers[i] = new APlayer...+){ if(document.getElementById('player' + APlayerOptions[i]['id'])) { APlayers[i] = new APlayer
使用方法如下 首先贴出GitHub的传送门 这里 安装 npm install --save hexo-tag-aplayer 依赖 APlayer.js > 1.8.0 Meting.js > 1.1.1...# 引用 APlayer.js 外部 CDN 地址 (默认不开启) style_cdn: http://xxx/aplayer.min.css # 引用...html过滤器 , 将 APlayer.js 和 Meting.js 插入到使用了本插件标签 的 HTML 文件中: ......但是使用 after_post_render 会有重复载入 APlayer.js 的情况(例如当一个页面中存在多篇博客时),以及一些非文章页面将无法使用本插件。...如果想完全解决这个问题,用户可能需要自己在主题文件中手动加入 Aplayer.js 与 Meting.js,同时关闭插件的自动脚本插入功能: aplayer: asset_inject: false
Aplayer Wow, such a beautiful HTML5 music player(哇,好漂亮的HTML5音乐播放器) Aplayer是一个功能强大的HTML5音乐播放器 Aplayer...官网文档:https://aplayer.js.org/#/ Metingjs Metingjs基于Aplayer插件封装好的插件,开箱即用 Metingjs官网文档:https://github.com...-- APlayer --> aplayer/dist/APlayer.min.css..."> aplayer/dist/APlayer.min.js"> <!
介绍 Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。...Aplayer官网文档:https://aplayer.js.org/#/ Metingjs官网文档:https://github.com/metowolf/MetingJS 简单使用 APlayer --> aplayer/dist/APlayer.min.css..."> aplayer/dist/APlayer.min.js"> APlayer --> aplayer/dist/APlayer.min.css
Aplayer搭配MetingJS Aplayer官网文档:https://aplayer.js.org/#/ Metingjs官网文档:https://github.com/metowolf/MetingJS...Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。...-- require APlayer --> aplayer/dist/APlayer.min.css..."> aplayer/dist/APlayer.min.js"> APlayer.min.css"> aplayer@1.10.1/dist/APlayer.min.js"></script
安装源文件方式(未能成功,但教程按理说没问题) 参考教程:Hexo NexT主题中添加网页音乐播放器功能 下载 先要在官网下载源码:MoePlayer/APlayer 总共也就200kb不到,就别捣鼓什么...新建music.js 新建 Hexo\themes\next\source\dist\music.js 文件,添加内容: const ap = new APlayer({ container:...APlayer.min.css"> aplayer"> <script type="text/javascript...(然而这个方法我并没有成功) 插件安装方式(推荐) hexo-tag-aplayer使用文档) 安装 在根目录下使用命令行安装 npm install --save hexo-tag-aplayer 使用...{% aplayer "China-Y" "徐梦圆" "https://www.ytmp3.cn/down/59298.mp3" %} 在网页里放以下代码,会加载出歌曲列表。
在hexo博客上使用aplayer-续集 为什么出续集 为什么呢?...因为不使用butterfly主题的人可就犯了难内心:又水了文章 怎么办呢 因此我再弄个添加html 之后再解决一些问题 添加aplayer(html) head这样写 aplayer/dist/APlayer.min.css" media="defer" onload="this.media='..." id="5291772497" fixed="true"> body这样写 aplayer...@1.10.1/dist/APlayer.min.js"> <script async src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
安装插件 插件需要在Hexo中使用 安装hexo-tag-aplayer插件: $ npm install --save hexo-tag-aplayer 为了方便操作,直接使用Aplayer插件中的MetingJS...(基于Meting API 的 APlayer 衍生播放器) 在 Hexo 配置文件 _config.yml 中设置: aplayer: meting: true 不安装插件 同样也是使用的Aplayer...@1.10/dist/APlayer.min.css"> aplayer@1.10/dist/APlayer.min.js...type=0&id=5068325488&auto=0&height=430"> 效果: image.png 后记 toc点击后点击后无法跳转问题,原因是aplayer播放器与toc...不兼容; 解决方法: 引入此js,替换掉aplayer原本的js: https://cdn.jsdelivr.net/gh/ooahz/source@latest/Aplayer/APlayer.min.js
Aplayer报错解决方案 hexo - g 报错如下: INFO Start processing Error: [hexo-tag-aplayer] Meting support is disabled...at throwError (E:\Node_JS_Hexo\node_modules\hexo-tag-aplayer\common\util.js:18:9) at Object.... (E:\Node_JS_Hexo\node_modules\hexo-tag-aplayer\index.js:160:28) at NunjucksTag....请在 Hexo 配置文件 _config.yml 中设置即可: (切记是hexo的配置文件,不是themes文件夹里面的) aplayer: meting: true 请不要配置:(这个是给Meting.js...用的,Aplayer误设置会导致变成空白的) aplayer: asset_inject: false
5WordPress区块音乐播放器推荐:基于APlayer的Hermit X(支持网易云、QQ音乐、虾米等) 前天 17910 实现方法 这里还是通过APlayer的方式引入:其界面美观,功能强大。...用到的文件为APlayer.min.js和APlayer.min.css ,引入的方式如下: 此处内容已隐藏,请评论后刷新页面查看. 将对应css和js换成你的就行。...Aplayer主要参数说明: 参数 默认值 描述 container document.querySelector('.aplayer') 播放器容器元素 fixed false 开启吸底模式 mini.../dist/APlayer.min.css"> aplayer/dist/APlayer.min.js"></script...实现代码: aplayer/dist/APlayer.min.css"> <script
上一篇写了APlayer引入网易云等音乐的实现代码,还有引入本地音乐的还没写,这篇是补充上一篇的,如果感兴趣可以移步上一篇。...网站通过代码引入Aplayer音乐播放器,无需插件 11小时前 1528 本地音乐引入 单播放器多音乐 你可以直接将代码通过html的方式插入网页,例如WordPress的插入html块。...示例: var demo = new APlayer ({ element: document.getElementById('demo'), showlrc...示例: var demo1 = new APlayer ({ element: document.getElementById('demo1'), showlrc...示例: var demo2 = new APlayer ({ element: document.getElementById('demo2'), showlrc
这里需要用到三个文件:APlayer.min.cssAPlayer.min.jsMeting.min.j然后再网站底部加入: music/APlayer.min.css"> aplayer aplayer-withlist aplayer-fixed" data-id="5083236566...>music/APlayer.min.js"> <script src="<?= TEMPLATE_URL ?
--音乐--> aplayer@1.10.1/dist/APlayer.min.css..."> aplayer@1.10.1/dist/APlayer.min.js"> aplayer...aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order
Hexo-QQ音乐排行-Netlify CMS 在 aplayer 上面增加了页面跳转、刷新会接着上一句继续播放、页面关闭其它页面继续播放功能 正在播放音乐的页面关闭后,下次打开浏览器也会接着上一句继续播放...发布了 npm 包 aplayer2 ---- 准备 获取音乐列表ID 打开QQ音乐PC客户端并登录,依次点击【音乐馆】【排行】【新歌榜】【批量操作】【全选】【添加到】【添加到新歌单】【输入歌单名并保存...******) aplayer_css: //cdn.jsdelivr.net/npm/aplayer2/dist/APlayer.min.css aplayer_js: //cdn.jsdelivr.net.../npm/aplayer2/dist/APlayer.min.js meting_js: //cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js...page.meting 加上后,可以单独页面关闭音乐;改为 page.meting ,可在页面中单独开启 div#aplayerBox( class="aplayer aplayer-tag-marker
config.yml(存在于主题目录下) 找到 inject 在 head 部分粘贴以下内容 - aplayer.../dist/APlayer.min.css" media="defer" onload="this.media='all'"> - 在 bottom 部分粘贴以下内容 - aplayer.../dist/APlayer.min.css" media="defer" onload="this.media='all'" /> <meting-js server="tencent"...3813658180" fixed="true" > 在/body 前添加 aplayer