嗯,有好几次在浏览他人博客的时候,发现有个对文章内容相关的音乐,是一件非常棒的事情,也想着有时间的话也给我的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/meting@2.0.1/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/meting@2.0.1/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会保持持续更新,别忘了经常更新代码中的引用版本。