Spaces:

peter288
/

midiplayer-pro2

Build error

App Files Files Community

peter288 commited on Jun 25

Commit

c911c4d

verified ·

1 Parent(s): 135fb97

Upload 10 files

Browse files

Files changed (10) hide show

.dockerignore +5 -0
Dockerfile +13 -0
app/globals.css +7 -0
app/layout.tsx +17 -0
app/page.tsx +125 -0
next.config.js +7 -0
package.json +24 -0
postcss.config.js +7 -0
tailwind.config.js +11 -0
tsconfig.json +26 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,5 @@

+node_modules
+.next
+.git
+.gitignore
+README.md

Dockerfile ADDED Viewed

	@@ -0,0 +1,13 @@

+FROM node:20-alpine
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm install
+COPY . .
+RUN npm run build
+EXPOSE 7860
+CMD ["npm", "start"]

app/globals.css ADDED Viewed

	@@ -0,0 +1,7 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+html, body {
+  @apply bg-gray-50;
+}

app/layout.tsx ADDED Viewed

	@@ -0,0 +1,17 @@

+export const metadata = {
+    title: "MidiPlayer Pro",
+    description: "Next.js MIDI player using MidiPlayerJS and Soundfont-player"
+  }
+  export default function RootLayout({
+    children,
+  }: {
+    children: React.ReactNode
+  }) {
+    return (
+      <html lang="en">
+        <body>{children}</body>
+      </html>
+    )
+  }

app/page.tsx ADDED Viewed

	@@ -0,0 +1,125 @@

+"use client";
+import { useEffect, useRef, useState } from 'react';
+import MidiPlayer from 'midi-player-js';
+import Soundfont from 'soundfont-player';
+export default function HomePage() {
+  const audioCtxRef = useRef<AudioContext | null>(null);
+  const instrumentRef = useRef<any>(null);
+  const playerRef = useRef<any>(null);
+  const [soundfontLoading, setSoundfontLoading] = useState(true);
+  const [fileLoaded, setFileLoaded] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [tempo, setTempo] = useState(120);
+  const [fileFormat, setFileFormat] = useState<number | null>(null);
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
+    const audioCtx = new AudioContext();
+    audioCtxRef.current = audioCtx;
+    Soundfont.instrument(audioCtx, 'acoustic_grand_piano').then(instrument => {
+      instrumentRef.current = instrument;
+      const player = new MidiPlayer.Player((event: any) => {
+        if (!instrumentRef.current) return;
+        if (event.name === 'Note on' && event.velocity > 0) {
+          instrumentRef.current.play(event.noteName, audioCtx.currentTime, { gain: 1 });
+        } else if ((event.name === 'Note on' && event.velocity === 0) || event.name === 'Note off') {
+          instrumentRef.current.stop(event.noteName, audioCtx.currentTime);
+        }
+      });
+      player.on('endOfFile', () => {
+        setIsPlaying(false);
+        setProgress(0);
+      });
+      player.on('fileLoaded', () => {
+        try {
+          setFileFormat(player.getFormat());
+        } catch {
+          setFileFormat(null);
+        }
+        setTempo(120);
+        setFileLoaded(true);
+        setProgress(0);
+      });
+      playerRef.current = player;
+      setSoundfontLoading(false);
+    });
+    return () => {
+      audioCtx.close();
+    };
+  }, []);
+  useEffect(() => {
+    if (!playerRef.current) return;
+    let interval: any;
+    if (isPlaying) {
+      interval = setInterval(() => {
+        const remaining = playerRef.current.getSongPercentRemaining();
+        setProgress(100 - (remaining || 0));
+      }, 200);
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying]);
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && playerRef.current) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const arrayBuffer = reader.result;
+        if (!arrayBuffer) return;
+        playerRef.current.stop();
+        playerRef.current.loadArrayBuffer(arrayBuffer);
+      };
+      reader.readAsArrayBuffer(file);
+    }
+  };
+  const handlePlayPause = () => {
+    if (isPlaying) {
+      playerRef.current.pause();
+    } else {
+      playerRef.current.play();
+    }
+    setIsPlaying(!isPlaying);
+  };
+  const handleStop = () => {
+    playerRef.current.stop();
+    setIsPlaying(false);
+    setProgress(0);
+  };
+  const handleTempoChange = (newTempo: number) => {
+    playerRef.current.pause();
+    playerRef.current.setTempo(newTempo);
+    playerRef.current.play();
+    setTempo(newTempo);
+    setIsPlaying(true);
+  };
+  return (
+    <main className="max-w-xl mx-auto p-4">
+      <h1 className="text-3xl font-bold">♬ MidiPlayerJS</h1>
+      {soundfontLoading ? "Loading soundfont..." : (
+        <input type="file" accept=".mid,.midi" onChange={handleFileChange} />
+      )}
+      <button onClick={handlePlayPause} disabled={!fileLoaded}>
+        {isPlaying ? "Pause" : "Play"}
+      </button>
+      <button onClick={handleStop}>Stop</button>
+      <input type="range" min="50" max="200" value={tempo} onChange={(e) => handleTempoChange(Number(e.target.value))} />
+      <div>MIDI Format: {fileFormat}</div>
+      <div>Progress: {progress}%</div>
+    </main>
+  );
+}

next.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

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

package.json ADDED Viewed

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

+{
+    "name": "midiplayer-pro-hf",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+      "dev": "next dev",
+      "build": "next build",
+      "start": "next start -p 7860"
+    },
+    "dependencies": {
+      "next": "13.4.6",
+      "react": "18.2.0",
+      "react-dom": "18.2.0",
+      "midi-player-js": "^1.1.5",
+      "soundfont-player": "^0.8.5"
+    },
+    "devDependencies": {
+      "typescript": "5.0.4",
+      "autoprefixer": "10.4.14",
+      "postcss": "8.4.24",
+      "tailwindcss": "3.3.2"
+    }
+  }

postcss.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {}
+    }
+  }

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,11 @@

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+      "./app/**/*.{js,ts,jsx,tsx}"
+    ],
+    theme: {
+      extend: {}
+    },
+    plugins: []
+  }

tsconfig.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+    "compilerOptions": {
+      "target": "es5",
+      "lib": ["dom", "dom.iterable", "esnext"],
+      "allowJs": true,
+      "skipLibCheck": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true,
+      "noEmit": true,
+      "esModuleInterop": true,
+      "module": "esnext",
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "jsx": "preserve",
+      "incremental": true,
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["./*"]
+      },
+      "plugins": [{ "name": "next" }]
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    "exclude": ["node_modules"]
+  }