给你的hexo插入音乐视频

本文最后更新于：2021年9月17日 凌晨

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

起因

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

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

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

1
<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-aplayer和hexo-generator-feed这两个插件存在冲突，具体原理我不太清楚，但不使用hexo-tag-aplayer插件或者修改博客根目录下的_config.yml文件均能解决：

1
2
aplayer:
  asset_inject: false

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

hexo-tag-mmedia

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

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

安装

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

配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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可以设置默认参数：

1
2
3
4
5
meting:
  cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
  api:
  default:
    order: random

使用

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

Aplayer

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

格式

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

示例

1
{% 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音乐的独家竟然也可以放，太顶了。

格式（下面两个都可以）

1
2
3
{% 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

示例

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

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

效果

Dplayer

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

格式

1
{% 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 额外代码，不懂不要填，需要写的请参考源码

示例（不知道就不要乱加，直接丢链接进去最好使）

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

效果（来一段大狗吧）

Bilibili

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

格式

1
{% 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"

示例（来一段自己弹得）

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

效果

尾巴

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

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

就这样，晚安！