Skip to content

Instantly share code, notes, and snippets.

@raffazizzi

raffazizzi/README.md

Created August 1, 2012 15:57
Show Gist options
  • Save raffazizzi/3228117 to your computer and use it in GitHub Desktop.
Save raffazizzi/3228117 to your computer and use it in GitHub Desktop.
Download ZIP
RV extensions to MEItoVexFlow
Raw
README.md

This page shows a live example of extensions to the projects VexFlow (a music rendering JavaScript library) and MEItoVexFlow (a JS program to render MEI scores using VexFlow).

Most of the extension work is focusing on MEItoVexFlow to extend the support of MEI elements (I have been the main development since November 2011). Such as the repetition signs with multiple endings in the example above.

Changes to VexFlow include support for lyrics, musica ficta and crescendo / diminuendo signs. MIT's music analysis library Music21 uses my latest build for in-browser music display.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- VexFlow Sources -->
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/vex.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/flow.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/fonts/vexflow_font.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/glyph.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/tables.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/stave.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/staveconnector.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/tabstave.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/voice.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/modifier.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/modifiercontext.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/accidental.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/dot.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/tickcontext.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/tickable.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/note.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/bend.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/stavenote.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/tabnote.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/barnote.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/ghostnote.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/formatter.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/stavetie.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/stavehairpin.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/tabtie.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/tabslide.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/beam.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/vibrato.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/annotation.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/tuning.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/stavemodifier.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/keysignature.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/timesignature.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/clef.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/music.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/keymanager.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/renderer.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/stavebarline.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/stavevolta.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/staverepetition.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/stavesection.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/articulation.js"></script>
<script src="https://raw.github.com/raffazizzi/vexflow/experimental/src/raphaelcontext.js"></script>
<!-- MEItoVexFlow Sources -->
<script type="text/javascript" src="https://raw.github.com/raffazizzi/MEItoVexFlow/experimental/tables.js"></script>
<script type="text/javascript" src="https://raw.github.com/raffazizzi/MEItoVexFlow/experimental/meitovexflow.js"></script>
</head>
<body>
<div class="a">
<canvas width="1031" height="450" style="border: none"></canvas>
</div>
<!-- The MEI score -->
<mei:score xmlns:mei="http://www.music-encoding.org/ns/mei" id="meiScore">
<mei:scoredef meter.count="4" meter.unit="2" meter.sym="cut" key.sig="0" key.mode="major">
<mei:staffgrp>
<mei:staffdef meter.count="4" meter.unit="2" meter.sym="cut" key.sig="0"
key.mode="major" n="1" xml:id="P1" label.full="Superius" lines="5" clef.line="2"
clef.shape="G" key.pname="C"/>
<mei:staffdef meter.count="4" meter.unit="2" meter.sym="cut" key.sig="0"
key.mode="major" n="2" xml:id="P2" label.full="Contratenor" lines="5" clef.line="2"
clef.shape="G" key.pname="C"/>
<mei:staffdef meter.count="4" meter.unit="2" meter.sym="cut" key.sig="0"
key.mode="major" n="3" xml:id="P3" label.full="Tenor" lines="5" clef.line="2"
clef.trans="8vb" clef.shape="G" key.pname="C"/>
<mei:staffdef meter.count="4" meter.unit="2" meter.sym="cut" key.sig="0"
key.mode="major" n="4" xml:id="P4" label.full="Bassus" lines="5" clef.line="2"
clef.trans="8vb" clef.shape="G" key.pname="C"/>
</mei:staffgrp>
</mei:scoredef>
<mei:section>
<mei:staffdef n="2" spacing="95" clef.shape="F" key.pname="C"/>
<mei:staffdef n="3" spacing="95" clef.shape="F" key.pname="C"/>
<mei:staffdef n="4" spacing="95" clef.shape="F" key.pname="C"/>
<mei:measure n="49" xml:id="d3e16786">
<mei:staff n="1">
<mei:layer n="1">
<mei:note xml:id="d3e16788" pname="c" oct="5" dur="1" dots="1" stem.dir="down">
<mei:verse>
<mei:syl>ce</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e16811" pname="c" oct="5" dur="2" stem.dir="down">
<mei:verse>
<mei:syl>que</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="2">
<mei:layer n="1">
<mei:note xml:id="d3e16834" pname="a" oct="4" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>ce</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e16856" pname="a" oct="4" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>que</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e16878" pname="f" oct="4" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>je</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e16900" pname="f" oct="4" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>fais</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="3">
<mei:layer n="1">
<mei:note xml:id="d3e16923" pname="f" oct="4" dur="4" stem.dir="down">
<mei:verse>
<mei:syl con="u">ce</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e16946" pname="e" oct="4" dur="4" stem.dir="down"/>
<mei:note xml:id="d3e16963" pname="f" oct="4" dur="4" stem.dir="down"/>
<mei:note xml:id="d3e16980" pname="g" oct="4" dur="4" stem.dir="down"/>
<mei:note xml:id="d3e16997" pname="a" oct="4" dur="2" stem.dir="down"/>
<mei:note xml:id="d3e17014" pname="a" oct="4" dur="2" stem.dir="down">
<mei:verse>
<mei:syl>que</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="4">
<mei:layer n="1">
<mei:note xml:id="d3e17037" pname="f" oct="3" dur="1" dots="1" stem.dir="up">
<mei:verse>
<mei:syl con="u">ce</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17061" pname="f" oct="3" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>que</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
</mei:measure>
<mei:measure n="50" xml:id="d3e17083">
<mei:staff n="1">
<mei:layer n="1">
<mei:note xml:id="d3e17085" pname="b" oct="4" dur="4" stem.dir="down">
<mei:verse>
<mei:syl>je</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17107" pname="a" oct="4" dur="4" stem.dir="up">
<mei:verse>
<mei:syl>fais</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17129" pname="d" oct="5" dur="1" stem.dir="down">
<mei:verse>
<mei:syl con="u">est</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17160" pname="c" oct="5" dur="2" stem.dir="down"
accid.ges="s">
<mei:verse>
<mei:syl>pour </mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="2">
<mei:layer n="1">
<mei:note xml:id="d3e17185" pname="d" oct="4" dur="4" stem.dir="up">
<mei:verse>
<mei:syl con="u">est</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17208" pname="e" oct="4" dur="4" stem.dir="up"/>
<mei:note xml:id="d3e17225" pname="f" oct="4" dur="4" stem.dir="up"/>
<mei:note xml:id="d3e17242" pname="g" oct="4" dur="4" stem.dir="up"/>
<mei:note xml:id="d3e17259" pname="a" oct="4" dur="1" stem.dir="up">
<mei:verse>
<mei:syl>pour</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="3">
<mei:layer n="1">
<mei:note xml:id="d3e17282" pname="g" oct="4" dur="2" stem.dir="down">
<mei:verse>
<mei:syl>je</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17304" pname="f" oct="4" dur="2" stem.dir="down">
<mei:verse>
<mei:syl>fais</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17326" pname="e" oct="4" dur="2" stem.dir="down">
<mei:verse>
<mei:syl>est</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17348" pname="e" oct="4" dur="2" stem.dir="down">
<mei:verse>
<mei:syl>pour</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="4">
<mei:layer n="1">
<mei:note xml:id="d3e17371" pname="g" oct="3" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>je</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17393" pname="d" oct="3" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>fais</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17415" pname="a" oct="3" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>est</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17437" pname="a" oct="3" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>pour</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:dir tstamp="4" place="above" staff="1" startid="d3e17160">
<mei:rend fontfam="Opus Text Std" fontsize="7.1619">#</mei:rend>
</mei:dir>
</mei:measure>
</mei:section>
<mei:ending n="1 1 1 1">
<mei:measure n="51" xml:id="d3e17460" right="rptend">
<mei:staff n="1">
<mei:layer n="1">
<mei:note xml:id="d3e17464" pname="d" oct="5" dur="1" stem.dir="down">
<mei:verse>
<mei:syl>vous.</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17486" pname="d" oct="5" dur="2" stem.dir="down">
<mei:verse>
<mei:syl wordpos="i" con="d">Mai</mei:syl>
</mei:verse>
</mei:note>
<mei:note xml:id="d3e17508" pname="c" oct="5" dur="2" stem.dir="down">
<mei:verse>
<mei:syl wordpos="t">stre</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="2">
<mei:layer n="1">
<mei:note xml:id="d3e17536" pname="a" oct="4" dur="1" stem.dir="up">
<mei:verse>
<mei:syl>vous.</mei:syl>
</mei:verse>
</mei:note>
<mei:rest xml:id="d3e17558" dur="2"/>
<mei:note xml:id="d3e17569" pname="a" oct="4" dur="2" stem.dir="up">
<mei:verse>
<mei:syl wordpos="i" con="d">Mai</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="3">
<mei:layer n="1">
<mei:note xml:id="d3e17597" pname="d" oct="4" dur="1" stem.dir="down">
<mei:verse>
<mei:syl>vous.</mei:syl>
</mei:verse>
</mei:note>
<mei:rest xml:id="d3e17619" dur="2"/>
<mei:note xml:id="d3e17630" pname="e" oct="4" dur="2" stem.dir="down">
<mei:verse>
<mei:syl wordpos="i" con="d">Mai</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="4">
<mei:layer n="1">
<mei:note xml:id="d3e17658" pname="d" oct="3" dur="1" stem.dir="up">
<mei:verse>
<mei:syl>vous.</mei:syl>
</mei:verse>
</mei:note>
<mei:rest xml:id="d3e17680" dur="2"/>
<mei:note xml:id="d3e17691" pname="a" oct="3" dur="2" stem.dir="up">
<mei:verse>
<mei:syl wordpos="i" con="d">Mai</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
</mei:measure>
</mei:ending>
<mei:ending n="2 2 2 2">
<mei:measure n="52" xml:id="d3e17716" right="end">
<mei:staff n="1">
<mei:layer n="1">
<mei:note xml:id="d3e17720" pname="d" oct="5" dur="2" stem.dir="up">
<mei:verse>
<mei:syl>vous.</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="2">
<mei:layer n="1">
<mei:note xml:id="d3e17751" pname="a" oct="4" dur="2" stem.dir="up">
<mei:verse>
<mei:syl wordpos="t">vous.</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="3">
<mei:layer n="1">
<mei:note xml:id="d3e17782" pname="d" oct="4" dur="2" stem.dir="up">
<mei:verse>
<mei:syl wordpos="t">vous.</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
<mei:staff n="4">
<mei:layer n="1">
<mei:note xml:id="d3e17813" pname="d" oct="3" dur="2" stem.dir="up">
<mei:verse>
<mei:syl wordpos="t">vois.</mei:syl>
</mei:verse>
</mei:note>
</mei:layer>
</mei:staff>
</mei:measure>
</mei:ending>
</mei:score>
<!-- JS call to MEItoVexFlow -->
<script type="text/JavaScript">
var MEI = $('#meiScore');
var canvas = $("div.a canvas")[0];
render_notation(MEI, canvas,800,400);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment