hexo文章插入音乐和视频

记录在文章中插入音乐或视频

不建议使用直接使用网站生成的链接和代码插入的方式

使用插件hexo-tag-mmedia

简介

hexo-tag-mmedia 是 MonoLogueChi 自用的一个媒体插入插件，在添加部分功能后发布给大家使用

建议

个人推荐的话，音乐插入建议是MetingJS音乐插件，视频的话是Bilibili视频插件

支持的平台

使用

本插件与以下插件冲突

hexo-tag-aplayer
hexo-tag-dplayer
hexo-tag-bilibili

如有安装，使用前请卸载。

1
2
3

npm uninstall hexo-tag-aplayer
npm uninstall hexo-tag-dplayer
npm uninstall hexo-tag-bilibili

安装

1	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

MetingJS音乐插件

在文件直接插入以下代码即可，注意一下，如果是Typora的话需要切换成源码模式再插入

示例

1
2
3

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

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

参数

基本兼容 hexo-tag-aplayer，绝大部分可以直接从 hexo-tag-aplayer 迁移，参数形式为 "option:vaule"，不懂的可以参考 MetingJS

配置项	默认	描述
id	必须	音乐 id，第一个参数
server	必须	音乐平台，第二个参数，可选： `netease` , `tencent` , `kugou` ,`xiami` , `baidu`
type	必须	音乐类型，第三个参数，可选： `song` , `playlist` , album``search , `artist`
auto	无	有 auto 选项时前面参数不需要填写，否则为必填，见示例 2
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`

后端服务器可以使用官方后端，也可以使用我自己写的后端服务器 MetingJS.Server 自建服务。

演示

音乐列表形式

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

单首音乐

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

遇到的问题：
在文章中插入音乐之后，第一次打开博客进入文章时，音乐插件并没有加载出来，每次都是刷新一次后才加载出来
解决：
在主题配置文件中启用head.swig后，再在~/source/_data/head.swig中添加下面代码：

head.swig

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

Aplayer音乐插件

示例

1	{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

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

参数

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

Bilibili视频插件

视频还是强烈推荐Bilibili的，毕竟视频又全又好用，关键免费

示例

1	{% bilibili "aid:60016166" "quality:high" "danmaku" "allowfullscreen" %}

配置

配置项	默认	描述
aid	必填	视频 av 号，填写 av 时非必填
av		视频链接地址，不要带分 P 信息，与 aid 同时填写会被覆盖
page	`1`	分 P，填写 av 时才会生效
quality	`low`	视频质量，可选 `high` `low`
danmaku	`false`	开启弹幕，带有此参数表示 true，不带表示 false
allowfullscreen	`true`	是否允许全屏
width	`100%`	宽度
height	`500px`	高度
margin	`auto`	位置，css 属性，例： `"margin:auto"` `"margin:0 0 0 auto"`

演示

1	{% bilibili “aid:60016166” “quality:high” “danmaku” “allowfullscreen” %}