Music notation rendering with abcjs

Plugins ideas
4

It just occurred to me that users of Typora might have had similar feature requests. Upon a little web searching, I found this Typora GitHub issue thread that might be useful.

I just started learning to code and is no where near being able to turn this idea into a plugin for Obsidian. But on the off chance that no one else is interested enough to do it, I’ll certainly be glad to develop a LilyPond plugin.

1 Like
5

I also had this in mind. I’m in a similar situation, but I agree that this would be pretty helpful plugin. I want to contribute, but it also might help to find other people who would be interested in contributing to developing this.

6

Looking around, to me a more likely candidate is something like this: https://www.vexflow.com/

It is open source and javascript based, which I am guessing will work better in Obsidian.

2 Likes
7

Chiming in just to make this feature request louder! I’m a musician and I so analyses of the pieces I play often. It’d be great to have music notation integrated, the way math notation is.

I’m aware that Lilypond is supported in Latex via a package. Perhaps including Lilypond as a Latex package instead of rewriting everything in JS with a JS library like ABC or Vexflow, it’d be less work?

Anyways, musicians are currently using Latex to write general bass analysis anyways! Really love Obsidian!

1 Like
8

Aaah, so I’m new to Obsidian and don’t know much about the structure (or about plugin coding)… so you reckon LaTeX is the better option? I suppose I assumed the LaTeX support was limited to math, and I don’t know much about how all that works in terms of integrating other LaTeX packages.

9

Personally I think the best approach is including LilyPond in LaTeX because

  • I suspect LilyPond has a larger audience than abcjs or vexflow. I’ve been using it for years and never heard of the latter two until now.

  • It seems like the most versatile approach to rendering music notation in Obsidian.

    Click for details

    According to LilyPond docs for using LilyPond in LaTeX, in addition to directly writing code on the fly, users can also insert LilyPond files or MusicXML files.

    I would choose to always insert LilyPond files when I need to use music notation in Obsidian. This way, I would be able to

    • Edit and debug long code in a dedicated environment (LilyPond, Frescobaldi, etc.)
    • Insert existing LilyPond files I wrote before
    • Keep all LilyPond files organized in my /Attachments folder in the Vault, just like other attachments

  • I assume it’s less development work to include LilyPond since Obsidian already supports LaTeX.

4 Likes
10

I am really interested in this (also as a casual “coder” if I can count myself as such) thank you for the explanation.

11

Just a small correction, Obsidian doesn’t support LaTeX, it supports mathjax which is not exactly the same, see here for more details.

3 Likes
12

I somehow got the wrong impression that MathJax is a LaTeX package. Thank you for the explanation!

1 Like
13

I think abcjs would be easier to add and for most people to use. Lilypond isn’t the most straightforward program to get into from scratch.

14

I would also love to see a way of keeping music notes in Obsidian. What are the options so far since LaTeX doesn’t seem to be included?

15

There’s a plugin in the list of third-party plugins, it uses abcjs, and is called “Music notation”

4 Likes
16

Another way is to use musescore, flat.io, noteflight or something similar and then embed the sheet music from that site into your notes. Then you can even listen to it from within your notes

1 Like
17

Yep, this is perfect. Thank you.

1 Like
18

The plugin is pretty useful, been looking for some option, this is the only decent one so far

19

Check: https://github.com/TilBlechschmidt/obsidian-plugin-abcjs

20

Hi everyone! Is there anyone still trying to create a Lilypond plugin for Obsidian? I have been using abcjs and, albeit it being very intuitive and fun to use, it still has some limitations for my use case. I am trying to integrate Schenkerian graphs into my notes that I can later edit according to new insights. Having a powerful notation plugin would allow me to treat this type of analysis incrementally, and would liberate me from having to reopen the Sibelius file every time I have an idea.

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