Player

The Player class provides playback support to the @music-ui visualizations.

Installation


pnpm add @music-ui/core


npm install @music-ui/core


yarn add @music-ui/core

Usage

Since the Player class has various dependencies, it’s recommended to instantiate it via the playerFactory function.

Let’s assume we want to initialize multiple widget with playback support:


<!-- some pianos -->
<div data-piano data-notes="C4 E4 G4 B4"></div>
<div data-piano data-notes="C4 Eb4 G4 Bb4"></div>
<!-- some guitar chords -->
<div data-chord data-input="x32010" data-chord-name="C major"></div>
<div data-chord data-input="x02210" data-chord-name="A minor"></div>

We’ll create one single Player at top level, and pass it down to the initializers like:


import { playerFactory } from "@music-ui/core";
import { initPianoWithPlayer } from "@music-ui/piano";
import { initChordsWithPlayer } from "@music-ui/fretboard";
import "@music-ui/piano/styles.css";
 
const player = playerFactory();
 
initPianoWithPlayer({ player });
initChordsWithPlayer({ player });

Output:

Cmaj7

Cm7

C major

A minor