[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
Re: Animated SVG Percussion Music
Re: Animated SVG Percussion Music
Fri, 30 Sep 2011 09:20:57 +0100
Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:18.104.22.168) Gecko/20110922 Thunderbird/3.1.15
On 30/09/11 07:12, Jay Anderson wrote:
On Fri, Aug 19, 2011 at 5:30 AM, Tim Sawyer
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
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:
\override Staff.VerticalAxisGroup #'minimum-Y-extent = #'(-6 . 7)
\override Staff.TimeSignature #'style = #'()
e e e r e r e r r e e r e e e r \bar "|."
The lilypond generated SVG is attached (22.214.171.124.svg)
The resulting SVG that ends up in the web page is also attached
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.
.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!
Description: Text Data