On Sep 30, 2011, at 10:20 AM, Tim Sawyer wrote:
> On 30/09/11 07:12, Jay Anderson wrote:
>> On Fri, Aug 19, 2011 at 5:30 AM, Tim Sawyer
>> <list.lilyp...@calidris.co.uk> wrote:
>>> http://percussion360.com/
>>>
>>> This works by taking SVG generated from lilypond, munging it a bit
>>> (including matching it up with the .ly source), then playing it back using
>>> javascript and html5 audio. Playback doesn't work in IE but does work in
>>> other recent (proper) browsers.
>>
>> This is really neat. I'm thinking of doing something similar with some
>> hymns. How did you add the id attributes to the paths to the svg
>> source? I assume this is what you meant by matching it up with the
>> source. I'm not seeing a good way to do this yet.
>
> It's not nice...took me quite a while to do.
>
> I have my books split into 32 parts. Each part is in a separate .tex file.
> I have a python script that extracts lilypond scores from these .tex files.
> Once it has a score, it writes it to disk as a .ly file.
>
> Next, we take the .ly file and convert it into an svg/xml file using
> "lilypond -dbackend=svg file.ly". This uses lilypond 2.13.11.
>
> We also at this point generate a .eps file from the score, "lilypond
> -dbackend=eps file.ly", then use http://www.imagemagick.org to convert this
> into a trimmed .jpg of the score. (I made this bit optional in the
> generation - it's what takes the longest time)
>
> I then create an object which wrappers the .ly file and the .svg file, and
> links them together. I'm parsing the music line from my .ly file so that I
> know what notes are involved in what order. We first work out a music
> resolution (ie shortest note required to accurately playback the score), and
> then we produce a python dictionary that has positions in the stave (in units
> of the music resolution) pointing to objects that hold details of the note.
> If it's a chord (ie snare drum and bass drum together) the note holds a
> chordList for the other notes.
>
> On the SVG side, we look through the svg file produced, looking for known
> shapes (ie a tag with attribute d="M217 139c67 0 112 -38 112 -94c0 -90 -111
> -184 -217 -184c-67 0 -112 38 -112 94c0 90 111 184 217 184z" is a solid
> notehead). We order this structure by position (from the value in the
> transform attribute) and then match up the notes between the svg and the
> lilypond object structure. If we get a different number of notes, then we
> have a problem somewhere!
>
> We then write out a new SVG file with some additional attributes on the nodes
> - an id for position, a delay for length and an audio for sounds at playback.
> Rests are just notes with no sound.
>
> Note that this only currently works for one line staves - I've only done this
> for my short exercises. I'd have to expand this matching code to cope with
> multiline stuff, and there's no point for what I'm doing with it.
>
> So, here's the original .ly for my first stave:
>
> #(set-global-staff-size 18)
> \paper
> {
> ragged-right=##f
> }
> \score
> {
> \version "2.10.0"
> {
> \time 4/4
> \override Staff.VerticalAxisGroup #'minimum-Y-extent = #'(-6 . 7)
> \override Staff.TimeSignature #'style = #'()
> \clef bass
> \stemUp
> e e e r e r e r r e e r e e e r \bar "|."
> }
> }
>
> The lilypond generated SVG is attached (1.1.0.1.svg)
>
> The resulting SVG that ends up in the web page is also attached
> (1.1.0.1.svg.xml)
>
> This is basically the same SVG as lilypond produced with the addition of:
>
> * audio - path to the sound to play
> * id - the position in the music, in units of music resolution
> * delay - number of music resolution units to sound this note for
>
> and a bit of metadata.
>
> The javascript then looks at the length of the music (see bottom of
> .svg.xml), grabs hold of all the elements with an id of n1 up to n16 (or the
> length), loads the appropriate sounds, then starts playback, setting the
> colour of elements to red for the specified length of time, then back to
> black.
>
> Hope that helps!
>
> Tim.
In the same vein, I have a python script that I used to make the following two
works for cello solo:
http://apollinemike.com/rhythmtest.svg
http://apollinemike.com/test.svg
It is the exact same idea: the python script parses the svg, extracts all
relevant info, and then rewrites the svg animated-style.
You'll see that all of the motion handling is done by one core javascript
function that looks up every movable node and either moves it or doesn't.
Lemme know off-list if you'd like to see more (I have to spruce up my script to
make it human-readable). And, on-list, one of my projects that I'll be taking
on soon is incorporating some type of grouping mechanism into SVGs generated by
LilyPond so that less python trickery is needed.
Cheers,
MS
_______________________________________________
lilypond-user mailing list
lilypond-user@gnu.org
https://lists.gnu.org/mailman/listinfo/lilypond-user
