1.2k 字 15 分钟

本文最后更新于：4 个月前

一款炫丽的网页播放器插件

网上看到一款挺不错的基于 HTML 5 实现的播放器插件，支持多平台音乐解析、精准 LRC 歌词、智能记忆、视频播放等多种功能。目前免费使用，只需注册即可 DIY。作者表明自己是个初！中！生！，在 2016 年用业余时间写的（网传是抄袭、暴力破解他人作品），目前每天的访问量 10W+，用的人还是挺多的，本站点也进行了集成，可在左下角体验效果。

2020 年 04 月 01 日更新：本站已弃用绚丽彩虹，推荐 明月浩空

转载链接：https://www.liaofuzhan.com/posts/2636059693.html

绚丽彩虹播放器

绚丽彩虹播放器

uxH7Hs.gif

相关的功能介绍可参考：

绚丽彩虹播放器http://www.badapple.top/

之前用的是 APlayer 这款播放器，其吸盘模式能放在网页左下角，外链需自己逐个添加。由于本站要过滤 HTTP 链接，想要的外链不好找，而且在 IE 11 （博主的破旧电脑） 里 JS 一大堆报错。。部分非主流浏览器（谁会用呢 -.-!）兼容还有点问题。

PS：NexT 5.1.4 在 Pisces 这个 scheme 下，左侧栏 sidebar 在 IE 11 里会不显示。（本站已修复）

基于这些原因（主要是找到了更好的~），所以将 Aplayer 进行了替换，步骤也很简单：

  1. 在 next/layout/_layout.swig 的 body 体内部，新增如下代码：
  复制<!-- badApplePlayer -->
{% if theme.badApplePlayer.enable %}
  <!-- Your XlchPlayerKey -->
  <script>XlchKey="{{theme.badApplePlayer.XlchKey}}";</script>
  <!-- font-awesome 4.2.0 -->
  <link href="https://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <!-- JQuery-mousewheel 3.1.9 -->
  <script src="https://lib.baomitu.com/jquery-mousewheel/3.1.9/jquery.mousewheel.min.js"></script>
  <!-- Scrollbar -->
  <script src="https://static.https.badapple.top/BadApplePlayer/js/scrollbar.js"></script>
  <!-- BadApplePlayer -->
  <script src="https://static.https.badapple.top/BadApplePlayer/Player.js"></script>
{% endif %}

其还需要依赖 jquery ，我在做其它功能时已经引入，这里就不需要了，如果你加了以上代码没效果，那么再补充：

复制<script src="https://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script>

以上链接均可换成 http 的，按需修改即可。

  1. 在主题配置文件 _config.yml 中，添加配置：
  复制# http://www.badapple.top
badApplePlayer:
  enable: true
  XlchKey: your_key # 播放器Key

XlchKey 为你自己的播放器 Key，官网完成注册，添加播放器后即可生成。你也可使用我的 BZ9DLOyFjh 来测试下。

  1. 调整播放器在移动端大小（可选）。需要在 head 标签内添加以下代码，比如我是在 next/layout/_layout.swig 的 head 内加的：
  复制{% if theme.badApplePlayer.enable %}
  <meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9" />
{% endif %}

hexo 三连即可看到效果。附上视频教程地址：

绚丽彩虹播放器 [BadApplePlayer] 播放器教程 V20170122 https://www.bilibili.com/video/av8153459

按照教程就可以添加网易云这些第三方平台的歌单啦！

明月浩空音乐播放器

由于绚丽彩虹经常宕机，在网上找替换方案的同时，翻到了明月浩空 的网站。细品了这位大佬诸多文章后，才发现他才是播放器的原作者，只能说盗版行为太昌盛，真假难辨…明月浩空音乐播放器已经商用，功能很强大，如今开放了免费注册功能，大家不妨体验一下

明月浩空音乐播放器https://player.lmih.cn/

PS：其实也是基于 APlayer 的定制版本，又绕回来了。。😝

宅音乐播放器

另外一款，看了下代码，插件是修改于明月浩空免费版，体验了下，bug 挺多，毕竟是阉割版，不过它可以添加多个播放器和歌单，而明月浩空则需要付费才可以。体验地址：

宅音乐播放器https://player.ilt.me/

作者还分享了源代码和安装教程：

宅音乐播放器源代码https://github.com/lzx8589561/zhai-music

底层使用 PHP 所写，前端为 LayUI 框架，数据库用的 MySQL

写在最后

之前搭建的几款 JAVA 后端框架，可以用来 DIY 一个自己的播放器，彻底重写，有兴趣的朋友可以尝试一下。

相关文章

点击查看

 目录