Leafs's Blog.

从零开始搭建Blog（三）

音乐播放器APlayer的使用

Blog 音乐 APlayer
字数统计: 1.1k阅读时长: 5 min
2020/08/05 Share

上一篇文章已经把Live2D模型加载进网页里了，但我选的模型是没有语音的，所以总感觉缺少点什么，找了找，发现不少Blog都有加音乐播放器。比较了几种音乐播放器之后，发现APlayer这个播放器不错。

使用相关

APlayer插件

Hexo 里可以用的APlayer插件有两种： hexo-tag-aplayer 和 APlayer 。

第一种我翻看了不少说明和Blog，都没有说全局的使用方法，所以我弃用了这个 hexo-tag-aplayer 插件，不过如果有需要在个别网页添加音乐的，可以考虑这个插件。

第二种看说明就有点复杂了，毕竟我不懂前端，所以我并不是很清楚说明里的代码该添加到哪。翻看了写Blog，找到一篇讲到了 APlayer 全局应用的。

为Hexo博客添加全局APlayer播放器

这篇文章里提供了简单方便的使用方法。

添加APlayer代码

打开 Hexo目录 文件夹下的 themes 文件夹，然后打开 你的Hexo主题名 文件夹下的 layout 文件夹，再打开其中的布局文件，比如我用的 Archer 主题就是 X:\Hexo目录\themes\archer\layout\layout.ejs 。

图 9

然后添加代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 引用依赖 -->
<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>

<!-- 我使用的APlayer本体 -->
<div class="aplayer" 
  data-id="2465890057" 
  data-server="netease" 
  data-type="playlist" 
  data-fixed="true" 
  data-autoplay="true" 
  data-order="random" 
  data-volume="0.55" 
  data-theme="#cc543a" 
  data-preload="auto" >
  </div>
<!--如果将本体放在body里面导致页面加载出现问题，请尝试放到body体后面-->

这样就可以在网页中添加一个 APlayer 音乐播放器了。

具体参数设置可以参考 APlayer中文文档 。

出现的问题

APlayer设置完成后，我打开Blog，发现文章中的侧目录不能跳转了，再测试下，又发现是英文目录正常跳转，中文目录无法跳转。

图 10

咋回事？

然后注释掉APlayer相关代码后，跳转又正常了，说明问题是出现再APlayer上，但翻了翻APlayer的 Issues 并没有发现简单易行的方法。

这时候只能请出万能的百度谷歌了。

然后我找到了这篇文章。

使用 Aplayer 导致博客目录跳转失效

这篇文章说是其中一个调用的插件 smoothscroll 。

然后我发现它处理 hash 时只测试了英文，而使用中文时，中文字符转成了 Unicode 码，下面函数的判断条件无法成立，后面的点击处理也就失效了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var linkHandler = function(ev) {
    if (!ev.defaultPrevented) {
        ev.preventDefault();

        if (location.hash !== this.hash) window.history.pushState(null, null, this.hash)
        // using the history api to solve issue #1 - back doesn't work
        // most browser don't update :target when the history api is used:
        // THIS IS A BUG FROM THE BROWSERS.
        // change the scrolling duration in this call
        var node = document.getElementById(this.hash.substring(1))
        if (!node) return; // Do not scroll to non-existing node

        smoothScroll(node, 500, function (el) {
            location.replace('#' + el.id)
            // this will cause the :target to be activated.
        });
    }
}

需要修改的地方是对 hash 的进行 decodeURIComponent 处理，这样就能正常处理中文的标签和 location 的对应问题了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var linkHandler = function(ev) {
    if (!ev.defaultPrevented) {
        ev.preventDefault();

        if (decodeURIComponent(location.hash) !== decodeURIComponent(this.hash)) window.history.pushState(null, null, decodeURIComponent(this.hash))
        // using the history api to solve issue #1 - back doesn't work
        // most browser don't update :target when the history api is used:
        // THIS IS A BUG FROM THE BROWSERS.
        // change the scrolling duration in this call
        var node = document.getElementById(decodeURIComponent(this.hash).substring(1))
        if (!node) return; // Do not scroll to non-existing node

        smoothScroll(node, 500, function (el) {
            location.replace('#' + el.id)
            // this will cause the :target to be activated.
        });
    }
}

看不懂没关系，文章作者打包了现成的 APlayer.min.js ，你可以直接应用这个文件。

当然，你也可以用现成的代码替换代上面的APlayer代码。

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/gh/laurelcafe/item@1.0/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>

这样中文侧目录就不会跳转失败了。

CATALOG
  1. 1. 使用相关
  2. 2. APlayer插件
    1. 2.1. 添加APlayer代码
    2. 2.2. 出现的问题
Total : 6
2020
Blog Hexo GitHub Live2D 模型 音乐 APlayer VScode 扩展 Keepass Steam 密码