39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
import React, { useState, useEffect, useRef } from "react";
|
|
import PianoKeyboard from "./PianoKeyboard";
|
|
import MidNoteDataReceiver from "../DataRecievers/MidiNoteDataReceiver.js";
|
|
// import { Slider } from "@mui/material";
|
|
// import { styled } from "@mui/material/styles";
|
|
|
|
// eslint-disable-next-line react/prop-types
|
|
|
|
export default function MidiNoteInfo() {
|
|
const [notes, setNotes] = useState([]);
|
|
const dataReceiverRef = useRef(null);
|
|
const isActiveRef = useRef(true);
|
|
|
|
useEffect(() => {
|
|
dataReceiverRef.current = new MidNoteDataReceiver();
|
|
isActiveRef.current = true;
|
|
|
|
function render() {
|
|
if (!isActiveRef.current) return;
|
|
if (dataReceiverRef.current) {
|
|
setNotes(dataReceiverRef.current.getNotes());
|
|
}
|
|
window.requestAnimationFrame(render);
|
|
}
|
|
|
|
window.requestAnimationFrame(render);
|
|
return function cleanup() {
|
|
isActiveRef.current = false;
|
|
if (dataReceiverRef.current) dataReceiverRef.current.unregister();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="rounded-lg h-[80px]" style={{ marginTop: "1rem" }}>
|
|
<PianoKeyboard heldNotes={notes} LOWEST_MIDI={24} HIGHEST_MIDI={84} />
|
|
</div>
|
|
);
|
|
}
|