阅读 76

如何给博客加上音乐

介绍

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

本文首发于我的技术博客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,博主没有使用该方法

总结

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

关注下面的标签,发现更多相似文章
评论