如何给博客加上音乐

介绍

今天在逛技术大佬的博客的时候，发现他们的有的生活向的博客放上了自己喜欢的音乐，这让我心神向往。以我的好奇心加爱折腾的个性，必要给我的博客来一个这个功能。?

本文首发于我的技术博客Timbok.top

正文

十多分钟的百度加Google，看到了两种可行的方法。

方法一

安装 hexo-tag-aplayer

npm install --save hexo-tag-aplayer

在你需要的地方引入

{% aplayer "歌曲名称" "作者" "音乐_url" "封面图片_url" "autoplay" %}

参数列表

• title : 曲目标题
• author: 曲目作者
• url: 音乐文件 URL 地址
• picture_url: (可选) 音乐对应的图片地址
• narrow: （可选）播放器袖珍风格
• autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
• width:xxx: (可选) 播放器宽度 (默认: 100%)
• lrc:xxx: （可选）歌词文件 URL 地址

注意：这里的url推荐放在七牛上，加载速度倍快。?

在该插件的GitHub上还推荐了另一种更便捷的方法。使用MeingJS

以下是GitHub原话

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

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

aplayer:
  meting: true
复制代码

接着就可以通过 {% meting ...%} 在文章中使用 MetingJS 播放器了：

<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}
复制代码

具体请前往 hexo-tag-aplayer 查看

方法二

利用网易云提供的音乐iframe标签，在ejs模板里配置。 这样的好处就是添加歌曲的位置更自由。

由于网易云有的歌曲没有iframe，博主没有使用该方法

总结

想先看加上音乐效果的请查看。