From 1a0047e2447efc6d3e882ba87def09b331a82e5a Mon Sep 17 00:00:00 2001
From: ykxkykx <ykxkykx@foxmail.com>
Date: Tue, 3 Jan 2023 17:40:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=88=A4=E6=96=AD=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js             |  8 ++++----
 components/CommonScript.js |  4 ++--
 components/Player.js       | 18 ++++++++++++------
 pages/_app.js              |  2 +-
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index ed764d60..04559428 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -67,12 +67,12 @@ const BLOG = {
   WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
 
   // 音乐播放插件
-  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: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
+  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_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/
+  MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
     {
       name: '风を共に舞う気持ち',
       artist: 'Falcom Sound Team jdk',
diff --git a/components/CommonScript.js b/components/CommonScript.js
index 1488d5b9..446b0017 100644
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -103,8 +103,8 @@ 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" />
+    {JSON.parse(BLOG.MUSIC_PLAYER) && <script async src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" />}
+    {JSON.parse(BLOG.MUSIC_PLAYER) && JSON.parse(BLOG.MUSIC_PLAYER_METING) && <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 d8e7ed0e..d3370802 100644
--- a/components/Player.js
+++ b/components/Player.js
@@ -5,14 +5,20 @@ const Player = () => {
   const [player, setPlayer] = React.useState()
   const ref = React.useRef(null)
 
+  const showLrc = JSON.parse(BLOG.MUSIC_PLAYER_SHOW_LRC)
+  const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
+  const autoPlay = JSON.parse(BLOG.MUSIC_PLAYER_AUTO_PLAY)
+
+  const meting = JSON.parse(BLOG.MUSIC_PLAYER_METING)
+
   React.useEffect(() => {
-    if (BLOG.MUSIC_PLAYER && !BLOG.MUSIC_PLAYER_METING) {
+    if (!meting) {
       setPlayer(new window.APlayer({
         container: ref.current,
         fixed: true,
-        showlrc: BLOG.MUSIC_PLAYER_SHOW_LRC,
+        showlrc: showLrc,
+        autoplay: autoPlay,
         order: BLOG.MUSIC_PLAYER_ORDER,
-        autoplay: BLOG.MUSIC_PLAYER_AUTO_PLAY,
         audio: BLOG.MUSIC_PLAYER_AUDIO_LIST
       }))
     }
@@ -22,18 +28,18 @@ const Player = () => {
   }, [])
 
   return (
-    <div className={BLOG.MUSIC_PLAYER_VISIBLE ? 'visible' : 'invisible'}>
+    <div className={playerVisible ? '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
         ? <meting-js
             fixed
             type="playlist"
+            autoplay={autoPlay}
             order={BLOG.MUSIC_PLAYER_ORDER}
-            autoplay={BLOG.MUSIC_PLAYER_AUTO_PLAY}
             server={BLOG.MUSIC_PLAYER_METING_SERVER}
             id={BLOG.MUSIC_PLAYER_METING_ID}
           />
diff --git a/pages/_app.js b/pages/_app.js
index 6ca21c7c..26cee7d9 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -48,6 +48,7 @@ const MyApp = ({ Component, pageProps }) => {
         {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
         {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
         {JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
+        {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
     </>
 
   // 默认Webfont:  请在font.js文件中检查font-family 新版改从npm本地导入；
@@ -65,7 +66,6 @@ const MyApp = ({ Component, pageProps }) => {
             {FONTS_URL?.map(fontUrl => <link href={`${fontUrl}`} key={fontUrl} rel="stylesheet" />)}
             {externalPlugins}
             <Component {...pageProps} />
-            <MusicPlayer />
         </GlobalContextProvider>
   )
 }