feat: 支持Aplayer播放音乐的配置

blog.config.js

@@ -66,6 +66,26 @@ const BLOG = {
   WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
   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_ORDER: 'list', // 默认播放方式，顺序 list，随机 random
+  MUSIC_PLAYER_AUDIO_LIST: [ // 除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
+    {
+      name: '风を共に舞う気持ち',
+      artist: 'Falcom Sound Team jdk',
+      url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',
+      cover: 'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+    },
+    {
+      name: '王都グランセル',
+      artist: 'Falcom Sound Team jdk',
+      url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',
+      cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
+    }
+  ],
+
   // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
 
   // twikoo

components/MusicPlayer.js

@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const MusicPlayer = dynamic(
+  () => import('@/components/Player'),
+  { ssr: false }
+)
+export default MusicPlayer

components/Player.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import Aplayer from 'aplayer'
+import BLOG from '@/blog.config'
+
+const Player = () => {
+  const [player, setPlayer] = React.useState()
+  const ref = React.useRef(null)
+
+  React.useEffect(() => {
+    if (BLOG.MUSIC_PLAYER) {
+      setPlayer(new Aplayer({
+        container: ref.current,
+        fixed: true,
+        order: BLOG.MUSIC_PLAYER_ORDER,
+        autoplay: BLOG.MUSIC_PLAYER_AUTO_PLAY,
+        audio: BLOG.MUSIC_PLAYER_AUDIO_LIST
+      }))
+    }
+    return () => {
+      setPlayer(undefined)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-player={player}
+      className={BLOG.MUSIC_PLAYER_VISIBLE ? 'visible' : 'invisible'}
+    />
+  )
+}
+
+export default Player

package.json

@@ -29,6 +29,7 @@
     "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",

pages/_app.js

@@ -19,12 +19,16 @@ 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'
 import { DebugPanel } from '@/components/DebugPanel'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Fireworks } from '@/components/Fireworks'
+import MusicPlayer from '@/components/MusicPlayer'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -64,6 +68,7 @@ const MyApp = ({ Component, pageProps }) => {
             {FONTS_URL?.map(fontUrl => <link href={`${fontUrl}`} key={fontUrl} rel="stylesheet" />)}
             {externalPlugins}
             <Component {...pageProps} />
+            <MusicPlayer />
         </GlobalContextProvider>
   )
 }