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 進行了替換，步驟也很簡單：

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 的定製版本，又繞回來了。。