Skip to content
testing vexflow with heartbeat and an interactive layer
TypeScript CSS HTML
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Interactive VexFlow score (test #1)

This prototype shows a possible way to add interactivity to a VexFlow score. It uses heartbeat for playing back the score.

  • A new MIDI song is created using heartbeat, the song contains only 3 notes.
  • The heartbeat notes are used to generate a VexFlow score.
  • After the score has been rendered:
    • on top of every stavenote SVG element a hit-area div is rendered.
    • all stavenote SVG elements get connected to their corresponding heartbeat notes.

This way we have interactivity per stavenote; this is used to render a tooltip showing the notename when you click a note in the score.

Also we can highlight the note in the score as soon as heartbeat's playhead reaches that note, and heartbeat plays the note when clicked.

You can test a live version over here:

install & run

git clone
cd vexflow-test
npm i
npm run watch

The prototype runs at http://localhost:3000

You can’t perform that action at this time.