Events

New Feature (v6.4.0): Events got updated and documented.

function onScoreEvent(event: Score.ScoreEvent) {
    // Event type can be "enter", "leave" or "click"
    console.log(`Event type:   ${event.type}`);

    // Is it ScoreStaffEvent?
    if (Score.ScoreStaffEvent.is(event)) {
        console.log("ScoreStaffEvent");

        // Some note event variables.
        console.log(`Note name:    ${event.noteName}`);
        console.log(`Diatonic id:  ${event.diatonicId}`);
        console.log(`Accidental:   ${event.accidental}`);
        console.log(`Chromatic id: ${event.chromaticId}`);
        console.log(`MIDI number:  ${event.midiNumber}`);

        // You can play clicked note.
        if(event.type === "click") {
            // With note name.
            Audio.playNote(event.noteName);
            // Or with midi number.
            Audio.playNote(event.midiNumber);
        }

        // Hilight the staff position on the view.
        const staffPos = { staff: event.staff, diatonicId: event.diatonicId }
        event.view.hilightStaffPos(event.type === "leave" ? undefined : staffPos);
    }

    // Is it ScoreObjectEevent?
    if (Score.ScoreObjectEvent.is(event)) {
        console.log("ScoreObjectEvent");

        // Event has object stack from root to top in hierarchy.
        console.log(`Object stack: ${event.objects.map(o => o.name).join(" -> ")}`);

        // Easily use top object.
        console.log(`Top object: ${event.topObjects.name}`);

        // Find objects.
        const measure = event.findObject(obj => obj.name === "Measure");

        // Hilight objects on the view.
        event.view.hilightObject(event.type === "leave" ? undefined : event.topObject);
    }
}

Live Examples

React JSX/TSX

Plain JS

💡

Use HTML/JS version without React.useEffect(), just add HTML elements before JS code.