forked from opensheetmusicdisplay/opensheetmusicdisplay
-
Notifications
You must be signed in to change notification settings - Fork 0
/
domparse_demo.html
89 lines (75 loc) · 3.56 KB
/
domparse_demo.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DomParser Demo</title>
</head>
<body>
<h1>Open Console and play around :)</h1>
<script type="text/javascript">
const rawXml = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE score-partwise PUBLIC "-//Recordare//DTD MusicXML 3.1 Partwise//EN" "http://www.musicxml.org/dtds/partwise.dtd">
<note default-x="294.17" default-y="-30.00">
<chord/>
<pitch>
<step>B</step>
<alter>-1</alter>
<octave>2</octave>
</pitch>
<duration>1</duration>
<voice>1</voice>
<type>eighth</type>
<stem>up</stem>
</note>`
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(rawXml, 'application/xml');
const stack = [xmlDoc.firstElementChild];
let target;
while (target = stack.pop()) {
// Always traversing sibling tags
if (target.nextElementSibling) {
stack.push(target.nextElementSibling);
}
console.log("TARGET: %s:", target.tagName);
switch (target.tagName.toUpperCase()) {
case 'NOTE':
// query child
const durationElem = target.querySelector('duration');
const duration = +durationElem.innerHTML;
const restElem = target.querySelector('rest');
if (restElem) {
const stepElem = restElem.querySelector('display-step');
const octaveElem = restElem.querySelector('display-octave');
const transposedRest = this.transposePitch(stepElem.innerHTML, 0, +octaveElem.innerHTML);
stepElem.innerHTML = transposedRest.step;
octaveElem.innerHTML = `${transposedRest.octave}`;
}
const pitchElem = target.querySelector('pitch');
if (pitchElem) {
let stepElem = pitchElem.querySelector('step');
let octaveElem = pitchElem.querySelector('octave');
let alterElem = pitchElem.querySelector('alter');
let accidentalElem = target.querySelector('accidental');
// fake stuff for demo purpose
const transposedNote = {octave: 3, step: 'C', alter: 1, accidental: 'flat'}
octaveElem.innerHTML = transposedNote.octave;
stepElem.innerHTML = transposedNote.step;
alterElem && (alterElem.innerHTML = transposedNote.alter);
if (!accidentalElem) {
accidentalElem = document.createElementNS('', 'accidental');
pitchElem.appendChild(accidentalElem);
}
accidentalElem.innerHTML = transposedNote.accidental
}
//continue;
}
// Always traversing sibling tags
if (target.firstElementChild) {
stack.push(target.firstElementChild);
}
}
console.log(rawXml)
console.log(xmlDoc.firstElementChild.outerHTML)
</script>
</body>
</html>