Hexo - 配置音乐播放器

实现

在网页中添加音乐播放器
参考网站:
给 Hexo 添加音乐播放器插件
hexo-tag-aplayer | Easy Hexo 👨‍💻
Hexo 博客使用 aplayer 音乐播放插件

下载

1
PS E:\Code\Blog\hexo-blog> npm install hexo-tag-aplayer -s

配置

在_config.yml 配置

1
2
3
aplayer:
  meting: true # MetingJS 支持
  asset_inject: true # 自动插入Aplayer.js与Meting.js资源脚本（默认开启）

单曲实例

之后在页面中引入播放器

1
2
3
4
5
6
7
8
{% aplayer
"光るなら"
"Goose house"
"https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3"
"https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg"
"lrc:https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc"
"width:100%"
%}
歌单实例 
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
28
{% aplayerlist %}
{
    "narrow": false,
    "autoplay": false,
    "mode": "random",//（可选）'random', 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation'
    "showlrc": 3,
    "mutex": true,
    "theme": "#e6d0b2",
    "preload": "metadata",
    "listmaxheight": "513px",
    "music": [
        {
            "title": "前前前世",
            "author": "RADWIMPS",
            "url": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3",
            "pic": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg",
            "lrc": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc"
        },
        {
            "title": "光るなら",
            "author": "Goose house",
            "url": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3",
            "pic": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg",
            "lrc": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc"
        }
    ]
}
{% endaplayerlist %}
参数 说明
title 歌曲标题
author 歌曲作者
url 音乐文件 URL 地址
picture_url （可选）封面图片地址
narrow （可选）播放器袖珍风格
autoplay （可选）自动播放，移动端浏览器暂时不支持此功能
width （可选）播放器宽度 (默认: 100%)
lrc （可选）歌词文件 URL 地址

MetingJS 支持

引入 MetingJS, 播放器支持 QQ 音乐, 网易云等

1
2
3
aplayer:
  meting: true # MetingJS 支持
  asset_inject: true # 自动插入Aplayer.js与Meting.js资源脚本（默认开启）

设置后页面在初始化播放器时会引入 1.2.0 版本的 Meting.min.js 文件
注意不是在主题配置文件_config.yml 设置，设置后要重启 hexo 服务才能生效

Meting JS 单曲

1
{% meting "1330348068" "netease" "song"  "theme: #1da496" %}

Meting JS 歌单

1
{% meting "5237049130" "netease" "playlist" "" "mutex: false" "listmaxheight: 340px" "preload: none" "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 播放器风格色彩设置

播放器设置吸底模式

在 themes/fluid/layout/layout.ejs 文件, 标签添加

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="aplayer"
  data-id="5237049130"
  data-server="netease"
  data-type="playlist"
  data-fixed="true"
  data-autoplay="false"
  data-order="list"
  data-volume="0.5"
  data-theme="#1da496"
  data-preload="auto"
  >
</div>

或者
加入 
1
2
3
4

<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://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>

因为在主题文件中手动加入了依赖文件，所以可以在hexo配置文件中关闭插件的自动脚本插入功能：

1
2
3
aplayer:
  meting: true # MetingJS 支持
  asset_inject: false # 关闭自动脚本插入

全局吸底音乐标签

在 source/css/customs.css 中添加如下代码: 

1
2
3
4
5
6
7
8
9
10
11
12
/* 全局吸底音乐标签 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px !important;
/* 默认情况下缩进左侧66px，只留一点箭头部分 */
}

/* 全局吸底音乐标签 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
left: 0 !important;
/* 鼠标悬停是左侧缩进归零，完全显示按钮 */
}

参考: https://blog.meta-code.top/2021/11/28/2021-43/

播放器自动播放音乐

因为谷歌浏览器的策略, 浏览器在用户没有进行任何交互的时候是无法进行自动播放的

在 source/js/customs.js 中添加如下代码:

核心的代码是: 

1
2
3
4
5
6
7
8
9
10
11
12
<script> 
let ref = setInterval(function(){	//每隔2秒尝试播放一次
    isaplay();
},2000);
function isaplay(){
    $(".aplayer-play").click()	//尝试播放
    setTimeout(function() {		//延时100毫秒再执行其内部的判断
        if($(".aplayer-pause").length > 0){    //`aplayer-button aplayer-pause`是否存在
        clearInterval(ref);		//停止Interval，即停止循环
    }}, 100);
}
</script>

这段代码得自己看着改, 不要直接复制, 起码会改一点, 我的 about 页面是存在两个.aplayer-play类名
所以是:$(".aplayer-play")[0]

1
2
3
4
5
6
7
8
9
10
11
12
13
if (window.location.href === 'https://xiamu.icu/about/' || ) {
    let ref = setInterval(function(){	//每隔2秒尝试播放一次
        isaplay();
    },2000);
    function isaplay(){
        $(".aplayer-play")[0].click()	//尝试播放
        setTimeout(function() {		//延时100毫秒再执行其内部的判断
            if($(".aplayer-pause").length > 0){    //`aplayer-button aplayer-pause`是否存在
            clearInterval(ref);		//停止Interval，即停止循环
        }}, 100);
    }
}

修改成了如下

1
2
3
4
5
6
7
8
9
10
11
12
13
if (window.location.href === 'https://xiamu.icu/about/' || window.location.href === 'http://localhost:4000/about/') {
    let ref = setInterval(function(){	//每隔2秒尝试播放一次
        isaplay();
    },2000);
    function isaplay(){
        $(".aplayer-play")[0].click()	//尝试播放
        setTimeout(function() {		//延时100毫秒再执行其内部的判断
            if($(".aplayer-pause").length > 0){    //`aplayer-button aplayer-pause`是否存在
            clearInterval(ref);		//停止Interval，即停止循环
        }}, 100);
    }
}

参考: https://www.cnblogs.com/chtxrt/p/17053228.html#

hexo
#hexo #音乐播放器
Hexo - 配置音乐播放器
https://xiamu.icu/hexo/hexo添加音乐播放器/
作者
肉豆蔻吖
发布于
2023年2月27日
许可协议