给你的hexo插入音乐视频

本文最后更新于:2020年9月22日 下午

本文介绍一个hexo插件:hexo-tag-mmedia,方便插入音乐、视频、bilibili等资源。

起因

在hexo上插入音乐一般使用插件hexo-tag-aplayer,插入视频通常使用hexo-tag-dplayer或者直接使用bilibili分享的iframe嵌在文章内即可。但hexo-tag-aplayerhexo-generator-feed存在冲突,将导致网站的rss摘要出现问题。

我在很早之前就关注了寻我(一个博客聚合的网站),站长给了我非常多的首页推荐,我的网站在那里被很多人看到,很感谢那位不知姓名的站长。

但是最近发现,寻我上我文章的摘要没有了,所有排查了一下rss,发现摘要变成了下面这样:

<summary type="html"><link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js"</summary>

分析了几个小时,发现这种现象的原因是hexo-tag-aplayerhexo-generator-feed这两个插件存在冲突,具体原理我不太清楚,但不使用hexo-tag-aplayer插件或者修改博客根目录下的_config.yml文件均能解决:

aplayer:
  asset_inject: false

虽然rss就恢复正常了,但要么不使用aplayer无法给文章插入音乐;或者修改_config.yml,文章中aplayer的引用无效。都不是完美的解决方法。

hexo-tag-mmedia

hexo-tag-mmedia是一个聚合的媒体插入插件,安装这一个插件,相当于安装了以下的插件:

  • Aplayer:一个用的很多的音乐播放插件
  • Meting:一个网易云音乐、百度、腾讯、搜狗、虾米的音乐播放插件
  • Dplayer:一个视频播放插件
  • Bilibili:一个插入bilibili视频的插件
  • YouTube(开发中)
  • ArtPlayer(开发中)

安装

  1. 删除已安装的几个插件,以防冲突。
npm uninstall hexo-tag-aplayer
npm uninstall hexo-tag-dplayer
npm uninstall hexo-tag-bilibili
  1. 安装hexo-tag-mmedia
npm install hexo-tag-mmedia --save

配置

如果不需要自定义设置,不需要修改 _config.yml ,直接使用即可:

mmedia:
  aplayer:
    cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
    style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
    default:
  meting:
    cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
    api:
    default:
  dplayer:
    cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
    style_cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
    hls_cdn: https://cdn.jsdelivr.net/npm/hls.j/dist/hls.min.js
    dash_cdn: https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js
    shaka_dash_cdn: https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js
    flv_cdn: https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js
    webtorrent_cdn: https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js
    default:

default可以设置默认参数:

meting:
  cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
  api:
  default:
    order: random

使用

注意复制代码的时候,不要把代码块的格式复制进去了,我之前使用typora,复制下面的代码,结果死活不渲染,郁闷了挺久。

Aplayer

这是一个播放音乐的插件,个人感觉不是特别好用,因为歌曲模式会自动循环播放,歌单模式,hexo-tag-mmedia支持暂时不完善。

格式

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

示例

{% aplayer "大调" "官大为" "https://music.gaficat.com/%E5%A4%A7%E8%B0%83.mp3" %}

字段说明

配置项 默认 说明
title 必须 曲目标题,第一个参数
author 必须 曲目作者,第二个参数
url 必须 音乐文件地址
picture_url none 音乐对应的图片地址
narrow false 袖珍风格,带有此参数表示 true ,不带表示 false
autoplay false 自动播放,带有此参数表示 true ,不带表示 false
width:xxx 100% 播放器宽度
lrc none 歌词地址

效果

其他

AplayerList似乎有bug,我暂时没有使用。


MetingJS

这是一个插入各家音乐平台音乐的插件,个人觉得非常好用,特别是qq音乐的独家竟然也可以放,太顶了。

格式(下面两个都可以)

{% meting "001Mf4Ic1aNYYK" "tencent" "album" "order:random" "listmaxheight:180px" %}

{% meting "auto:https://y.qq.com/n/yqq/song/001Mf4Ic1aNYYK.html" %}

字段说明

