Hi Everyone,
I have been looking for ways to write out musical notation in typst. I know there is the chordx and conchord pachages for guitar chords. But has anyone tried to draw full musical notation?
2 Likes
The only thing I have seen so far is this one. I recommend looking at the examples to see what it is capable of (spoiler: not much). I guess it could be kind of starting point if you want to work in this direction.
Unfortunately, the task is quite hard. I wanted to try it related to conchord tabs, but gave up quickly. Rendering (a very large amount) symbols properly is not enough, to make it usable you should also implement several layout features. A very simple example would be scaling of the distance between symbols the way that a number of bars is an integer (that feature is actually implemented at conchord for tabs).
So nope, I can’t say that would be easy. But if you have time and skills to invest, having a music notation package would be very nice!
4 Likes
I’m currently facing the same challenge and have some preliminary thoughts on the matter.
I’ve noticed that abcjs is a powerful open-source library capable of converting ABC notation into SVG vector graphics (see https://www.abcjs.net/). Some markdown renderers also support ABC notation directly. Unfortunately, Typst does not allow importing JavaScript code.
However, Typst can import WebAssembly (WASM) modules, which could potentially serve as a bridge to call libraries written in other languages. The process of converting JavaScript (like abcjs) to WASM—while unconventional—appears complex and is beyond my current capabilities. Nevertheless, I believe this approach would be significantly more convenient and powerful than implementing ABC notation support purely within Typst.
I’m sharing this observation here in the hope it might inspire others to tackle this issue. If someone succeeds in implementing such a solution, please notify me.
The packages jogs – Typst Universe and ctxjs – Typst Universe provide Javascript runtimes as WASM plugins, so running abcjs “directly” is maybe an option. Would be interesting and valuable to see if that works!
I found a program written in C that compiles abc to svg. Unfortunately, it is no longer maintained. But if we accept this one drawback, this program is actually the closest to our goal
https://chiselapp.com/user/moinejf/repository/abc2svg/doc/trunk/README.md
If we are not satisfied, we will have this project. However, this is written in JavaScript.
On my side, I use lilypond with SVG output and embed the result in typst as a simple image.
Here is the command line I use to generate the svg:
lilypond --svg "-duse-paper-size-for-page=#f" "-dno-point-and-click" -o "output.svg" "input.ly"
My music code is not embedded in typst code, but i much prefer the lilypond output over various abc engines.
I would indeed prefer to have a way to call lilypond from typst directly, but that’s another story.
I tried lilypond and am very impressed!
A little side issue I ran into that may be helpful for anyone else going this direction. The SVG lilypond generates does not embed the lyrics for music as a path. Because of that I ran into some strange spacing issued between the music and lyrics when imported into typst as an image. The workaround I ended up using for now was to edit the svg in Inkscape and convert the lyrics from an object to a path so that it shows up as expected in typst.
That’s an interesting problem, I did not yet noticed.
I’m using lilypond to create a tunebook with LaTeX, and to add riffs to a songbook created with typst.
In my songbook, I embed PDF files instead of svg, and don’t have that problem, but, I’m in the process of migrating my tunebook to typst. So, good to know I’ll have to spend a bit of time on tunes with lyrics.
Could it be a font problem on your side, like lilypond using a font unknown from Typst ? Lilypond svg backend does not embed fonts in the svg file, so typst has to find the text font.
It should be possible to include this WASM library as a typst plugin, which is the MuseScore core. It can also create MIDI and Audio files from the notes. The MIDI files could then get embedded into the PDF document together with the SVG or PDF image.
It seems compiling Lilypond to WASM is difficult, though, I’m not sure why.
I am sure that is the issue. If I got the fonts to match that would help but Typst also was supplying the lyrics at the specified font size as well. Which meant that if I scaled the svg up or down the music would scale but not the words which ended up being more of a headache than just converting it all to paths and not worrying about it anymore. I am sure there is a much more elegant solution but it got the job done for now.
If you get that working I would love to hear about it! I am guessing lilypond is hard to use with WASM because it is Linux based rather than node like MuseScore so it is a jump between the backend architectures.
MuseScore is also just C++ like Lilypond, no real difference between those two. Lilypond can also get compiled to WASM like MuseScore. There was simply no one who did this. It requires probably 100 hours+ to port the code because by default those libraries write to files which is not allowed in typst wasm. Those would be replaced by buffers.
That makes sense, I haven’t dug into the guts of things much. Maybe someone will find the time and energy to take that on one day lol
1 Like
Yes, that is possible.
I have made some experiments with ctxjs and abc2svg here:
Shuenhoy/typst-kyphu
1 Like