feat: 调整Aplayer引入方式为脚本链接,支持通过metingJS获取音乐平台歌单

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" />
   </>)
 }
 

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>
   )
 }