temporarily link midi display and audio

gabe-serna · Oct 22, 2024 · edeab7d · edeab7d
1 parent 9624bbe
commit edeab7d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/app/audio/preview/page.tsx b/app/audio/preview/page.tsx
@@ -7,9 +7,10 @@ import MinimapPlugin from "wavesurfer.js/dist/plugins/minimap";
 
 export default function Preview() {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
   const [midiFile, setMidiFile] = useState<File | null>(null);
 
-  const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer({
+  const { wavesurfer, isReady, currentTime } = useWavesurfer({
     container: containerRef,
     url: "/audio/tsubasa_bass.mp3",
     waveColor: "#eab308",
@@ -47,15 +48,17 @@ export default function Preview() {
     }
   }, [isReady, wavesurfer]);
 
-  const onPlayPause = () => {
+  useEffect(() => {
     wavesurfer && wavesurfer.playPause();
-  };
+  }, [isPlaying]);
 
   return (
     <div className="flex h-full w-[1000px] flex-col justify-center">
       <div ref={containerRef} />
 
-      <button onClick={onPlayPause}>{isPlaying ? "Pause" : "Play"}</button>
+      <button onClick={() => setIsPlaying(!isPlaying)}>
+        {isPlaying ? "Pause" : "Play"}
+      </button>
       <div>
         <input
           type="file"
@@ -65,7 +68,13 @@ export default function Preview() {
             setMidiFile(e.target.files[0]);
           }}
         />
-        {midiFile && <PianoRoll midiFile={midiFile} />}{" "}
+        {midiFile && (
+          <PianoRoll
+            midiFile={midiFile}
+            isPlaying={isPlaying}
+            setIsPlaying={setIsPlaying}
+          />
+        )}
       </div>
     </div>
   );

diff --git a/components/PianoRoll.tsx b/components/PianoRoll.tsx
@@ -6,6 +6,8 @@ import { Midi } from "@tonejs/midi";
 
 interface PianoRollProps {
   midiFile: Blob; // Accepting the MIDI file as a Blob prop
+  isPlaying: boolean;
+  setIsPlaying: (isPlaying: boolean) => void;
 }
 
 interface MidiNote {
@@ -14,10 +16,13 @@ interface MidiNote {
   duration: number;
 }
 
-const PianoRoll: React.FC<PianoRollProps> = ({ midiFile }) => {
+const PianoRoll: React.FC<PianoRollProps> = ({
+  midiFile,
+  isPlaying,
+  setIsPlaying,
+}) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [midiData, setMidiData] = useState<MidiNote[]>([]);
-  const [isPlaying, setIsPlaying] = useState(false);
   const [progress, setProgress] = useState(0); // Track progress of MIDI playback
 
   useEffect(() => {