之前 @狗子 在群里秀他的 Aplayer,还 post 了博文。然后我一看,哇!这就是我想要的!
Metingjs官网文档:https://github.com/metowolf/MetingJS
当开启 Hexo 的 文章资源文件夹 功能时,可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中,然后直接引用:
为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽。本文用纯代码为网站添加音乐播放器,安全可靠,可以任意修改。
Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。
前几篇文章写了WordPress通过Hermit X插件引入网易云等音乐,但在我实际使用中发现了一些小bug已经影响到了深白站的日常使用,所以不得不放弃通过插件引入的方法。这里推荐直接用插件引入,毕竟方便省力,具体可以看我上上篇文章。
除了使用标签 lrc 选项来设定歌词,你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中:
一.安装依赖 yarn add vue-aplayer or` npm i vue-aplayer 二.使用 <template> <aplayer autoplay :music="{ title: '歌曲标题', artist: '歌手名', src: '歌曲url', pic: '歌曲播放器封面url'02
1.在 layout.ejs 中 body 标签内粘贴入以下 📷 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css"> <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script> <script src="https://c
以下是相应的插入代码, 吸底模式可以在 body的任意地方 推荐顶部(效果可在本博客首页左下角查看) , 其他的就是在对应位置 可以在 md文件中插入使用 内联html 即 在文章中插入音乐
Aplayer 🍭 Wow, such a beautiful HTML5 music player(哇,好漂亮的HTML5音乐播放器) Aplayer是一个功能强大的HTML5音乐播放器 Aplayer官网文档:https://aplayer.js.org/#/ Metingjs Metingjs基于Aplayer插件封装好的插件,开箱即用 Metingjs官网文档:https://github.com/metowolf/MetingJS 使用方法 一、html里
为了方便操作,直接使用Aplayer插件中的MetingJS (基于Meting API 的 APlayer 衍生播放器) 在 Hexo 配置文件 _config.yml 中设置:
本文最后更新于 128 天前,其中的信息可能已经有所发展或是发生改变。 1、在页头head标签里添加: <link rel="stylesheet" href="https://static.likepoems.com/cdn/aplayer/dist/APlayer.min.css"> <script src="https://static.likepoems.com/cdn/aplayer/dist/APlayer.min.js"></script> <script src="https://stati
hexo-tag-aplayer:https://github.com/grzhan/hexo-tag-aplayer 官方简介: Embed APlayer(https://github.com/DIYgod/APlayer) in Hexo posts/pages.很明显,除了posts,还可以在pages页面使用。
https://github.com/metowolf/MetingJS/blob/master/README.md
APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器 MetingJS 是为 APlayer 添加网易云、QQ音乐、酷狗音乐等支持的插件
修改文件themes\butterfly\layout\includes\layout.pug
实现引入有两种方式,一种是在markdown中用原生的html编写(需开启配置文件中aplayerInject配置),一种则是借助hexo-tag-aplayer插件进行渲染(区分全局引用、部分引用)
看到大佬们的网页可以播放音乐,不得不说我是有点心动的,所以就在这里放一下教程。写这个的时候我也在一边试着安装,算是先驱者。 有两种方式,一种是安装源文件支持,在所有的网页输出上放置播放器,这样你哪个网页都可以看到它。 还有一种是安装插件,这个可以在文章中自定义样式,如此一来,只有当你点开文章的时候才能看到它。 我个人比较倾向于第二种,但这里我都会说,事实上引用的不是同一个js的情况下,貌似也不冲突吧。 (穿越回来的我:事实上体质特殊就是体质特殊,各种无效很无奈。)
请在 Hexo 配置文件 _config.yml 中设置即可: (切记是hexo的配置文件,不是themes文件夹里面的)
上一篇写了APlayer引入网易云等音乐的实现代码,还有引入本地音乐的还没写,这篇是补充上一篇的,如果感兴趣可以移步上一篇。
在hexo博客上使用aplayer 起因 因为以前我配置aplayer遇到了挺多难题的 配置好之后 hexo s一看 没问题啊😕 但是hexo g -d上传完打开链接一看文字链接打不开🤔 而现在 我才知道配置错了 开始教程 如果使用的是butterfly的主题 可以直接在inject里面找到head和bottom分别写 先在head里面添加 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min
地址:https://github.com/MoePlayer/APlayer-Typecho 然后在预加载重载函数里写上
1.博客中如果要插入本地音频,需要先安装hexo-tag-aplayer,在你的cmd输入
开源地址:https://github.com/DIYgod/APlayer 在线文档:https://aplayer.js.org/#/zh-Hans/
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
首先,这篇文章所写的教程适用于大部分主题和网站 本篇文章会提供 HTML/YML 引用方法,可以将 HTML 引用方法转换成你主题所提供的自定义 head 方法
从疫情确定开始已两月有余了,虽然国内已经好转起来了,但境外输入在不断增加,并且国外疫情日趋严重,受此影响公司现在没什么事做,加上神兽还没复课,每天在家上课,因此天天在家陪着他。
最近在做一个英语听力的个人玩的项目,需要用js来播放mp3文件。从网络上搜到了好多种解决方案。
1. Page Front-matter 写法 解释 title 【必需】页面标题 date 【必需】页面创建日期 type 【必需】标签、分类和友情链接三个页面需要配置 updated 【必需】标签、分类和友情链接三个页面需要配置 description 【可选】页面描述 keywords 【可选】页面关键字 comments 【可选】显示页面评论模块 (默认 true) top_img 【可选】页面顶部图片 mathjax 【可选】显示 mathjax (当设置 mathjax 的 per_page:
对于任何一个网站来说,优化页面的访问速度是必须的,个人来说,只要加载页面十秒以上或长时间处于空白或加载状态,我会立刻关掉此页面的。你又能容忍几秒呢?
最新版的Butterfly取消了原来设置在_config.yml里的默认CDN,导致不能快速替换掉现在极不稳定的jsDelivr CDN。本文的默认Butterfly版本为4.1.0。
是不是有点复杂呢?而且鸡肋呢?没错下一款插件我就准备推出 mokplayer 实现 typecho 遗留问题 音乐播放
使用的是vue的transition标签,当里面内容改变的时候,会通过name指定的样式进行过度。(列表使用的标签是transition-group)
Volantis中使用APlayer作为音乐播放器,如果希望在播放音乐时网页能够做出响应,例如弹窗,就需要对播放事件进行捕获。
实际网站效果 https://www.cnblogs.com/leader755/
对于 react、react-router、redux、axios和antd等等这些不经常改动的库、我们让webpack不对他们进行打包,通过cdn引入,可以减少代码的大小、也可以减少服务器的带宽,网站首次加载会更快。
命令的时候,发现报错了,后来通过网上查找相关资料才知道,CentoS 6在2020年11月30日就停止维护了。
Front-matter 是 markdown 文件最上方以---分隔的区域,用于指定个别档案的变数。
Meting API 是一个多功能的音乐播放服务接口,它能够帮助开发者轻松集成多种音乐平台的播放功能到自己的应用中。
bilibili插件 bilibili 颜文字 颜文字 表情 表情 下载按钮 {% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %} 点击下载百度 引用 {% cq %} 人生乃是一面镜子, 从镜子里认识自己, 我要称之为头等大事, 也只是我们追求的目的! {% endcq %} 人生乃是一面镜子, 从镜子里认识自己, 我要称之为头等大事, 也只是我们追求的目的! 代码块 代码 图标 https://fontawesome.com/v4
https://qqdie.com/plugins/ https://plugins.typecho.me/
📷 效果预览 扒自Shawn 在售的主题超级漂亮!!喜欢的可以去看看。 使用方法. 在wordpress后台 外观-小工具 添加自定义html即可 /*代码中的时间需提前一个月*/ <link type="text/css" media="all" href="https://a-oss.zmki.cn/20190606/love.css" rel="stylesheet"> <img src="https://a-o09
typecho以轻量著称,不足500k的安装包却满足了百分之九十以上的博客需求,但是还有很多的不足,不足的地方就只能用插件来弥补了!这里做一个插件合集方便大家查阅!
之前用darkmode.js给主题适配了一个暗黑模式,操作很简单,但体验感不是很好,于是用了几天就干掉了。
因为博客有个音乐推荐分类,所以肯定是要在文章里插入音乐的,但是直接使用古登堡自带的又太丑了,有成品肯定是优先使用别人的,搜了一下,刚开始打算直接使用html嵌入的,然后想起来typecho上不是有个aplayer的音乐播放器吗?找了下,wp也可以用哈哈。
本次实现的文档预览的类型有:docx, xlsx, pptx, pdf,以及纯文本、代码文件和各种图片、视频格式的在线预览
前几天逛博客的时候看着Wordpress可以插个挺漂亮的h5播放器进文章。。感觉十分不爽,Typecho似乎并没有这种功能,在网上找了好久都没发现Typecho的html5播放器插件,只找到了Flash的。。
First add configuration in _config.yml from your hexo project.
领取专属 10元无门槛券
手把手带您无忧上云