forked from rism-digital/verovio.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.xhtml
240 lines (228 loc) · 11.6 KB
/
index.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
---
layout: verovio
verovio-light: true
title: Verovio
active: home
projects:
- [["http://www.marenzio.org", "mode"], ["http://beethovens-werkstatt.de/prototyp-2-0/", "bw"], ["http://mith.us/ema/omas", "omas"]]
- [["http://freischuetz-digital.de", "freischuetz"],["http://simssa.ca/", "simssa"], ["http://oerc.ox.ac.uk/", "oerc"]]
- [["http://www.kb.dk/en/nb/dcm/projekter/mermeid.html", "mermeid"],["http://scorelib.huma-num.fr/", "neuma"], [ "http://ncodamusic.org/", "ncoda"]]
- [["http://www.rism.info", "rism"], ["http://kern.ccarh.org", "ccarh"], ["http://en.chopin.nifc.pl/institute/library/archives", "nifc"]]
- [["http://dme.mozarteum.at/DME/main/index.php", "dme"], ["http://www.oeaw.ac.at/ikm/forschung/digital-musicology/digitale-musikanalyse-mit-mei/", "oeaw"], ["http://www.gluck-gesamtausgabe.de/impressum.html", "gga"]]
- [["http://opac.sbn.it/opacsbn/opac/iccu/musica.jsp", "iccu"],["http://www.tassomusic.org/", "tasso"], ["https://www.bach-digital.de", "bach"]]
- [["http://folksong.eu", "folk-song-index"], ["http://mac.kaist.ac.kr/research.html", "kaist-maclab"], ["http://www.motetcycles.com/", "mcb"]]
- [["http://ricercar.cesr.univ-tours.fr/", "cesr"], ["http://measuringpolyphony.org/", "measuringpolyphony"], ["https://www.audiolabs-erlangen.de/resources/MIR/2018-ISMIR-LBD-Carus", "audiolabs"]]
- [["https://nomadplay-app.com/", "nomadplay"], ["https://trompamusic.eu/", "trompa"], ["https://koha-community.org/", "koha"]]
- [["https://vitry.org/", "vitry"], ["https://www.cantico.me", "cantico"], ["https://www.europeanarsnova.eu/", "eu-ars-nova"]]
- [["https://trala.com", "trala"], [], []]
---
<div class="row home-row home-row-flex">
<div class="col-md-5 col-sm-12">
<div class="panel-body home-panel">
<p>
Verovio is a fast, portable and lightweight <strong>open-source</strong> library for engraving <strong>Music Encoding Initiative</strong> (MEI) music scores into SVG.
</p>
<p>
Verovio follows the <strong>Standard Music Font Layout</strong> specification, which makes it easy to change the music font for <a href="{{ site.baseurl }}/smufl.xhtml">personalizing the appearance</a>.
</p>
<table align="center">
<tr>
<td>
<a href="http://music-encoding.org" target="_blank">
<img alt="MEI logo" src="{{ site.baseurl }}/images/meilogo.png" style="padding: 10px;" class="img-responsive"/>
</a>
</td>
<td>
<a href="http://www.smufl.org" target="_blank">
<img alt="SMuFL logo" src="{{ site.baseurl }}/images/smufl.png" style="padding: 10px" class="img-responsive"/>
</a>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-7 visible-lg">
{% include svg/example-lg.svg %}
</div>
<div class="col-md-7 visible-md">
{% include svg/example-md.svg %}
</div>
<div class="col-sm-12 visible-sm text-center">
{% include svg/example-sm.svg %}
</div>
</div>
<div class="row home-row">
<div class="col-md-7 col-sm-12">
<h4>News</h4>
{% for p in site.posts limit:3 %}
<hr class="news-row"/>
<h5>{{ p.date | date: '%B %d, %Y' }} – {{ p.title }}</h5>
<div class="content">
{{ p.content }}
</div>
{% endfor %}
<hr class="news-row"/>
<p class="news-link">
<a href="news.xhtml">See all news ...</a>
</p>
</div>
<div class="col-md-5 col-sm-12">
<hr class="hidden-lg hidden-md"/>
<p>
Verovio is developed by the <a href="http://rism-ch.org/" target="_blank">Swiss RISM Office</a> with the support of the Swiss National Science Foundation. The project receives dedicated financial support from the Digital Mozart Edition, a joint project of the Salzburg Mozarteum Foundation and the Packard Humanities Institute, Los Altos/CA. It also received in-kind support from the Saxon Academy of Sciences in Leipzig from 2017 to 2019.
</p>
<div style="float: right;">
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/rism-ch/verovio/subscription" data-icon="octicon-eye" data-size="large" data-show-count="false" aria-label="Watch rism-ch/verovio on GitHub">Watch</a>
<a class="github-button" href="https://github.com/rism-ch/verovio" data-icon="octicon-star" data-size="large" data-show-count="false" aria-label="Star rism-ch/verovio on GitHub">Star</a>
</div>
<p>
The source code is available on <a href="https://github.com/rism-ch/verovio">GitHub</a> under the <a href="http://www.gnu.org/copyleft/lgpl.html" target="_blank">LGPLv3 license</a>.
</p>
<table align="center">
<tr>
<td>
<a href="http://www.rism-ch.org" target="_blank">
<img alt="RISM logo" src="{{ site.baseurl }}/images/rism-ch.png" class="support-logo img-responsive"/>
</a>
</td>
<td>
<a href="http://www.snf.ch" target="_blank">
<img alt="SNF logo" src="{{ site.baseurl }}/images/snf.png" class="support-logo img-responsive"/>
</a>
</td>
<td>
<a href="http://www.mozarteum.at" target="_blank">
<img alt="Mozarteum logo" src="{{ site.baseurl }}/images/mozarteum.png" class="support-logo img-responsive"/>
</a>
</td>
<!--><td>
<a href="http://www.mozarteum.at" target="_blank">
<img alt="SNF logo" src="{{ site.baseurl }}/images/saw.png" class="support-logo img-responsive"/>
</a>
</td>-->
</tr>
</table>
</div>
</div>
<div class="row home-row home-row-flex">
<div class="col-sm-6 hidden-xs">
<div id="video-carousel" class="carousel slide" data-ride="carousel" data-interval="11000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#video-carousel" data-slide-to="0"></li>
<li data-target="#video-carousel" data-slide-to="1"></li>
<li data-target="#video-carousel" data-slide-to="2"></li>
<li data-target="#video-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<video autoplay="false" loop="true" class="img-responsive">
<source src="/movies/editor.webm" type="video/webm"/>
<source src="/movies/editor.mp4" type="video/mp4"/>
</video>
</div>
<div class="item">
<video autoplay="false" loop="true" class="img-responsive">
<source src="/movies/reflow.webm" type="video/webm"/>
<source src="/movies/reflow.mp4" type="video/mp4"/>
</video>
</div>
<div class="item">
<video autoplay="false" loop="true" class="img-responsive">
<source src="/movies/layout.webm" type="video/webm"/>
<source src="/movies/layout.mp4" type="video/mp4"/>
</video>
</div>
<div class="item">
<video autoplay="false" loop="true" class="img-responsive">
<source src="/movies/choice.webm" type="video/webm"/>
<source src="/movies/choice.mp4" type="video/mp4"/>
</video>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="panel-body home-panel">
<p>
The SVG output of Verovio is designed as an <strong>intermediate reflowable layer</strong> that facilitates the development of <strong>interactive applications</strong>, such as music notation editors or interactive digital editions.
</p>
<table align="center">
<tr>
<td>
<img src="{{ site.baseurl }}/images/interaction.png" style="padding: 10px;" class="img-responsive"/>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row home-row home-row-flex">
<div class="col-sm-9 col-xs-12">
<div class="panel-body home-panel">
<p>
Verovio is designed to be usable in a wide range of technical environments (<a href="{{ site.baseurl }}/command-line.xhtml">C++</a>, <a href="{{ site.baseurl }}/javascript.xhtml">JavaScript</a>, <a href="{{ site.baseurl }}/python.xhtml">Python</a>).
</p>
<p>
It works on desktop computers but also tablets and mobile devices. Verovio also provides basic support for other music notation format, such as <a href="{{ site.baseurl }}/musicxml.html">MusicXML import</a> and <a href="{{ site.baseurl }}/midi.xhtml">MIDI output</a>.
</p>
</div>
</div>
<div class="col-sm-3 hidden-xs">
<img src="{{ site.baseurl }}/images/mobiles.png" class="img-responsive"/>
</div>
</div>
<div class="row home-row">
<div class="col-xs-12">
<p>
Verovio is designed to be used in a wide range of applications and has been adopted by several projects or institutions. It is currently used by:
</p>
<table align="center">
{% for line in page.projects %}
<tr>
{% for p in line %}
<td align="center">
{%- if p != empty -%}
<a href="{{ p[0] }}" target="_blank">
<img src="{{ site.baseurl }}/images/projects/{{ p[1] }}.png" style="padding: 10px" class="img-responsive"/>
</a>
{%- endif -%}
</td>
{% endfor %}
</tr>
{% endfor %}
</table>
<p style="margin-top: 10px;">
Do you use Verovio? <a href="mailto:info@rism-ch.org">Let us know</a>!
</p>
</div>
</div>
<div class="row home-row">
<div class="col-xs-12 col-sm-8">
<h5>Why Verovio?</h5>
<p>
Verovio is named after a Dutch music engraver, Simone Verovio, who was active in Rome in the late sixteenth century. He was one of the very first to use engraving on copper plates for printing music, a technique that was revealed to be the most suited to music about one century later.
</p>
</div>
<div class="col-sm-4 hidden-xs">
<table align="center">
<tr>
<td>
<img alt="Verovio canon" src="{{ site.baseurl }}/images/verovio-canon.png" class="img-responsive"/>
</td>
</tr>
</table>
</div>
</div>
<script async="true" defer="true" src="https://buttons.github.io/buttons.js"></script>
<script type="text/javascript">
//<![CDATA[
$( document ).ready(function() {
rand = Math.floor( Math.random() * 4);
$('#video-carousel .carousel-indicators li').eq(rand).addClass("active");
$('#video-carousel .carousel-inner div').eq(rand).addClass("active");
});
//]]>
</script>