Hexo插入音乐播放器

2018-03-18

博客搭完，总想着继续优化，所以SEO还没弄，就觉得插入背景音乐得提前配置好，不然多单调，生活不能缺少音乐。

下面是我个人网易云播放列表，先看下效果:

使用

其实最重要的就是hexo的一个音乐播放插件：Aplyer, 可以在hexo的官网的插件里找到这个插件，这个插件把国内常用的音乐平台都考虑了，基本都支持的，具体用法可以看托管在github上的Readme文档。

安装 hexo-tag-aplayer

使用npm进行包安装：

1	npm install --save hexo-tag-aplayer

使用Aplayer播放单曲音乐

安装完之后，在你的博文Markdown文档中插入下面代码，就可以播放了

1	{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

比如：

{% aplayer "Final Song (OutaMatic Remix)" "OutaMatic / MØ" "http://m10.music.126.net/20180319155625/84285920851537de9043c7be559eca1e/ymusic/4ba1/ca75/1b0f/2d7f58612c6d318436c5be55a0eb78dd.mp3" "http://p1.music.126.net/Exmbjlfrsksz0K66L_Ljnw==/1412872456535765.jpg", "autoplay" %}

注意：上面单曲的内容没有显示出来，是因为一个文档里面不支持包含metingJS、Aplayer同时播放，而且根据我自己的测试，是优先播放MetingJS的插件，也就是专辑播放的优先级大于单曲播放，但是可以使用metingJS进行单曲播放，比如：

1	{% meting "427614378" "netease" "song" %}

上面的内容都是需要自己填的，包括图片地址，mp3地址(可以是本地，也可以是放在别的服务器上的url) ，具体怎么获取，我是利用chrome的开发工具查看资源的地址，后面再用一篇博文专门介绍下chrome的开发工具的使用。

使用MeingJS播放专辑和列表

在配置文件_config.yml启用MeingJS

1 2	aplayer: meting: true

然后插入代码

<!-- Simple example (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- Advanced example -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

比如，插入我个人网易云播放列表：

1	{% meting "157600392" "netease" "playlist" %}

效果如下：

关于id

网易云打开一首歌，或者一个列表，在浏览器的地址栏就可以看到id号

下面是我参考的几篇文章：