17

What would be the best way of rendering specific parts of a lilypond score, into an HTML page? I did that using lilypond-book by previously embedding <lilypondfile> tag into my html file, and it works, however that way I am embedding the whole melody.

I know also there is a possibility to render small pieces of melody using <lilypond> tag, but I would like to import parts of already written stuff.

Do I have possibility to render only part of melody from files, without doing manual copy paste of that specific part, into another file, just for that purpose?

branquito
  • 563
  • 3
  • 11
  • 2
    This question may be of interest to the Music SE community on a whole as well. There is currently a discussion on the Meta site about incorporating Lilypond (or a similar text-based notation format) into Music Stack Exchange itself, so that snippets of music notation can be included in people's answers. The hangup seems to be finding a suitable javascript renderer. – Caleb Hines Sep 19 '14 at 18:42
  • Is this what you want: (1) a single .ly file that contains the entire score and (2) some way to export snippets from it to HTML without having to manually/explicitly copy content from the score file into a separate file? – Dave Sep 19 '14 at 19:29
  • @Dave yes Dave, exactly that! – branquito Sep 19 '14 at 19:33
  • This doesn't quite meet the requirement of the fundamental source being lilypond, but there might be a way to do this using Emacs Org-Mode, with the Babel/literate programming extensions to have an org file that contains the score, exports to HTML, and "tangles" the document into straight lilypond source. – Dave Sep 19 '14 at 19:34
  • @Dave, maybe you know some vim extension, as I am on linux? – branquito Sep 19 '14 at 19:36
  • Since you've shown some interest I wrote out my concept as an answer; Emacs is cross platform; if you're a vi user, look into viper-mode for emacs. – Dave Sep 19 '14 at 19:45
  • @Dom thanks for correcting, but still there is an error in the last block, it should say `yourmusic.ly. Thanks again. – branquito Sep 22 '14 at 00:58
  • Wouldn't be too difficult to just make a screenshot and include an img tag for it, although that probably defeats your purpose. – bgmCoder Mar 07 '18 at 03:32
  • Here is a lilypond extension that can create png files: https://www.mediawiki.org/wiki/Extension:Score – bgmCoder Mar 09 '18 at 22:43

3 Answers3

6

While it isn't Lilypond,the similarly-text-based ABC notation format has an open source javascript renderer named abcjs, that you might find interesting.

An online editor is available as well as a vscode extension.

Alen Siljak
  • 1,194
  • 7
  • 15
Caleb Hines
  • 20,766
  • 2
  • 52
  • 109
  • There is now a vscode extension available: https://marketplace.visualstudio.com/items?itemName=alensiljak.abcjs-vscode, or you can just use the online editor: https://editor.drawthedots.com/ – Alen Siljak Mar 04 '21 at 11:12
4

I've had some success using lilypond from within Emacs Org-Mode files; but I have not done what I'm proposing (mostly I've used it as a replacement for lilypond-book).

Org-Mode is an extension to the Emacs editor (which runs cross-platform) that allows one to write plain text files and export them into HTML (or pdf). In addition to supporting outlining, it also supports "literate programming" where you embed code blocks in the text document, and have commands so that the resulting code blocks can be exported (tangled in the parlance) into files that can be compiled and/or run.

I mention all this background because I would believe that the following would be possible:

1) You edit a .org file, embedding various portions of your score in lilypond code blocks within that file;

2) You export this file (using the Org-Mode export functionality) into the desired HTML file,

3) You tangle the file (using the Org-Mode literate programming functionality) to produce the .ly file that you can then compile.

The other way that I can imagine trying to do this is by doing some scheme programming within lilypond itself: you have full access to the entire(?) guile programming environment, so it should be possible to scheme write functions that produce the HTML that you seek, and pull in the portions of your score that you want. This seems like it would be a highly non-trivial programming problem (even the OrgMode approach will probably be non-trivial). If you consider going this route, I'd strongly recommend checking with the lilypond user (or maybe even developer) mailing lists to see what help you can get from them.

Dave
  • 17,808
  • 10
  • 60
  • 98
4

For those that might be interested, here is what I did to make this work for me in VIM, using a little of shell scripting:-

Requirements for this script to work are:

  • hxpipe which is part of html-xml-utils package. Please find a version for your particular distribution.
  • awk which should be present on your machine, if it's not install that too.
  • And of course, our main buddy lilypond-book.
    #!/bin/bash
    fromvim="$1"
    PID=$$
    lilypond-book -f html -o output "$fromvim" 2>/dev/null
    hxpipe output/stdin.html | awk '/src/||/href/ {$3="output/"$3;}{ print }' | hxunpipe > result$PID
    cat result$PID
    exit 0

Save this as ly2vim, make it executable with chmod +x ly2vim and place it into some directory, in your path.

Now the VIM part:

Add the following to your .vimrc configuration file:-

    #note the dash symbol, it is important, as it will send current line from `VIM` as standard input to `lilypond-book` command.
    nnoremap <leader>ly :.!ly2vim -<CR>

That's it. Now when you are in a middle of editing your html file, you just place line like this:-

    <lilypondfile>yourmusic.ly</lilypondfile>

While cursor anywhere on that line, do your <leader>ly key combination while in normal mode, and voila!, png file will be generated, and code snippet inserted at that place for you. Preview in your browser, and enjoy! :)

branquito
  • 563
  • 3
  • 11