puredic

react-midi-ui

• MIDI 1.0 規格書

Install

npm install react-midi-ui

MidiNotes Component

The MidiNotes component visualizes and renders MIDI data on a canvas, allowing for an interactive and graphical representation of musical notes and events.

Props

The component accepts the following props:

• midiData (MidiData | null): The MIDI data to be rendered. If null, nothing is displayed. (Required)
• width (number): The width of the canvas in pixels. Default is 800. (Optional)
• height (number): The height of the canvas in pixels. Default is 400. (Optional)
• yLabelWidth (number): The width of the y-axis labels in pixels. Default is 28. (Optional)
• xLabelHeight (number): The height of the x-axis labels in pixels. Default is 12. (Optional)
• corrdinate (boolean): Whether to display coordinates on the canvas. Default is false. (Optional)
• playback (boolean): Whether to show the playback position. Default is false. (Optional)
• zoomable (boolean): Whether zooming functionality is enabled. Default is false. (Optional)
• instrument (string): The instrument type, e.g., "piano" or "drums". Default is "piano". (Optional)

Usage Example

Here is a basic example of how to use the MidiNotes component:

import React from "react";
import MidiNotes from "react-midi-ui";
import { useMidiData } from "react-midi-ui";

function App() {
  const midiData = useMidiData(midiFile);
  return (
    <MidiNotes
      midiData={midiData}
      width={1000}
      height={600}
      yLabelWidth={30}
      xLabelHeight={15}
      corrdinate={true}
      playback={true}
      zoomable={true}
      instrument="drums"
    />
  );
}

export default App;

In the above example, the MidiNotes component is configured with specific MIDI data, dimensions, label sizes, and additional features like coordinates display, playback position, zoom functionality, and instrument type.

Notes

• Ensure that midiData is a valid MIDI data object.
• Adjust the canvas size (width and height) and label sizes (yLabelWidth and xLabelHeight) according to the data and display requirements.
• Enabling options like corrdinate, playback, and zoomable can enhance user interaction but may impact performance depending on the environment.

OpenMidi Component

The OpenMidi component provides a file input interface for users to select and upload MIDI files. It is designed to accept only MIDI files, enhancing usability and ensuring the correct file type is processed.

Props

The component takes the following prop:

• setMidiFile (function): A callback function that is called with the selected MIDI file as its argument. (Required)

Usage Example

Here's how to integrate the OpenMidi component into a React application:

import React, { useState } from "react";
import OpenMidi from "react-midi-ui";

function App() {
  const [midiFile, setMidiFile] = (useState < File) | (null > null);

  // Function to handle the MIDI file
  const handleMidiFileSet = (file: File) => {
    setMidiFile(file);
    // Further processing of the MIDI file
  };

  return (
    <div>
      <h1>MIDI File Open</h1>
      <OpenMidi setMidiFile={handleMidiFileSet} />
      {midiFile && <p>File selected: {midiFile.name}</p>}
    </div>
  );
}

export default App;

In the example above, the OpenMidi component is used to allow users to select a MIDI file from their device. The setMidiFile prop is provided with a handler function (handleMidiFileSet) that updates the application's state with the selected file. Once a file is selected, its name is displayed to the user.

Notes

• The component is strictly designed to accept .midi files, ensuring only MIDI files are selectable by setting the accept attribute of the input element.
• Implement the setMidiFile callback function to handle the file once it's selected, such as storing it in the state or processing it further.