Music notation rendering with abcjs

Plugins ideas
21

I am taking a stab at a LilyPond plugin. I’m a developer but haven’t developed for Obsidian (or using typescript before, but pretty comfortable with javascript).

At this point I have a skeleton working. It lets you:

  • Create a lilypond codeblock using ```lilypond
  • When you put in a lilypond score, then swap to read mode (or just stop editing the codeblock it with the live viewing/editing capability), it will:
    • Generate an .ly file in a subdirectory.
    • Execute LilyPond on it, generating a “preview” png (previews are cropped down to just the content instead of having to be a full page render)
    • Show the preview png in the editor in place of the codeblock.

I’m developing on windows but I have the capability to test on mac.

There are a few unknowns I have to work out, for example:

  • If you have multiple ```lilypond codeblocks in a markdown file, I need to figure out how to match the codeblock to the lilypond filename, generating a unique one per codeblock. I’m speculating I can try to run some code to count how many lilypond codeblocks are in the file and just use a simple index on the end of the filename.
  • I am not sure how far the “preview” functionality of Lilypond goes (i.e. for multiple page files, etc.).

If anyone has some complex lilypond they want to share for me to test with, I’d appreciate it.

I’d like to get the bare bones functionality working, which would let you define multiple LilyPond codeblocks in a file and see the rendered output.

Caveats include:

  • Must have the lilypond command line tool installed and on your PATH variable
  • No mobile support for generation (as I don’t think there’s a lilypond executable for mobile, and I don’t have the means to test on both iOS and Android), however, it might be possible to generate on desktop and view on mobile, since viewing would just rely on the already-generated png file.

I can imagine a wishlist would include:

  • Syntax highlighting for LilyPond (VScode actually has a plugin for this, so it might be possible to piggyback on another Obsidian syntax highlighting plugin)
  • Flexible support for output types (i.e. let the user decide to also generate a full page PDF as needed).
  • Ability to hide the lilypond subdirectories in the obsidian explorer so you don’t get a bunch of extra files cluttering your vault file explorer
  • Support for generation and playback of midi files from buttons in the Obsidian UI.

Any other LilyPond users, feel free to throw suggestions my way.

3 Likes
22

I’ll add some screenshots thus far too:

Here you can see a lilypond codeblock.
image

Here’s the end result with the preview PNG embedded in the Obsidian note.
Note the lilyPond subdirectory that gets created. What you don’t see by default in the obsidian explorer is that I’ve written that lilypond out to a .ly file.

image

Also, if you make a syntax error, for example, if I removed the comment character, making the “middle tie looks funny here” line invalid:

image

You’ll end up seeing the error output of LilyPond in the block instead.

image
image1020×838 37.5 KB

2 Likes
23

For anyone who might be following this thread interested in LilyPond, I have a plugin ready for testing. I started a new thread to cover LilyPond specifically.

2 Likes