-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathplayground.html
More file actions
60 lines (59 loc) · 3.96 KB
/
Copy pathplayground.html
File metadata and controls
60 lines (59 loc) · 3.96 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starry Playground</title>
<meta name="description" content="Minimal LiveScore playground for URL-loaded playback and score viewing." />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="assets/score-viewer/playground.css" />
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
<script src="assets/vendor/musicWidgetsBrowser.umd.js" defer></script>
<script src="assets/score-viewer/playground.js" defer></script>
</head>
<body class="viewer-body">
<main class="live-score-viewer">
<svg class="viewer-icon-font" width="0" height="0" aria-hidden="true" focusable="false">
<symbol id="viewer-icon-play" viewBox="0 0 24 24">
<path d="M8 5.4v13.2L18.6 12 8 5.4Z" />
</symbol>
<symbol id="viewer-icon-pause" viewBox="0 0 24 24">
<path d="M7 5h3.8v14H7V5Zm6.2 0H17v14h-3.8V5Z" />
</symbol>
</svg>
<section class="card live-score-controls">
<input id="score-url" type="hidden" />
<div class="viewer-toolbar">
<button id="play-toggle" class="play-button" type="button" disabled aria-label="Play">
<svg class="viewer-button-icon viewer-play-icon" aria-hidden="true" focusable="false"><use href="#viewer-icon-play"></use></svg>
<svg class="viewer-button-icon viewer-pause-icon" aria-hidden="true" focusable="false"><use href="#viewer-icon-pause"></use></svg>
</button>
<button id="original-toggle" class="mode-toggle" type="button" aria-pressed="false">Parsed</button>
<span class="tempo-control" aria-label="Playback tempo">
<span class="tempo-note" aria-hidden="true">𝅘𝅥</span><span>=</span><span id="tempo-value">--</span>
<span class="tempo-buttons" aria-label="Adjust tempo">
<button id="tempo-up" type="button" aria-label="Increase tempo by 10 bpm">+</button>
<button id="tempo-down" type="button" aria-label="Decrease tempo by 10 bpm">−</button>
</span>
</span>
<span id="viewer-status" class="viewer-status">Waiting for a hash URL.</span>
</div>
<p id="mobile-performance-tip" class="viewer-mobile-tip" hidden>Mobile browsers may have limited playback performance. For smoother music playback, please use a desktop browser.</p>
</section>
<section class="card live-score-stage-wrap">
<svg class="viewer-defs" width="0" height="0" aria-hidden="true" focusable="false">
<defs class="score-token-defs">
<g class="token" id="score-token-def-noteheads-s0" font-family="Emmentaler-26" font-size="4"><text x="-0.913"></text></g>
<g class="token" id="score-token-def-noteheads-s1" font-family="Emmentaler-26" font-size="4"><text x="-0.632"></text></g>
<g class="token" id="score-token-def-noteheads-s2" font-family="Emmentaler-26" font-size="4"><text x="-0.599"></text></g>
<g class="token" id="score-token-def-noteheads-s1-u" font-family="Emmentaler-26" font-size="4"><text x="-1.264"></text><line class="stem" x1="0" x2="0" y1="-0.06" y2="-3.5" /></g>
<g class="token" id="score-token-def-noteheads-s2-u" font-family="Emmentaler-26" font-size="4"><text x="-1.198"></text><line class="stem" x1="0" x2="0" y1="-0.06" y2="-3.5" /></g>
<g class="token" id="score-token-def-noteheads-s1-d" font-family="Emmentaler-26" font-size="4"><text></text><line class="stem" x1="0" x2="0" y1="0.16" y2="3.5" /></g>
<g class="token" id="score-token-def-noteheads-s2-d" font-family="Emmentaler-26" font-size="4"><text></text><line class="stem" x1="0" x2="0" y1="0.16" y2="3.5" /></g>
</defs>
</svg>
<div id="score-stage" class="live-score-stage"></div>
</section>
</main>
</body>
</html>