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

网上看到一款挺不错的基于 HTML 5 实现的播放器，支持多平台音乐解析、精准 LRC 歌词、智能记忆、多终端兼容等功能。目前免费使用，只需注册即可 DIY，本站点也进行了集成，可在左下角体验效果。

星晨播放器

星晨播放器

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

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

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

1. 在 next/layout/_layout.swig 的 body 体内部，新增如下代码：

<!-- leafacePlayer -->
{% if theme.leafacePlayer.enable %}
  <script id="lfz" src="https://player.liaofuzhan.com/player/player.js" key=1298162711527071745></script>
{% endif %}

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

<script src="https://cdn.jsdelivr.net/npm/jquery@3.0.0/dist/jquery.min.js"></script>

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

2. 在主题配置文件 _config.yml 中，添加配置：

# https://player.liaofuzhan.com/music/
leafacePlayer:
  enable: true

3. 调整播放器在移动端大小（可选）。需要在 head 标签内添加以下代码，比如我是在 next/layout/_layout.swig 的 head 内加的：

{% if theme.leafacePlayer.enable %}
  <meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9" />
{% endif %}

hexo 三连即可看到效果。

写在最后

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