Hexo NexT 打造APlayer HTML5 音乐播放器

为啥要用APlayer 插件:

很早之前用过网易云音乐 生成的外链播放器, 操作和效果都还可以, 致命的缺点是因为版权原因, 有些歌曲生成的外链在 放入文章后不能播放或者干脆在你生成外链的时候是不能生成的, 脑阔疼~~

直接进入APlayer播放器的实现:

介绍:

🍭 Wow, such a beautiful HTML5 music player (如此漂亮的HTML5音乐播放器)

安装步骤:

使用npm安装:

首先进入到你的站点目录, 大致是 x:\hexo (x代表你的博客所在磁盘, 这里以Windows系统为例,其他系统自行判断). 运行以下命令:

1
npm install --save hexo-tag-aplayer

使用:

在你想放置播放器的文章或页面插入以下代码:

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

当然了上面代码里的选项简单说一下:

  • title : 音乐名称
  • author: 艺人
  • url: 音乐URL
  • picture_url: 音乐图片URL(可选)
  • narrow: optional, narrow style
  • autoplay: 音乐自动播放, 不被移动端浏览器支持(可选)
  • width:xxx: 前缀 width:,播放器的宽度 (default: 100%), (可选)
  • lrc:xxx: 前缀 lrc:, 歌词文件url (可选)

测试:

  • 使用音乐外链无歌词的示例:
1
{% aplayer "你怎麼說" "Jay && 邓丽君" "http://fs.open.kugou.com/15ad66aa2470482df1919a5538a6c663/5c1eea95/G008/M04/0B/05/qIYBAFUGzV-ADtHPAExveQ6d2Rs873.mp3" "autoplay" %}

1



  • 使用音乐外链带歌词的示例:
1
2
3
{% aplayerlrc "你怎麼說" "Jay && 邓丽君" "http://fs.open.kugou.com/15ad66aa2470482df1919a5538a6c663/5c1eea95/G008/M04/0B/05/qIYBAFUGzV-ADtHPAExveQ6d2Rs873.mp3" "autoplay" %}
[00:04.76]你怎么说[00:26.31]我没忘记你忘记我[00:32.53]连名字你都说错[00:50.51]你说过两天来看我[00:56.04]一走就是一年多[01:01.36]三百六十五个日子不好过[01:07.93]你心里根本没有我[01:14.37]把我的爱情还给我[01:43.60]我没忘记你忘记我[01:49.80]连名字你都说错[01:55.97]证明你一切都是在骗我[02:01.95]看今天你怎么说[02:07.16]你说过两天来看我[02:13.20]一等就是一年多[02:18.26]三百六十五个日子不好过[02:25.22]你心里根本没有我[02:31.43]把我的爱情还给我[02:36.75]红尘客栈[02:39.13]天涯的尽头是风沙[02:44.59]红尘的故事叫牵挂[02:50.01]封刀隐没在寻常人家东篱下[02:55.53]闲云野鹤古剎[03:03.19]快马在江湖里厮杀[03:08.92]无非是名跟利放不下[03:14.01]心中有江山的人岂能快意潇洒[03:19.91]我只求与你共华发[03:27.01]剑出鞘 恩怨了 谁笑[03:31.61]我只求今朝拥你入怀抱[03:37.02]红尘客栈风似刀[03:41.08]骤雨落宿命敲[03:46.26]任武林谁领风骚我却[03:49.76]只为你折腰[03:52.82]你回眸多娇我泪中带笑[03:58.36]酒招旗风中萧萧[04:02.41]剑出鞘恩怨了[04:08.58]千里之外[04:13.09]我送你离开千里之外[04:17.64]你无声黑白[04:21.62]沉默年代或许不该[04:25.62]太遥远的相爱[04:29.59]我送你离开天涯之外[04:33.79]你是否还在[04:37.85]琴声何来生死难猜[04:41.90]用一生去等待
{% endaplayerlrc %}

2

[00:04.76]你怎么说[00:26.31]我没忘记你忘记我[00:32.53]连名字你都说错[00:50.51]你说过两天来看我[00:56.04]一走就是一年多[01:01.36]三百六十五个日子不好过[01:07.93]你心里根本没有我[01:14.37]把我的爱情还给我[01:43.60]我没忘记你忘记我[01:49.80]连名字你都说错[01:55.97]证明你一切都是在骗我[02:01.95]看今天你怎么说[02:07.16]你说过两天来看我[02:13.20]一等就是一年多[02:18.26]三百六十五个日子不好过[02:25.22]你心里根本没有我[02:31.43]把我的爱情还给我[02:36.75]红尘客栈[02:39.13]天涯的尽头是风沙[02:44.59]红尘的故事叫牵挂[02:50.01]封刀隐没在寻常人家东篱下[02:55.53]闲云野鹤古剎[03:03.19]快马在江湖里厮杀[03:08.92]无非是名跟利放不下[03:14.01]心中有江山的人岂能快意潇洒[03:19.91]我只求与你共华发[03:27.01]剑出鞘 恩怨了 谁笑[03:31.61]我只求今朝拥你入怀抱[03:37.02]红尘客栈风似刀[03:41.08]骤雨落宿命敲[03:46.26]任武林谁领风骚我却[03:49.76]只为你折腰[03:52.82]你回眸多娇我泪中带笑[03:58.36]酒招旗风中萧萧[04:02.41]剑出鞘恩怨了[04:08.58]千里之外[04:13.09]我送你离开千里之外[04:17.64]你无声黑白[04:21.62]沉默年代或许不该[04:25.62]太遥远的相爱[04:29.59]我送你离开天涯之外[04:33.79]你是否还在[04:37.85]琴声何来生死难猜[04:41.90]用一生去等待
  • 接下来用metingJS的写法来实现, 上面的播放器之所以没有显示出来, 是因为用了metingJS, 那么APlayer就无法显示, 其实把metingJS的代码删除就可以显示播放器了. 先启用metingJS:

    hexo 的站点配置文件_config.yml中:

1
2
aplayer:
meting: true

meting 单曲示例:

这里的参数: 歌曲ID、服务器、播放器类型 ,具体的ID怎么获取我在文章最后给出参考链接.

1
{% meting "000IAEln10GWew" "tencent" "song" %}

meting 播放列表示例:

1
2
3
4
5
<!-- 简单示例 (id, server, type) -->
{% meting "60198" "netease" "playlist" %}
<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

结语:

好了, 就写这么多吧, 有问题就多看官方文档和善用搜索, 虽然我感觉官方文档没有什么看头, 也是假定你有一点的代码知识和沉下心来多看几遍.

感谢各位大佬的文章:

  1. APlayer

  2. metingJS

  3. 音乐直链服务

生活不止眼前的苟且,还有那片海