Feat: Import KPlayer

使用奇趣播放器播放音乐

src/pages/netease.tsx

@@ -1,5 +1,5 @@
 // React
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 
 
 // UI
@@ -9,15 +9,45 @@ import ArticleHead from "@/components/Layout/ArticleHead";
 
 
 // Tool
+import neteaseRequest from "@/server/api/netease";
 import { siteUrl } from "@/utils/tool";
+import KPlayer, { KPlayerRef } from "@/components/Base/KPlayer";
+
+const songs = [19032267, 862345682, 471969791, 528361653, 563727655, 29966701, 1309903594, 1935948260, 28638748];
 
 
 // Components
 function Netease() {
+  const playerRef = useRef<KPlayerRef>(null);
+
   useEffect(() => {
     prism.highlightAll();
   }, []);
 
+  const getSongInfo = async (id: number) => {
+    const song = await neteaseRequest({ query: { id }});
+
+    if (!song || !song.data) return;
+
+    playerRef.current && playerRef.current.add([song.data]);
+  }
+
+  useEffect(() => {
+    songs.forEach(id => {
+      getSongInfo(id);
+    });
+  }, []);
+
+  const onAddMusic = () => {
+    const _id = prompt("请输入一个网易云音乐 ID", "517567145");
+
+    _id && getSongInfo(Number(_id));
+  }
+
+  const onRemoveMusic = () => {
+    playerRef.current && playerRef.current.remove();
+  }
+
   return (
     <main>
       <ArticleHead title="网易云解析" desc="解析音乐并精简输出，配合 Kico Player 使用更佳" />
@@ -157,10 +187,10 @@ function Netease() {
 
         <h3>测试小工具：</h3>
         <p>使用 Kico Player 播放音乐</p>
-        <div id="kico-player"></div>
+        <KPlayer ref={playerRef} />
         <div className="btn-group">
-          <button id="add-music" className="btn green">添加音乐</button>
-          <button id="remove-music" className="btn red">移除音乐</button>
+          <button className="btn green" onClick={onAddMusic}>添加音乐</button>
+          <button className="btn red" onClick={onRemoveMusic}>移除音乐</button>
         </div>
 
         <h3>常见问题：</h3>