From 936e882ac27eeaa1eb77ce7ea8fd26fe0bf43435 Mon Sep 17 00:00:00 2001
From: ykxkykx <ykxkykx@foxmail.com>
Date: Mon, 2 Jan 2023 04:00:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4Aplayer=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=E6=96=B9=E5=BC=8F=E4=B8=BA=E8=84=9A=E6=9C=AC=E9=93=BE?=
 =?UTF-8?q?=E6=8E=A5,=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87metingJS=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E9=9F=B3=E4=B9=90=E5=B9=B3=E5=8F=B0=E6=AD=8C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                 |  1 +
 blog.config.js             |  6 +++++-
 components/CommonScript.js |  4 ++++
 components/Player.js       | 29 +++++++++++++++++++++--------
 package.json               |  1 -
 pages/_app.js              |  3 ---
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index dcb5930f..a1a007c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,7 @@ yarn-error.log*
 # dev
 /data.json
 /yarn.lock
+/pnpm-lock.yaml
 .idea
 .vscode
 
diff --git a/blog.config.js b/blog.config.js
index d929369c..ed764d60 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -69,7 +69,8 @@ const BLOG = {
   // 音乐播放插件
   MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || true, // 是否使用音乐播放插件
   MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换
-  MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放（移动设备不支持自动播放）
+  MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过时常不生效（移动设备不支持自动播放）
+  MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）
   MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random
   MUSIC_PLAYER_AUDIO_LIST: [ // 除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
     {
@@ -85,6 +86,9 @@ const BLOG = {
       cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
     }
   ],
+  MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS
+  MUSIC_PLAYER_METING_SERVER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]
+  MUSIC_PLAYER_METING_ID: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id
 
   // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
 
diff --git a/components/CommonScript.js b/components/CommonScript.js
index ae924fbd..1488d5b9 100644
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -101,6 +101,10 @@ const CommonScript = () => {
               }}
       />
     </>)}
+
+    {/* 引入音乐播放 */}
+    <script async src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" />
+    <script async src="https://cdnjs.cloudflare.com/ajax/libs/meting/2.0.1/Meting.min.js" />
   </>)
 }
 
diff --git a/components/Player.js b/components/Player.js
index 4b312c4d..d8e7ed0e 100644
--- a/components/Player.js
+++ b/components/Player.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import Aplayer from 'aplayer'
 import BLOG from '@/blog.config'
 
 const Player = () => {
@@ -7,10 +6,11 @@ const Player = () => {
   const ref = React.useRef(null)
 
   React.useEffect(() => {
-    if (BLOG.MUSIC_PLAYER) {
-      setPlayer(new Aplayer({
+    if (BLOG.MUSIC_PLAYER && !BLOG.MUSIC_PLAYER_METING) {
+      setPlayer(new window.APlayer({
         container: ref.current,
         fixed: true,
+        showlrc: BLOG.MUSIC_PLAYER_SHOW_LRC,
         order: BLOG.MUSIC_PLAYER_ORDER,
         autoplay: BLOG.MUSIC_PLAYER_AUTO_PLAY,
         audio: BLOG.MUSIC_PLAYER_AUDIO_LIST
@@ -22,11 +22,24 @@ const Player = () => {
   }, [])
 
   return (
-    <div
-      ref={ref}
-      data-player={player}
-      className={BLOG.MUSIC_PLAYER_VISIBLE ? 'visible' : 'invisible'}
-    />
+    <div className={BLOG.MUSIC_PLAYER_VISIBLE ? 'visible' : 'invisible'}>
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css"
+      />
+      {BLOG.MUSIC_PLAYER && BLOG.MUSIC_PLAYER_METING
+        ? <meting-js
+            fixed
+            type="playlist"
+            order={BLOG.MUSIC_PLAYER_ORDER}
+            autoplay={BLOG.MUSIC_PLAYER_AUTO_PLAY}
+            server={BLOG.MUSIC_PLAYER_METING_SERVER}
+            id={BLOG.MUSIC_PLAYER_METING_ID}
+          />
+        : <div ref={ref} data-player={player} />
+      }
+    </div>
   )
 }
 
diff --git a/package.json b/package.json
index e731b18e..8d68b740 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
     "animate.css": "^4.1.1",
     "animejs": "^3.2.1",
     "aos": "^3.0.0-beta.6",
-    "aplayer": "1.10.1",
     "axios": ">=0.21.1",
     "copy-to-clipboard": "^3.3.1",
     "eslint-plugin-react-hooks": "^4.6.0",
diff --git a/pages/_app.js b/pages/_app.js
index 37206a0c..6ca21c7c 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -19,9 +19,6 @@ import '@fontsource/noto-serif-sc'
 // local fontawesome 6.2.1 @see https://www.npmjs.com/package/@fortawesome/fontawesome-free
 import '@fortawesome/fontawesome-free/css/all.min.css'
 
-// Aplayer.js 的样式
-import 'aplayer/dist/APlayer.min.css'
-
 // import '@/styles/prism-mac-style.css' // code 左上角显示mac的红黄绿图标
 
 import { GlobalContextProvider } from '@/lib/global'