字段 默认 描述
id 必须 音乐 id,第一个参数
server 必须 音乐平台,第二个参数,可选: netease , tencent , kugou , xiami , baidu
type 必须 音乐类型,第三个参数,可选: song , playlist , album``search , artist
auto 有 auto 选项时前三个参数不需要填写,否则为必填,如格式中的第二个。
autoplay false 自动播放,带有此参数表示 true ,不带表示 false
fixed false 吸底模式,带有此参数表示 true ,不带表示 false
mini false 迷你模式,带有此参数表示 true ,不带表示 false
listfolded false 默认折叠列表,带有此参数表示 true ,不带表示 false
mutex true 互斥,如不需互斥 "mutex:false"
theme #2980b9 主题颜色
loop all 循环模式 ,可选值 all , one , none
order list 播放顺序,可选值 list , random
preload auto 预加载模式 ,可选 none , metadata , auto
volume 0.7 默认音量,可选 0-1
lrctype 0 歌词类型
listmaxheight 340px 播放器最大高度
storagename metingjs

示例

{% meting "002nf0kI0YUPR9" "tencent" "song" "loop:none"  %}

这里qq音乐举例,最顶的是qq音乐独家的也能播放,id是后面链接中.html前面的一串字符:https://y.qq.com/n/yqq/song/002nf0kI0YUPR9.html

效果


Dplayer

这是一个播放视频的插件。

格式

{% dplayer "url:KeyCastOW.mp4" "id:DDEC4F882C0B66FAD" "addition:addition0" "addition:addition1" %}

字段说明

配置项 默认 描述
url 必填 视频地址
pic 封面
thumbnails 缩略图
type auto 视频格式,可选 auto hls dash shakaDash flv webtorrent
id 弹幕 id,建议使用视频的 CRC 或 MD5,再或使用 UUID
api 弹幕 api
token
maximum 10000 最大弹幕数
user DIYgod 弹幕发送用户名
bottom 15% 弹幕底端距离
unlimited true
addition 额外弹幕,可重叠加多个
suburl 字幕地址
subtype webvtt 字幕类型,可选 webvtt ass
subbottom 40px 字幕底端距离
subfontSize 20px 字幕字体大小
subcolor #fff 字幕字体颜色
autoplay false 自动播放,带有此参数表示 true,不带表示 false
loop false 循环,带有此参数表示 true,不带表示 false
screenshot false 截屏按钮,带有此参数表示 true,不带表示 false,此参数会造成跨域
hotkey true 热键控制
mutex true 互斥
theme #b7daff 主题颜色
lang 语言,不指定会根据浏览器环境自动识别
preload auto 预加载,可选 none metadata auto
logo logo 地址
volume 0.7 默认音量 0-1
contextmenu 右键菜单,可叠加
highlight 高光点,可叠加多个,例如 "highlight:{time: 20, text: '这是第 20 秒'}"
code 额外代码,不懂不要填,需要写的请参考源码

示例(不知道就不要乱加,直接丢链接进去最好使)

{% dplayer "url:https://pic.gaficat.com/default/UpTown%20Spot.mp4" %}

效果(来一段大狗吧)


Bilibili

可以直接通过bilibili的iframe插入bilibili视频,当然也可以通过这种方式插入bilibili视频。

格式

{% bilibili "aid:43218022" "quality:high" "danmaku:false" "allowfullscreen" %}

字段说明

配置项 默认 描述
bvid none 视频 bv 号,bvid、aid 和 av 必填一项,推荐使用 bvid
aid none 视频 av 号
av none 视频链接地址,不要带分 P 信息,与 aid 同时填写会被覆盖,不推荐使用
page 1 分 P,填写 av 时才会生效
quality low 视频质量,可选 high low
danmaku false 开启弹幕,带有此参数表示 true,不带表示 false
allowfullscreen true 是否允许全屏
width 100% 宽度
max_width 800px 最大宽度
margin auto 位置,css 属性,例: "margin:auto" "margin:0 0 0 auto"

示例(来一段自己弹得)

{% bilibili "bvid:BV11b411S7qB" "quality:high" "danmaku:false" "allowfullscreen" %}

效果

尾巴

还在为插入音频、视频烦恼吗?hexo-tag-mmedia真的可以了解一下。

经过我实际测试,hexo-tag-mmediahexo-generator-feed并不冲突,当然啦,也许可以通过自行设置feed模板来解决hexo-tag-aplayerhexo-generator-feed冲突的问题,但,既然有这么好的聚合插件,我为啥还要用别的呢,所有插件装一遍,太麻烦了。

就这样,晚安!