changliang.io

为Hexo配置Aplayer播放器

字数统计: 456阅读时长: 1 min
2019/10/02 Share

  今天听着Rod Stewart的《Sailing》这首比我年龄都大的老歌,心血来潮,要将它放到博客上,但是网易云音乐现在大部分歌曲都禁止外链了,其中也包括这首经典,没有办法,只能“曲线救国”了……

  在博客中嵌入播放器的方案很多,Aplayer是其中一个非常棒的项目,研究了一下,可以通过几个js和css文件的引入就能实现博客上音乐的播放,风格也很简洁实用,但是这次我希望能在Hexo中的个别文章中通过插入标签的方式来嵌入音乐,而不是整个博客。最终找到了由grzhan维护的适用于Hexo的hexo-tag-aplayer插件,该插件使用非常灵活、方便,安装只需要在博客根目录运行:

npm install --save hexo-tag-aplayer

  插件的使用也很简单,在需要嵌入播放器的页面通过aplayer标签在页面中直接插入相关信息即可:

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

  如:

1
{% aplayer "Sailing" "Rod Stewart" "Sailing.mp3" "album.jpg" "width:310px" %}

  后来发现该插件还支持MetingJS,对于使用网易云音乐的我来说就更加方便了,只需设置音乐或者专辑的ID即可添加音乐,非常方便,如添加Sailing这首歌:

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

  至此,本次想要实现的功能已经全部实现了,效果详见Sailing - Rod Stewart
  在此也感谢上述项目的作者。这次只记录了适用于我的几个参数和代码示例,需要完整参数和使用方法请移步各项目主页,文章中已设置跳转链接。

目录