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

网上看到一款挺不错的基于 HTML 5 实现的播放器插件,支持多平台音乐解析、精准LRC歌词、智能记忆、视频播放等多种功能。目前可免费使用,只需注册即可 DIY。作者表明自己是个初!中!生!,在 2016 年用业余时间写的,惊呆了!大神无处不在!目前每天的访问量 10W+,用的人还是挺多的,本站点也进行了集成,可在左下角体验效果。对了,这款插件叫——绚丽彩虹播放器,以下附上部分效果截图。

绚丽彩虹播放器

uxH7Hs.gif

相关的功能介绍可参考官网:

绚丽彩虹播放器

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

PS:NexT 5.1.4 在 Pisces 这个 scheme 下,左侧栏 sidebar 在 IE 11 里会不显示。(本站已修复)

基于这些原因(主要是找到了更好的~),所以将 Aplayer 进行了替换,步骤也很简单:

  1. 在 /themes/next/layout/_layout.swig 的 body 体内部,新增如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 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 ,我在做其它功能时已经引入,这里就不需要了,如果你加了以上代码没效果,那么再补充:

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

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

  1. 在主题配置文件 _config.yml 中,添加配置:
1
2
3
4
# http://www.badapple.top
badApplePlayer:
enable: true
XlchKey: your_key # 播放器Key

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

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

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

绚丽彩虹播放器[BadApplePlayer]播放器教程 V20170122

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

点击查看

本文标题:一款炫丽的网页播放器插件

文章作者:北宸

发布时间:2019年10月13日 - 19:50:33

最后更新:2019年10月13日 - 23:52:53

原始链接:https://leafjame.github.io/posts/2636059693.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------