Spaces:

peter288
/

midiplayer-lite-hf-gemini

Build error

App Files Files Community

peter288 commited on Jun 25, 2025

Commit

417b727

verified ·

1 Parent(s): 83a1998

Upload 5 files

Browse files

Files changed (5) hide show

Dockerfile +24 -0
app/layout.tsx +19 -0
app/page.tsx +103 -0
next.config.js +6 -0
package.json +22 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,24 @@

+# 使用官方輕量級的 Node.js 20 Alpine 映像
+FROM node:20-alpine
+# 設定工作目錄
+WORKDIR /app
+# 複製 package.json 和 package-lock.json
+# 使用 * 確保即使 lock 檔案不存在也能運行
+COPY package.json package-lock.json* ./
+# 安裝專案依賴
+RUN npm install
+# 複製所有專案檔案到工作目錄
+COPY . .
+# 執行 Next.js 生產環境建置
+RUN npm run build
+# Hugging Face Spaces 預設使用 7860 端口
+EXPOSE 7860
+# 啟動應用程式的命令
+CMD ["npm", "start"]

app/layout.tsx ADDED Viewed

	@@ -0,0 +1,19 @@

+// 位於 app/layout.tsx
+import type { Metadata } from "next";
+// 修正：直接只匯入 ReactNode 這個「類型」，而不是整個 React 物件
+import type { ReactNode } from 'react';
+export const metadata: Metadata = {
+  title: "MIDI Player Lite",
+  description: "A lightweight MIDI player for Hugging Face Spaces.",
+};
+// 修正：直接使用 ReactNode，不再需要寫 React.ReactNode
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

app/page.tsx ADDED Viewed

	@@ -0,0 +1,103 @@

+"use client";
+import { useEffect, useRef, useState } from 'react';
+import MidiPlayer from 'midi-player-js';
+import Soundfont from 'soundfont-player';
+// 定義 Soundfont Player 的 instrument 類型，以獲得更好的 TypeScript 支援
+interface Instrument {
+  play(noteName: string, when?: number, options?: any): void;
+  stop(noteName?: string): void;
+}
+export default function Home() {
+  // 1. 將 useRef 的初始值設為 null，避免在伺服器端存取 window
+  const audioCtx = useRef<AudioContext | null>(null);
+  const instrument = useRef<Instrument | null>(null);
+  const player = useRef<MidiPlayer.Player | null>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [nowPlaying, setNowPlaying] = useState("");
+  useEffect(() => {
+    // 2. 在 useEffect 中才建立 AudioContext，確保只在瀏覽器環境中執行
+    if (!audioCtx.current) {
+        audioCtx.current = new (window.AudioContext || (window as any).webkitAudioContext)();
+    }
+    // 載入 Soundfont 和 MIDI 播放器
+    Soundfont.instrument(audioCtx.current, 'acoustic_grand_piano').then(inst => {
+      instrument.current = inst;
+      player.current = new MidiPlayer.Player(event => {
+        if (!instrument.current) return;
+        if (event.name === 'Note on' && event.velocity > 0) {
+          instrument.current.play(event.noteName);
+        }
+        if (event.name === 'Note off' || (event.name === 'Note on' && event.velocity === 0)) {
+          instrument.current.stop(event.noteName);
+        }
+      });
+      player.current.on('end', () => setNowPlaying(""));
+      setIsLoaded(true);
+    });
+    // 3. 元件卸載時的清理函數，關閉 AudioContext
+    return () => {
+      if (audioCtx.current && audioCtx.current.state !== 'closed') {
+        audioCtx.current.close();
+      }
+    };
+  }, []); // 空依賴陣列確保此 effect 只執行一次
+  const loadMidiAndPlay = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && player.current) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result) {
+          player.current?.loadArrayBuffer(event.target.result as ArrayBuffer);
+          setNowPlaying(`正在播放: ${file.name}`);
+          player.current?.play();
+        }
+      };
+      reader.readAsArrayBuffer(file);
+    }
+  };
+  const handlePlay = () => {
+    if (player.current?.isPlaying()) return;
+    player.current?.play();
+  };
+  const handleStop = () => {
+    player.current?.stop();
+    setNowPlaying("");
+  };
+  return (
+    <main style={{ padding: "2rem", fontFamily: "sans-serif", maxWidth: "600px", margin: "auto", color: "#333" }}>
+      <h1 style={{ textAlign: "center", color: "#111" }}>🎵 MIDI Player Lite</h1>
+      <div style={{ border: "1px solid #ddd", padding: "2rem", borderRadius: "8px", textAlign: "center", background: "#f9f9f9" }}>
+        {isLoaded ? (
+          <>
+            <p>請選擇一個 .mid 或 .midi 檔案來播放。</p>
+            <input
+              type="file"
+              accept=".mid,.midi"
+              onChange={loadMidiAndPlay}
+              style={{ display: 'block', margin: '1rem auto' }}
+            />
+            <div style={{ marginTop: "1rem", display: 'flex', gap: '10px', justifyContent: 'center' }}>
+              <button onClick={handlePlay} disabled={!player.current?.getSong() || player.current?.isPlaying()}>播放</button>
+              <button onClick={handleStop} disabled={!player.current?.getSong()}>停止</button>
+            </div>
+            {nowPlaying && <p style={{marginTop: "1.5rem", color: "#555", fontStyle: 'italic'}}>{nowPlaying}</p>}
+          </>
+        ) : (
+          <p>正在載入聲音引擎...</p>
+        )}
+      </div>
+       <footer style={{textAlign: 'center', marginTop: '2rem', color: '#888', fontSize: '0.9em'}}>
+          <p>Deployed on Hugging Face Spaces</p>
+      </footer>
+    </main>
+  );
+}

next.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+  };
+  module.exports = nextConfig;

package.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+    "name": "midiplayer-lite-hf",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+      "dev": "next dev",
+      "build": "next build",
+      "start": "next start -p 7860"
+    },
+    "dependencies": {
+      "next": "^14.2.3",
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "midi-player-js": "^2.0.5",
+      "soundfont-player": "^0.8.5"
+    },
+    "devDependencies": {
+      "@types/node": "20.14.9",
+      "@types/react": "18.3.3",
+      "typescript": "5.5.2"
+    }
+  }