Hexo如何使用添加歌单(音乐)页面

简言

这里我们总结一下在博客中添加音乐页的方法和直接添加插件的方式。
我们这里的主题是hexo-butteryfly。如果大家是其他主题的话，方式应该差不多，需要自己去研究网站的构成。

使用音乐平台提供插件

使用第三方插件

以网易云为例，网页端点击生成外链播放器即可生成外链代码，如我的某个歌单生成外链。
可以在自己博客页面中嵌入插件:

<iframe 
 frameborder="no" border="0" 
 marginwidth="0" marginheight="0" 
 width=530 height=310 
 src="//music.163.com/outchain/player?type=0&id=2205641361&auto=0&height=430">
</iframe>

方便是方便，不过缺点非常明显，而最不能忍得是网易音乐有些音乐因为版权保护，没办法生成外链。

延伸小功能

方法一

这里在延伸一下，添加一个小功能，添加隐藏的背景音乐播放功能

<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
           	src="http://demo.mimvp.com/html5/take_you_fly.mp3">
     		你的浏览器版本太低，不支持audio标签
</audio>

说明：1、使用autoplay=”autoplay”，则背景音乐将在音网页打开后就自动马上播放。

2、使用controls=”controls”，则为了在页面内显示显示控件，如播放按钮。

3、使用”loop=”loop”，则是为了是背景音乐重复播放。

4、使用preload=”auto”，则音频在页面加载的同时进行加载，并预备播放。

5、使用src=””，即是在””内加入背景音乐的保存路径，如：src=”web网页制作\03.mp3”。

如果想隐藏播放控件，则使用一下语句

<style type="text/css">
     audio{
             display: none;
         }
</style>

注意：谷歌不在支持audio的自动播放选项，因为此项涉及声音过大以及流量问题对用户的体验不太好，已经关闭，所以推荐大家使用OGG格式的音频文件即可！

方法二

1	<section><embed src="./bgsound.mp3" autostart="true" loop="true" hidden="true"></embed></section>

src 是音乐地址 loop为true 是循环播放 hidden是隐藏下面的播放器

使用 hexo-tag-aplayer 插件

安装此插件

hexo-tag-aplayer 就是将 APlayer 内嵌入博客页面的 Hexo 插件，hexo就是好，不错不错！

1	$ npm install --save hexo-tag-aplayer

原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地，要了解具体参数和使用可以查看其中文文档了解。

MeingJS 支持 (3.0 新功能)

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

如果想在本插件中使用 MetingJS，请在 Hexo 配置文件 _config.yml 中设置：

1 2	aplayer: meting: true

博客中如何使用

在此文件夹下面的music文件夹有一个index.md,编辑此文件

1	{% meting "3986040" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

在来一个歌单模板

---
title: 我的歌单
date: 2019-09-13 12:12:50
---
{% meting "2300709666" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

有关选项列表如下:

选项	默认值	描述
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`	播放器风格色彩设置

在非post页面中使用

在/source/文件夹下自定义的页面life，如果需要该页面使用插件，最简单的方式就是直接在index.md中引用：

首先在网页头部加入下面代码

<style>
    li {margin: 0em 0;}
    button {min-height: 0px;}
      .aplayer {
	position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 99;
    overflow: visible;
    max-width: 400px;
    box-shadow: none;
	}
</style>

<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>

*其中 css 部分是为了修复主题和播放器不兼容的部分

1	<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

至此，播放器已经引入成功了

body中引入下面代码

1	<div class="aplayer" data-id="357126" data-server=”netease" data-type="song" data-autoplay=”true” data-mode=”circulation”></div>

参数配置如下：

data-id: 歌曲/专辑/歌单对应的id。注意这里需要是歌曲原本的id,不是你自己歌单中点击后显示的。（必须）
data-server: 音乐平台，大致支持以下几个，我只测了一下网易音乐和虾米音乐。（必须）
netease(网易云音乐)
tecent(qq音乐)
xiami(虾米音乐)
kugou(酷狗音乐)
data-type:请求类型（必须）
song(单曲)
album(专辑)
playlist(歌单)
search(搜索)
data-mode: 播放模式(可选)
random(随即)
single(单曲)
circulation(列表循环)
order(列表)
data-autoplay: 自动播放(可选)
false
true