title: 一款炫麗的網頁播放器插件
date: 2020-4-22 22:00:00
tags:
- 博客
一款炫麗的網頁播放器插件
網上看到一款挺不錯的基於 HTML 5 實現的播放器插件，支持多平台音樂解析、精准 LRC 歌詞、智能記憶、視頻播放等多種功能。目前免費使用，只需注冊即可 DIY。作者表明自己是個初！中！生！，在 2016 年用業余時間寫的（網傳是抄襲、暴力破解他人作品），目前每天的訪問量 10W+，用的人還是挺多的，本站點也進行了集成，可在左下角體驗效果。
2020 年 04 月 01 日更新：本站已棄用絢麗彩虹，推薦 明月浩空
轉載鏈接：https://www.liaofuzhan.com/posts/2636059693.html
絢麗彩虹播放器
相關的功能介紹可參考：
絢麗彩虹播放器http://www.badapple.top/
之前用的是 APlayer 這款播放器，其吸盤模式能放在網頁左下角，外鏈需自己逐個添加。由於本站要過濾 HTTP 鏈接，想要的外鏈不好找，而且在 IE 11 （博主的破舊電腦） 里 JS 一大堆報錯。。部分非主流瀏覽器（誰會用呢 -.-!）兼容還有點問題。
PS：NexT 5.1.4 在 Pisces 這個 scheme 下，左側欄 sidebar 在 IE 11 里會不顯示。（本站已修復）
基於這些原因（主要是找到了更好的~），所以將 Aplayer 進行了替換，步驟也很簡單：
- 在 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 的，按需修改即可。
- 在主題配置文件 _config.yml 中，添加配置：
復制# http://www.badapple.top
badApplePlayer:
enable: true
XlchKey: your_key # 播放器Key
XlchKey 為你自己的播放器 Key，官網完成注冊，添加播放器后即可生成。你也可使用我的 BZ9DLOyFjh 來測試下。
- 調整播放器在移動端大小（可選）。需要在 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://github.com/lzx8589561/zhai-music
底層使用 PHP 所寫，前端為 LayUI 框架，數據庫用的 MySQL
寫在最后
之前搭建的幾款 JAVA 后端框架，可以用來 DIY 一個自己的播放器，徹底重寫，有興趣的朋友可以嘗試一下。