This is a working document of a music app I am creating.

Functionality of App

Pressing a key (A-G) for a given amount of time will result in type of note shown on application.

To get a step higher (sharp), it’s uppercase and to go a step lower (flat) it’s a lower case.

You can create up to four pages by clicking the new button.

Set up

For this application I’m using a Next 13 React app with TypeScript.

npx create-next-app@latest

Creating the App

Programming Functionality of Key Press

const [keyPress, setKeyPress] = useState(+new Date());
const [keyRelease, setKeyRelease] = useState();

let date;

const onKeUp = (e: React.KeyboardEvent) => {
  date = +new Date();
  setKeyPress(date);
};

const onKeyDown = (e: React.KeyboardEvent) => {
  const diff = +new Date() - keyPress;
  setKeyRelease(diff / 1000);
};

<Input type="text" onKeyDown={onKeyDown} onKeyUp={onKeUp} />;
{
  keyRelease;
}

Routes for Additional Pages

There might be a dynamic way of doing this, however at the moment each time the new button is clicked, a button for the page is shown and routed to.

The main page captures the amount times the new button is clicked and based on this number, the correct page button is shown.

A future consideration would be to enable users to delete pages.

const [noClicks, setNoClicks] = useState(0);

const updateClicks = () => {
  // store the last click to preserve the button rendered
  setNoClicks(noClicks + 1);
  if (noClicks > 4) {
    router.push("/");
    setNoClicks(0);
  }
};

<Button colorScheme="red" onClick={updateClicks}>
  New
</Button>;
{
  noClicks === 0 && (
    <Link href="/">
      <Button colorScheme="green">one</Button>
    </Link>
  );
}
{
  noClicks === 1 && (
    <Link href="/page-two">
      <Button colorScheme="green">two</Button>
    </Link>
  );
}
{
  noClicks === 2 && (
    <Link href="/page-three">
      <Button colorScheme="green">three</Button>
    </Link>
  );
}
{
  noClicks === 3 && (
    <Link href="/page-four">
      <Button colorScheme="green">four</Button>
    </Link>
  );
}

Future Considerations

• Music score
• Ocatves
• Clefs
• Type of instrument
• Drag and drop notes
• Buildable score

Update

This post was written in January 2023. Since then new project ideas have come about and this one has sadly been abandoned.