Usage with Player

Here you can find the instructions to add playback support to your rendered pianos.

Installation


pnpm add @music-ui/core @music-ui/piano


npm install @music-ui/core @music-ui/piano


yarn add @music-ui/core @music-ui/piano

See the Player page to know about playback setup.

Usage

The @music-ui/piano package exports an initPianoWithPlayer function that expects the same markup of initPiano:


<div data-piano data-notes="C4 E4 G4 B4"></div>

In addition to the initPiano parameters, it needs a Player instance in order to playback the notes:


import { initPianoWithPlayer } from "@music-ui/piano";
import { Player } from "@music-ui/player";
import "@music-ui/piano/styles.css";
 
const player = new Player();
 
initPianoWithPlayer({ player });