嗯，有好几次在浏览他人博客的时候，发现有个对文章内容相关的音乐，是一件非常棒的事情，也想着有时间的话也给我的blog弄一个，其实方法还是蛮多的，之前用过网易云的用户都发现有些歌曲是可以生成站外播放器的，但是这个功能有些许局限性（主要是版权的因素），所以我在这里用了一个更加麻烦，但是在功能、颜值、各方面更棒的解决方案，那就是 APlayer + MetingJS

文章内插入播放器

  首先讲一下如何在文章内嵌入播放器吧，这个场景比较适合写一些生活向文章（类似于vlog那种？）的时候使用。

1. 解除安全限制

  需要注意的一点是20200111更新后的hugo，在文章（markdown）中嵌入的html标签，在浏览器中全部被替换成了一句<!-- raw HTML omitted -->,对于这个问题，官网论坛Hugo 0.60.0 Raw HTML omitted Issue 中已经有人提起过此问题，（其实也不是什么不好的事情，Hugo的安全性提高了），并且已经有人给出了答案，只需要启用非安全模式即可，在博客的根目录config.toml中添加如下代码

[markup.goldmark.renderer]
unsafe= true

2. 引用Aplayer和MetingJS

  完成上述步骤后，在你的head.html中添加以下代码，以引入Aplayer和MetingJS

<!-- 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/[email protected]/dist/Meting.min.js"></script>

  随后在你需要插入音乐播放器的文章中，添加

<meting-js auto="link" list-folded=true></meting-js>

  上述link为你音乐的连接，list-folded是当你有多首歌的时候默认折叠列表，其他具体参数请看Option，成功的效果就像本文章中的播放器一致～

添加全局播放器

  有些场景下，可能不会为文章插入音乐，但是可以从网站整体插入个播放器，里面添加一些自己喜欢的歌，也是很不错的。

1. 创建播放器组件

  在你主题文件夹下partials中添加music.html

<!DOCTYPE html>
<html>

<head>
    <!-- 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/[email protected]/dist/Meting.min.js"></script>
</head>

<body>
    <div class="demo">
        <div id="player1">
        </div>
    </div>
    <script>
        var ap = new APlayer
            ({
                element: document.getElementById('player1'),
                fixed: true,
                autoplay: false,
                mini: true,
                theme: '#63b8fd',
                loop: 'all',
                order: 'random',
                preload: 'auto',
                volume: 0.7,
                mutex: true,
                listFolded: false,
                listMaxHeight: 90,
                lrcType: 0,
                music:
                    [
                        {
                            name:' ',
                            ...
                        },
                    ]
        });
        //ap.init();
    </script>
</body>

  看你需要在哪里使用，我在footer.html中引用了这个文件

 {{ partial "music" . }}

2. 歌曲外链寻找

  你可能会为歌曲的那几个参数为难,推荐一个网站，先把自己要添加的音乐从官网把url拿下来，然后放到这个网站的音乐地址功能栏中的输入框中去解析即可。最后把相关参数填入

music[
    {
        name:' ',
        artists:' ',
        url:' ',
        cover:' '
        lrc:' ',
    },
    {
        name:' ',
        ...
    }
]

  最终效果为本站左下角的小播放器～

一些指南

Aplayer的参数

Aplayer的参数

详细请看：官网地址

CDN

  Aplayer和MetingJS会保持持续更新，别忘了经常更新代码中的引用版本。