generated from tadoogie/MCA-2022
-
Notifications
You must be signed in to change notification settings - Fork 25
/
metaCSS1.html
63 lines (61 loc) · 2.06 KB
/
metaCSS1.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Piece</title>
<!--<link rel="stylesheet" href="css/CETEIcean.css" media="all" />-->
<link rel="stylesheet" href="css/style.css" media="all" />
<script src="js/CETEI.js"></script>
</head>
<body>
<div id="MEImeta"></div>
<div id="app" class="panel" style="border: 1px solid light gray; min-height: 800px;">Verovio is loading...</div>
<script type="module">
import 'https://www.verovio.org/javascript/app/verovio-app.js';
const app = new Verovio.App(document.getElementById("app"), {});
// Load a file (MEI or MusicXML)
fetch("data/example.mei")
.then(function(response) {
return response.text();
})
.then(function(text) {
app.loadData(text);
});
</script>
<script>
// Get, parse, and show TEI data
var CETEIcean = new CETEI()
CETEIcean.getHTML5("data/example.mei", function(data) {
document.getElementById("TEI").appendChild(data)
})
// Get, parse and show MEI header data
var CETEI4MEI = new CETEI()
CETEI4MEI.addBehaviors({
namespaces: {
mei: "http://www.music-encoding.org/ns/mei"
}
})
CETEI4MEI.getHTML5("data/example.mei", function(data) {
// get header
var meiHead = data.querySelector('mei-meiHead')
document.getElementById("MEImeta").appendChild(meiHead)
})
var vrvToolkit = new verovio.toolkit()
vrvToolkit.setOptions(options = {
pageHeight: 500,
pageWidth: 1000,
ignoreLayout: 1,
border: 20,
scale: 50,
adjustPageHeight: true
})
fetch("data/example.mei").then(function( response ) {
response.text().then(function( data ) {
var svg = vrvToolkit.renderData(data, {})
document.getElementById('MEI').innerHTML = svg
})
})
</script>
</body>
<footer><p>Score rendering provided by <a href="http://www.verovio.org">Verovio</a>. Metadata rendered by <a href="https://github.com/TEIC/CETEIcean/"> CETEIcean</a>.</p></footer>
</html>