想在博客里插入音乐，折腾了一下午，记录下各种方法


音乐平台官方外链方式

iframe插件
1
2
3
4
5
<iframe 
    frameborder="no" border="0" marginwidth="0" 
    marginheight="0" width=330 height=86 
    src="//music.163.com/outchain/player?type=2&id=461544312&auto=0&height=66">
</iframe>
flash插件
1
2
3
4
<embed 
    src="//music.163.com/style/swf/widget.swf?sid=461544312&type=2&auto=0&width=320&height=66" 
    width="340" height="86"  allowNetworking="all">
</embed>
  • 效果

缺点:

  • 之前有版权保护的歌曲可以通过修改id来播放，但是现在不行了，似乎被限制了。
  • 没有滚动歌词等，功能过于简单

MeingJS

加载相关JS文件

可以在文章开头添加，或者去修改主题

1
2
3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

在文章中使用

1
<div class="aplayer" data-id="31356499" data-server="netease" data-type="song" data-mode="single"></div>
主要参数 值
data-id 歌曲/专辑/歌单 ID
data-server netease（网易云音乐）tencent（QQ音乐） xiami（虾米） kugou（酷狗）
data-type song （单曲） album （专辑） playlist （歌单） search （搜索）
data-mode random （随机） single （单曲） circulation （列表循环） order （列表）
data-autoplay false（手动播放） true（自动播放）
  • 效果

缺点：

  • 修改歌单歌曲并不会使外链变动
  • 音乐云盘的歌曲（网易没有版权的歌曲）无法播放

使用Aplay插件

安装插件

Audio：hexo-tag-aplayer

安装插件
1
npm install hexo-tag-aplayer

语法

语法
1
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
  • title : 曲目标题
  • author: 曲目作者
  • url: 音乐文件 URL 地址
  • picture_url: (可选) 音乐对应的图片地址
  • narrow: （可选）播放器袖珍风格
  • autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
  • width:xxx: (可选) 播放器宽度 (默认: 100%)
  • lrc:xxx: （可选）歌词文件 URL 地址

用来生成外链的地址：刘志进实验室

歌词标签

插入歌词除了用文件，也可以用歌词标签

1
2
3
{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}

播放列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% aplayerlist %}
{
    "narrow": false,                          // （可选）播放器袖珍风格
    "autoplay": true,                         // （可选) 自动播放，移动端浏览器暂时不支持此功能
    "mode": "random",                         // （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation' 
    "showlrc": 3,                             // （可选）歌词显示配置项，可选项有：1,2,3
    "mutex": true,                            // （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
    "theme": "#e6d0b2", |                       // （可选）播放器风格色彩设置，默认：#b7daff
    "preload": "metadata",                    // （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'
    "listmaxheight": "513px",                 // (可选) 该播放列表的最大长度
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}

缺点：

  • 歌曲信息需要自己去手动添加比较麻烦

MeingJS 支持 (3.0 新功能)

MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

在 Hexo 配置文件 _config.yml 中设置：

1
2
aplayer:
  meting: true
1
{% meting "391125700" "netease" "playlist" "mutex:false" "listmaxheight:340px" "preload:auto" "theme:#ad7a86"%}
选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto
theme #ad7a86 播放器风格色彩设置
  • 效果

缺点：

  • 同样无法更新歌单的问题歌单变化需要一天时间更新

参考

https://tianma.space/post/3998746934/index.html
https://clearsky.me/hexo-aplayer.html