react-soundfont-player

Render & Interact with Musical Instruments & Notes.

A React wrapper over soundfont-player

Install

yarn add react-soundfont-player
# Or
npm i react-soundfont-player

Usage

import * as React from "react";
import { render } from "react-dom";
import ReactSoundFontPlayer from "react-soundfont-player";
const App = () => {
  return (
    <Instrument>
      {({ instrument, isLoading, audioContext: ac }) => {
        return (
          <button
            onClick={() => {
              // Play A4 for 500 ms
              instrument.play("A4").stop(ac.currentTime + 0.5);
            }}
          >
            Play A4
          </button>
        );
      }}
    </Instrument>
  );
};

render(<App />, document.getElementById("#app"));