@fretfall/player 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +72 -0
- package/demo.atex +113 -0
- package/favicon.svg +6 -0
- package/fingering.js +1 -0
- package/highway.js +1 -0
- package/index.html +883 -0
- package/music.js +1 -0
- package/package.json +24 -0
- package/perf.js +2 -0
- package/player.js +1 -0
- package/sync.js +1 -0
- package/themes.js +1 -0
package/index.html
ADDED
|
@@ -0,0 +1,883 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>Fretfall</title>
|
|
7
|
+
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
|
|
8
|
+
<link id="fonts" rel="stylesheet" href="" />
|
|
9
|
+
<link rel="preload" href="demo.atex" as="fetch" crossorigin />
|
|
10
|
+
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@coderline/alphatab@1.8.4/dist/alphaTab.min.js" as="script" />
|
|
11
|
+
<style>:root{--bg: #0e1014;--ink: #0e1014;--text: #e8eaef;--muted: #7b8190;--accent: #c8f04a;--chip: #171a20;--chip-border: #2a2f38;--done: #e8eaef;--todo: #23272f;--ui: system-ui, sans-serif;--num: system-ui, sans-serif;--lyric: system-ui, sans-serif;--lyric-style: normal}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--bg);color:var(--text);font:14px/1.4 var(--ui);accent-color:var(--accent)}canvas{position:fixed;inset:0;width:100%;height:100%;display:block}button{font:inherit;color:inherit}.bar{position:fixed;z-index:3;left:32px;right:32px;top:18px;height:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:transform .25s ease,opacity .25s ease,visibility .25s}.group{display:flex;align-items:center;gap:10px;min-width:0}.group:last-child{flex:none}.wordmark{display:flex;align-items:center;gap:7px;font:700 15px var(--num);letter-spacing:.22em}.wordmark .fall{transform-box:fill-box;transform-origin:center;transform:rotate(14deg);animation:fall .75s .8s both}@keyframes fall{0%{transform:translate(-3.5px,-1.42px) rotate(0);animation-timing-function:cubic-bezier(.55,0,.85,.35)}40%{transform:translate(0) rotate(18deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}56%{transform:translateY(-.35px) rotate(11.5deg);animation-timing-function:ease-in-out}74%{transform:translateY(.08px) rotate(15.2deg);animation-timing-function:ease-in-out}88%{transform:translate(0) rotate(13.6deg);animation-timing-function:ease-in-out}to{transform:translate(0) rotate(14deg)}}@media(prefers-reduced-motion:reduce){.wordmark .fall{animation:none}}.seg{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--chip);border:1px solid var(--chip-border);overflow-x:auto;scrollbar-width:none}.seg button{border:0;background:none;cursor:pointer;padding:5px 12px;border-radius:6px;font:500 13px var(--ui);color:var(--muted);white-space:nowrap}.seg button[aria-pressed=true]{background:var(--text);color:var(--ink);font-weight:600}.seg select{max-width:22vw;border:0;padding:4px 6px;background:none;color:var(--text);font:600 13px var(--ui)}.seg option{background:var(--ink);color:var(--text)}.icon{flex:none;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:8px;background:var(--chip);border:1px solid var(--chip-border);color:var(--text)}.icon[aria-pressed=true],.icon[aria-expanded=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.speed{height:36px;display:flex;align-items:center;padding:0 2px;border-radius:8px;background:var(--chip);border:1px solid var(--chip-border);color:var(--muted)}.speed button{cursor:pointer;width:28px;height:32px;display:grid;place-items:center;padding:0;border:0;background:none;color:inherit}.speed #speed{width:auto;min-width:46px;font:600 14px var(--num);color:var(--text)}.time{margin-right:6px;font:14px var(--num);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.divider{width:1px;height:24px;margin:0 4px;background:var(--chip-border)}.menu{display:contents}#menuButton{display:none}#phrases{position:fixed;left:32px;right:32px;top:74px;height:54px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}#phrases div{position:absolute;bottom:0;min-width:2px;border-radius:2px;background:var(--todo)}#phrases div.done{background:var(--done)}#phraseTime{position:absolute;top:calc(100% + 16px);transform:translate(-50%);padding:2px 7px;border-radius:6px;background:var(--ink);border:1px solid var(--chip-border);font:600 11px var(--num);font-variant-numeric:tabular-nums;color:var(--text);pointer-events:none}#loopBox{position:absolute;top:-6px;bottom:-17px;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 22%,transparent)}#loopBox:before,#loopBox:after{content:"";position:absolute;top:-11px;bottom:-11px;width:4px;border:4px solid transparent;border-radius:6px;background:var(--accent) padding-box;cursor:ew-resize}#loopBox:before{left:-6.75px}#loopBox:after{right:-6.75px}#progress{position:fixed;left:32px;right:32px;top:134px;height:5px;border-radius:3px;overflow:hidden;background:var(--todo)}#progress div{width:0;height:100%;background:var(--accent);opacity:.9}#lyrics{position:fixed;left:40px;top:164px;max-width:min(560px,46vw);display:flex;flex-direction:column;gap:8px;pointer-events:none;font-family:var(--lyric);font-style:var(--lyric-style);text-shadow:0 2px 14px var(--ink),0 0 4px var(--ink)}#section{min-height:16px;font:600 12px var(--num);letter-spacing:.18em;color:var(--accent)}#lines{position:relative;height:2.45em;font-size:clamp(20px,2.3vw,32px);line-height:1.15}#lines div{position:absolute;top:0;left:0;white-space:nowrap;color:var(--muted);transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease}#lines .low{transform:translateY(1.3em);opacity:.5}#lines .gone{opacity:0;transition-duration:.45s,.25s}#lines .gone.up{transform:translateY(-.8em)}#lines span{transition:color .15s}#lines .sung{color:var(--text)}@media(prefers-reduced-motion:reduce){#lines div{transition-property:opacity}}#info{position:fixed;left:40px;right:226px;bottom:14px;display:flex;align-items:center;font-size:13px;white-space:nowrap;color:var(--muted);pointer-events:none}#info b{color:var(--text);font-weight:600}#info>span+span:before{content:"";display:inline-block;width:1px;height:12px;margin:0 14px;vertical-align:-1px;background:var(--chip-border)}#info .tuning{position:relative;pointer-events:auto;cursor:help}#info .tuning>b{text-decoration:underline dotted var(--muted);text-underline-offset:3px}#info .tip{left:0;right:auto;white-space:normal}#info .tuning:is(:hover,:focus)>.tip{opacity:1;visibility:visible;transform:none}.pegs{display:flex;align-items:flex-start;gap:4px;margin:10px 0 8px}.peg{display:flex;flex-direction:column;align-items:center;min-width:26px;gap:2px;font:600 13px var(--num)}.peg i{font-style:normal;font-size:11px;color:var(--muted)}.peg .move:before{content:"";display:block;width:3px;height:calc(6px + var(--d) * 3px);margin:2px auto 3px;border-radius:2px;background:var(--c)}.peg strong{color:var(--c)}.peg.same{opacity:.45}.tip small{display:block;font-size:11px}:root:fullscreen .bar{transform:translateY(calc(-100% - 18px));opacity:0;visibility:hidden;transition-delay:.4s}:root:fullscreen:has(#phrases:hover,#progress:hover,.bar:hover) .bar{transform:none;opacity:1;visibility:visible;transition-delay:0s}#tools{position:fixed;z-index:3;right:32px;bottom:6px}#tools .icon{position:relative}.icon:disabled{cursor:default;color:var(--muted)}.icon:disabled svg{opacity:.5}#loopTools{position:fixed;z-index:4;display:flex;transform:translate(-50%,calc(-50% + 3px))}#loopTools .icon{width:32px;height:26px;background:var(--ink);border-color:var(--accent)}#loopTools svg{width:15px;height:15px}#trainer{border-radius:13px 0 0 13px}#clearLoop{border-left:0;border-radius:0 13px 13px 0;color:var(--muted)}#clearLoop:hover{color:var(--text)}#loopTools .icon[aria-pressed=true]{background:var(--accent);color:var(--ink)}.tip{position:absolute;right:0;bottom:calc(100% + 10px);width:max-content;max-width:250px;padding:8px 10px;border-radius:8px;background:var(--ink);border:1px solid var(--chip-border);box-shadow:0 12px 30px #00000073;color:var(--muted);font:12px/1.45 var(--ui);text-align:left;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease,visibility .12s}.tip b{display:flex;justify-content:space-between;gap:12px;margin-bottom:2px;color:var(--text);font-weight:600}.tip kbd{padding:0 5px;border:1px solid var(--chip-border);border-radius:4px;color:var(--muted);font:inherit}:is(.icon,.speed):hover>.tip,.icon:focus-visible>.tip,.speed:focus-within>.tip{opacity:1;visibility:visible;transform:none}.bar :is(.icon,.speed){position:relative}.bar .tip{top:calc(100% + 10px);bottom:auto;transform:translateY(-4px)}.bar [aria-expanded=true]>.tip{display:none}#loopTools .tip{top:calc(100% + 10px);bottom:auto;left:var(--tip, 50%);right:auto;transform:translate(calc(-1 * var(--tip, 50%)),-4px)}#loopTools .icon:hover>.tip,#loopTools .icon:focus-visible>.tip{transform:translate(calc(-1 * var(--tip, 50%)))}:root:fullscreen :is(#info,#tools>:not(#minimal)){display:none}:root.minimal :is(.bar,#phrases,#progress,#loopTools,#info,#tools>:not(#minimal)){display:none}:root.tab2d .only-3d,:root:not(.tab2d) .only-2d{display:none}:root.tab2d .only-3d+.only-3d+h3{padding-top:0;border-top:0}:root.minimal #lyrics{top:24px}#status{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;max-width:min(560px,90vw);padding:10px 16px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-border);backdrop-filter:blur(10px);text-align:center}:root.banding :is(#highway,#phrases,#progress,#loopTools,#lyrics,#info,#intro,#time){display:none}#bandNote{position:fixed;left:50%;top:56%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;max-width:min(440px,90vw);padding:14px 20px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-border);text-align:center}#bandNote .text-button{justify-self:center}#status:not(.loading) .bars{display:none}.bars{flex:none;display:inline-flex;align-items:flex-end;gap:3px;height:16px}.bars i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform:scaleY(.3);transform-origin:bottom}.bars.moving i{animation:bars .8s ease-in-out infinite alternate}.bars.moving i:nth-child(2){animation-duration:1.1s;animation-delay:-.5s}.bars.moving i:nth-child(3){animation-duration:.7s;animation-delay:-.2s}.bars.moving i:nth-child(4){animation-duration:1s;animation-delay:-.7s}@keyframes bars{0%{transform:scaleY(.2)}to{transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){.bars.moving i{animation:none;transform:scaleY(.6)}}#intro{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;max-width:min(640px,90vw);padding:22px 30px;border-radius:16px;background:color-mix(in srgb,var(--ink) 72%,transparent);border:1px solid var(--chip-border);text-align:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}#intro.show{opacity:1;visibility:visible}#introTitle{font:700 clamp(22px,3vw,38px) / 1.15 var(--num);color:var(--text)}#introFacts{font-size:14px;color:var(--muted)}#introState{display:flex;align-items:center;gap:10px;margin-top:10px;font:600 12px var(--num);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.sheet{position:fixed;right:32px;top:66px;z-index:2;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 118px);display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--ink) 94%,transparent);backdrop-filter:blur(18px);border:1px solid var(--chip-border);box-shadow:0 24px 60px #0000008c}.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px 18px}.sheet-head h2{margin:0;font:600 15px var(--ui)}.close{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}.close:hover{background:var(--chip);color:var(--text)}.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin:0 14px;padding:3px;border-radius:9px;background:var(--chip);border:1px solid var(--chip-border)}.tabs button{padding:6px 0;border:0;border-radius:6px;background:none;font:500 13px var(--ui);color:var(--muted);cursor:pointer}.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]{background:var(--text);color:var(--ink);font-weight:600}.pane{display:grid;align-content:start;gap:18px;padding:18px 18px 20px;overflow:hidden auto}.pane h3{margin:0 0 -6px;font:600 11px var(--num);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.pane h3~h3{padding-top:16px;border-top:1px solid var(--chip-border)}.setting{display:grid;gap:8px}.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px 20px}.setting-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;font-weight:500}.setting-head output{font:600 12px var(--num);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.setting .seg{overflow:visible}.setting .seg button{flex:1}.scale{display:flex;justify-content:space-between;margin-top:-4px;font-size:11px;color:var(--muted)}.hint{margin:-2px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}.text-button{justify-self:start;padding:4px 0;border:0;background:none;font:500 12px var(--ui);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.text-button:hover{color:var(--text)}:is(#settings,.volume) input[type=range]{-webkit-appearance:none;appearance:none;height:18px;margin:0;background:none;cursor:pointer}#settings input[type=range]{width:100%}:is(#settings,.volume) input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--fill, 50%),var(--chip-border) var(--fill, 50%))}:is(#settings,.volume) input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--text);border:3px solid var(--accent);box-shadow:0 1px 4px #0006}:is(#settings,.volume) input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--chip-border)}:is(#settings,.volume) input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}:is(#settings,.volume) input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--text);border:3px solid var(--accent)}.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;font-weight:500;cursor:pointer}.toggle small{display:block;margin-top:2px;font-size:12px;font-weight:400;line-height:1.4;color:var(--muted)}.toggle input{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:36px;height:20px;margin:0;border-radius:10px;background:var(--chip-border);cursor:pointer;transition:background .15s}.toggle input:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .15s}.toggle input:checked{background:var(--accent)}.toggle input:checked:after{transform:translate(16px);background:var(--ink)}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}.cards button{display:grid;gap:8px;justify-items:start;padding:10px;border-radius:9px;border:1px solid var(--chip-border);background:var(--chip);font:500 12px var(--ui);color:var(--muted);text-align:left;cursor:pointer}.cards button:hover{color:var(--text)}.cards button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)}.dots{display:flex;gap:4px}.dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff2e}.headstock{width:100%;height:52px}.order{font:600 12px var(--num);letter-spacing:.12em;color:var(--text)}#legend{width:min(430px,calc(100vw - 32px))}.legend-find{padding:0 14px 6px}.legend-find input{width:100%;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--chip-border);background:var(--chip);color:var(--text);font:13px var(--ui)}.legend-find input::placeholder{color:var(--muted)}.legend{gap:4px;padding-top:10px}.legend h3{margin:14px 0 4px}.legend h3:first-child{margin-top:0}.legend-item{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:4px 0}.legend-item b{display:block;font-size:13px;font-weight:500}.legend-item span{display:block;font-size:12px;line-height:1.4;color:var(--muted)}.legend-item .keys{display:flex;justify-content:center;gap:4px}.legend-item kbd{min-width:22px;padding:2px 6px;border:1px solid var(--chip-border);border-bottom-width:2px;border-radius:5px;background:var(--chip);font:600 12px var(--num);text-align:center;white-space:nowrap}.legend-item svg{width:64px;height:36px;border-radius:8px;background:var(--chip);border:1px solid var(--chip-border);fill:none;stroke-linecap:round;stroke-linejoin:round}.legend-item text{font-family:var(--num);font-weight:700;text-anchor:middle;dominant-baseline:central}.legend-empty{margin:8px 0;font-size:13px;color:var(--muted)}.f0{fill:var(--s0)}.f1{fill:var(--s1)}.f2{fill:var(--s2)}.f3{fill:var(--s3)}.f4{fill:var(--s4)}.l0{stroke:var(--s0)}.l1{stroke:var(--s1)}.l2{stroke:var(--s2)}.l3{stroke:var(--s3)}.l4{stroke:var(--s4)}.lm{stroke:var(--muted)}.li{stroke:var(--ink)}.ft{fill:var(--text)}.lt{stroke:var(--text)}.fi{fill:var(--ink)}.fa{fill:var(--accent)}.fl{fill:var(--lane)}.ll{stroke:var(--lane)}.lw{stroke:#fff}.fm{fill:var(--muted)}.la{stroke:var(--accent)}.fw{fill:#fff}.volume{position:relative}.volume .icon.muted{color:var(--muted)}.volume-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:10px;background:var(--ink);border:1px solid var(--chip-border);box-shadow:0 12px 30px #00000073}.volume-panel input{width:150px}.volume-panel output{min-width:36px;font:600 12px var(--num);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.volume-mute{flex:none;width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:none;color:var(--text);cursor:pointer}.volume-mute:hover{background:var(--chip)}.volume-mute[aria-pressed=true]{color:var(--muted)}#drop{position:fixed;inset:12px;z-index:3;display:grid;place-items:center;border:2px dashed var(--accent);border-radius:16px;background:#00000073;font:600 20px var(--num)}#tab{position:fixed;left:-10000px;top:0;width:1000px}@media(max-width:900px){.time{display:none}#menuButton{display:grid}.volume{position:static}.volume-panel{left:auto;right:0;transform:none}.menu{display:none;position:absolute;top:calc(100% + 8px);right:0;width:230px;flex-direction:column;gap:2px;padding:6px;border-radius:12px;background:var(--ink);border:1px solid var(--chip-border);box-shadow:0 12px 30px #00000073}#menuButton[aria-expanded=true]+.menu{display:flex}.menu .icon{width:100%;height:38px;display:flex;justify-content:flex-start;gap:12px;padding:0 10px;border:0;border-radius:7px;background:none;font:500 13px var(--ui)}.menu .icon:after{content:attr(data-label)}.menu .icon:hover{background:var(--chip)}.menu .icon[aria-pressed=true],.menu .icon[aria-expanded=true]{background:none;color:var(--accent)}.menu .tip{display:none}.menu .divider{width:auto;height:1px;margin:4px}}@media(max-width:560px){.bar{flex-wrap:wrap;height:auto;row-gap:8px}.bar>.group:first-child,.bar>.group:last-child{flex:1 1 100%;height:40px}.speed{margin-left:auto}#menuButton{position:absolute;top:2px;right:0}.menu{top:48px}#phrases{top:122px}#info{flex-direction:column;align-items:flex-start;gap:2px;font-size:12px}#info>span+span:before{display:none}#info>span:first-child{max-width:100%;overflow:hidden;text-overflow:ellipsis}#progress{top:182px}#lyrics{top:212px}.sheet{top:114px;max-height:calc(100vh - 166px)}}@media(max-width:520px){.sheet{right:16px}}</style>
|
|
12
|
+
<link rel="modulepreload" href="player.js">
|
|
13
|
+
<link rel="modulepreload" href="fingering.js">
|
|
14
|
+
<link rel="modulepreload" href="highway.js">
|
|
15
|
+
<link rel="modulepreload" href="music.js">
|
|
16
|
+
<link rel="modulepreload" href="perf.js">
|
|
17
|
+
<link rel="modulepreload" href="sync.js">
|
|
18
|
+
<link rel="modulepreload" href="themes.js">
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<canvas id="highway"></canvas>
|
|
22
|
+
<header class="bar">
|
|
23
|
+
<div class="group" style="gap: 20px">
|
|
24
|
+
<div class="wordmark">
|
|
25
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
26
|
+
<rect x="4" y="3" width="4.5" height="18" rx="1.5" />
|
|
27
|
+
<rect x="4" y="3" width="16" height="4.5" rx="1.5" />
|
|
28
|
+
<rect class="fall" x="10.5" y="11.67" width="9" height="4.5" rx="1.5" />
|
|
29
|
+
</svg>
|
|
30
|
+
FRETFALL
|
|
31
|
+
</div>
|
|
32
|
+
<div
|
|
33
|
+
class="seg"
|
|
34
|
+
id="arrangements"
|
|
35
|
+
role="group"
|
|
36
|
+
aria-label="Arrangement"
|
|
37
|
+
></div>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="group">
|
|
40
|
+
<span class="time" id="time">0:00 / 0:00</span>
|
|
41
|
+
<div class="speed">
|
|
42
|
+
<button id="slower" aria-label="Slower" aria-describedby="speedTip">
|
|
43
|
+
<svg
|
|
44
|
+
width="16"
|
|
45
|
+
height="16"
|
|
46
|
+
viewBox="0 0 20 20"
|
|
47
|
+
fill="none"
|
|
48
|
+
stroke="currentColor"
|
|
49
|
+
stroke-width="1.6"
|
|
50
|
+
stroke-linecap="round"
|
|
51
|
+
>
|
|
52
|
+
<path d="M5 10h10" />
|
|
53
|
+
</svg>
|
|
54
|
+
</button>
|
|
55
|
+
<button id="speed" aria-describedby="speedTip">100%</button>
|
|
56
|
+
<button id="faster" aria-label="Faster" aria-describedby="speedTip">
|
|
57
|
+
<svg
|
|
58
|
+
width="16"
|
|
59
|
+
height="16"
|
|
60
|
+
viewBox="0 0 20 20"
|
|
61
|
+
fill="none"
|
|
62
|
+
stroke="currentColor"
|
|
63
|
+
stroke-width="1.6"
|
|
64
|
+
stroke-linecap="round"
|
|
65
|
+
>
|
|
66
|
+
<path d="M10 5v10M5 10h10" />
|
|
67
|
+
</svg>
|
|
68
|
+
</button>
|
|
69
|
+
<span class="tip" role="tooltip" id="speedTip"><b>Speed <span><kbd>−</kbd> <kbd>+</kbd></span></b>Slow the song down to practise it, or speed it up, in 10% steps. The number goes back to 100% <kbd>0</kbd></span>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="volume">
|
|
72
|
+
<button
|
|
73
|
+
class="icon"
|
|
74
|
+
id="volumeButton"
|
|
75
|
+
aria-expanded="false"
|
|
76
|
+
aria-controls="volumePanel"
|
|
77
|
+
aria-label="Volume"
|
|
78
|
+
aria-describedby="volumeTip"
|
|
79
|
+
>
|
|
80
|
+
<span class="tip" role="tooltip" id="volumeTip"><b>Volume <span><kbd>↑</kbd> <kbd>↓</kbd></span></b>Opens a slider. <kbd>M</kbd> mutes</span>
|
|
81
|
+
</button>
|
|
82
|
+
<div class="volume-panel" id="volumePanel" hidden>
|
|
83
|
+
<button
|
|
84
|
+
class="volume-mute"
|
|
85
|
+
id="volumeMute"
|
|
86
|
+
aria-pressed="false"
|
|
87
|
+
></button>
|
|
88
|
+
<input
|
|
89
|
+
id="volume"
|
|
90
|
+
type="range"
|
|
91
|
+
min="0"
|
|
92
|
+
max="1"
|
|
93
|
+
step="0.02"
|
|
94
|
+
aria-label="Volume"
|
|
95
|
+
/>
|
|
96
|
+
<output id="volumeOut" for="volume"></output>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
<button
|
|
100
|
+
class="icon"
|
|
101
|
+
id="menuButton"
|
|
102
|
+
aria-expanded="false"
|
|
103
|
+
aria-controls="menu"
|
|
104
|
+
aria-label="Menu"
|
|
105
|
+
>
|
|
106
|
+
<svg
|
|
107
|
+
width="18"
|
|
108
|
+
height="18"
|
|
109
|
+
viewBox="0 0 20 20"
|
|
110
|
+
fill="none"
|
|
111
|
+
stroke="currentColor"
|
|
112
|
+
stroke-width="1.6"
|
|
113
|
+
stroke-linecap="round"
|
|
114
|
+
>
|
|
115
|
+
<path d="M4 6h12M4 10h12M4 14h12" />
|
|
116
|
+
</svg>
|
|
117
|
+
</button>
|
|
118
|
+
<div class="menu" id="menu">
|
|
119
|
+
<button
|
|
120
|
+
class="icon"
|
|
121
|
+
id="loop"
|
|
122
|
+
data-label="Loop"
|
|
123
|
+
aria-pressed="false"
|
|
124
|
+
aria-label="Loop"
|
|
125
|
+
aria-describedby="loopTip"
|
|
126
|
+
>
|
|
127
|
+
<svg
|
|
128
|
+
width="18"
|
|
129
|
+
height="18"
|
|
130
|
+
viewBox="0 0 20 20"
|
|
131
|
+
fill="none"
|
|
132
|
+
stroke="currentColor"
|
|
133
|
+
stroke-width="1.6"
|
|
134
|
+
stroke-linecap="round"
|
|
135
|
+
stroke-linejoin="round"
|
|
136
|
+
>
|
|
137
|
+
<path d="M13.5 3.5l2.5 2.5-2.5 2.5" />
|
|
138
|
+
<path d="M4 10V9a3 3 0 0 1 3-3h9" />
|
|
139
|
+
<path d="M6.5 16.5L4 14l2.5-2.5" />
|
|
140
|
+
<path d="M16 10v1a3 3 0 0 1-3 3H4" />
|
|
141
|
+
</svg>
|
|
142
|
+
<span class="tip" role="tooltip" id="loopTip"><b>Loop <kbd>L</kbd></b>Loop the phrase you are in. Drag across the phrase bars to loop a stretch, or shift-click one to stretch the loop to it</span>
|
|
143
|
+
</button>
|
|
144
|
+
<button
|
|
145
|
+
class="icon"
|
|
146
|
+
id="play"
|
|
147
|
+
aria-describedby="playTip"
|
|
148
|
+
>
|
|
149
|
+
<span class="tip" role="tooltip" id="playTip"><b>Play and pause <kbd>Space</kbd></b>Play the song from where the highway is</span>
|
|
150
|
+
</button>
|
|
151
|
+
<div class="divider"></div>
|
|
152
|
+
<button
|
|
153
|
+
class="icon"
|
|
154
|
+
id="open"
|
|
155
|
+
data-label="Open file"
|
|
156
|
+
aria-label="Open file"
|
|
157
|
+
aria-describedby="openTip"
|
|
158
|
+
>
|
|
159
|
+
<svg
|
|
160
|
+
width="18"
|
|
161
|
+
height="18"
|
|
162
|
+
viewBox="0 0 20 20"
|
|
163
|
+
fill="none"
|
|
164
|
+
stroke="currentColor"
|
|
165
|
+
stroke-width="1.6"
|
|
166
|
+
stroke-linecap="round"
|
|
167
|
+
stroke-linejoin="round"
|
|
168
|
+
>
|
|
169
|
+
<path
|
|
170
|
+
d="M3 6.5V15a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 17 15V8.5A1.5 1.5 0 0 0 15.5 7H10L8.5 5H4.5A1.5 1.5 0 0 0 3 6.5z"
|
|
171
|
+
/>
|
|
172
|
+
</svg>
|
|
173
|
+
<span class="tip" role="tooltip" id="openTip"><b>Open a song <kbd>O</kbd></b>A Guitar Pro file, or a tab with its recording. You can also drop them anywhere</span>
|
|
174
|
+
</button>
|
|
175
|
+
<div class="divider"></div>
|
|
176
|
+
<button
|
|
177
|
+
class="icon"
|
|
178
|
+
id="legendButton"
|
|
179
|
+
data-label="Notation and shortcuts"
|
|
180
|
+
aria-expanded="false"
|
|
181
|
+
aria-controls="legend"
|
|
182
|
+
aria-label="Notation and shortcuts"
|
|
183
|
+
aria-describedby="legendTip"
|
|
184
|
+
>
|
|
185
|
+
<svg
|
|
186
|
+
width="18"
|
|
187
|
+
height="18"
|
|
188
|
+
viewBox="0 0 20 20"
|
|
189
|
+
fill="none"
|
|
190
|
+
stroke="currentColor"
|
|
191
|
+
stroke-width="1.6"
|
|
192
|
+
stroke-linecap="round"
|
|
193
|
+
stroke-linejoin="round"
|
|
194
|
+
>
|
|
195
|
+
<circle cx="10" cy="10" r="7.5" />
|
|
196
|
+
<path
|
|
197
|
+
d="M7.8 7.6a2.3 2.3 0 0 1 4.4.9c0 1.5-2.2 1.9-2.2 3.2"
|
|
198
|
+
/>
|
|
199
|
+
<path d="M10 14.4h.01" />
|
|
200
|
+
</svg>
|
|
201
|
+
<span class="tip" role="tooltip" id="legendTip"><b>Notation and shortcuts <kbd>?</kbd></b>What every mark on the highway means, and the keyboard shortcuts</span>
|
|
202
|
+
</button>
|
|
203
|
+
<button
|
|
204
|
+
class="icon"
|
|
205
|
+
id="settingsButton"
|
|
206
|
+
data-label="Settings"
|
|
207
|
+
aria-expanded="false"
|
|
208
|
+
aria-controls="settings"
|
|
209
|
+
aria-label="Settings"
|
|
210
|
+
aria-describedby="settingsTip"
|
|
211
|
+
>
|
|
212
|
+
<svg
|
|
213
|
+
width="18"
|
|
214
|
+
height="18"
|
|
215
|
+
viewBox="0 0 20 20"
|
|
216
|
+
fill="none"
|
|
217
|
+
stroke="currentColor"
|
|
218
|
+
stroke-width="1.6"
|
|
219
|
+
stroke-linecap="round"
|
|
220
|
+
>
|
|
221
|
+
<path d="M3.5 6h8M15.5 6h1M3.5 14h2M9.5 14h7" />
|
|
222
|
+
<circle cx="13.5" cy="6" r="2" />
|
|
223
|
+
<circle cx="7.5" cy="14" r="2" />
|
|
224
|
+
</svg>
|
|
225
|
+
<span class="tip" role="tooltip" id="settingsTip"><b>Settings <kbd>S</kbd></b>The view of the highway and what shows on it, the strings' colours and order, and the audio delay</span>
|
|
226
|
+
</button>
|
|
227
|
+
<button
|
|
228
|
+
class="icon"
|
|
229
|
+
id="fullscreen"
|
|
230
|
+
data-label="Full screen"
|
|
231
|
+
aria-label="Full screen"
|
|
232
|
+
aria-describedby="fullscreenTip"
|
|
233
|
+
>
|
|
234
|
+
<span class="tip" role="tooltip" id="fullscreenTip"><b>Full screen <kbd>F</kbd></b>The highway, the phrase bars and the lyrics. Point at the phrase bars to bring the header back</span>
|
|
235
|
+
</button>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
</header>
|
|
239
|
+
<div id="phrases"><span id="loopBox" hidden></span><span id="phraseTime" hidden></span></div>
|
|
240
|
+
<div id="loopTools" role="group" aria-label="Loop" hidden>
|
|
241
|
+
<button
|
|
242
|
+
class="icon"
|
|
243
|
+
id="trainer"
|
|
244
|
+
aria-pressed="false"
|
|
245
|
+
aria-label="Speed trainer"
|
|
246
|
+
aria-describedby="trainerTip"
|
|
247
|
+
disabled
|
|
248
|
+
>
|
|
249
|
+
<svg
|
|
250
|
+
width="18"
|
|
251
|
+
height="18"
|
|
252
|
+
viewBox="0 0 20 20"
|
|
253
|
+
fill="none"
|
|
254
|
+
stroke="currentColor"
|
|
255
|
+
stroke-width="1.6"
|
|
256
|
+
stroke-linecap="round"
|
|
257
|
+
stroke-linejoin="round"
|
|
258
|
+
>
|
|
259
|
+
<path d="M3.5 14.5a6.5 6.5 0 1 1 13 0" />
|
|
260
|
+
<path d="M10 14.5l3.2-4.2" />
|
|
261
|
+
</svg>
|
|
262
|
+
<span class="tip" role="tooltip" id="trainerTip"><b>Speed trainer</b><span id="trainerHint">Slow down to 90% or less to use it</span></span>
|
|
263
|
+
</button>
|
|
264
|
+
<button
|
|
265
|
+
class="icon"
|
|
266
|
+
id="clearLoop"
|
|
267
|
+
aria-label="Clear the loop"
|
|
268
|
+
aria-describedby="clearLoopTip"
|
|
269
|
+
>
|
|
270
|
+
<svg
|
|
271
|
+
width="16"
|
|
272
|
+
height="16"
|
|
273
|
+
viewBox="0 0 20 20"
|
|
274
|
+
fill="none"
|
|
275
|
+
stroke="currentColor"
|
|
276
|
+
stroke-width="1.8"
|
|
277
|
+
stroke-linecap="round"
|
|
278
|
+
>
|
|
279
|
+
<path d="M5.5 5.5l9 9M14.5 5.5l-9 9" />
|
|
280
|
+
</svg>
|
|
281
|
+
<span class="tip" role="tooltip" id="clearLoopTip"><b>Clear the loop <kbd>L</kbd></b>Play on through the whole song</span>
|
|
282
|
+
</button>
|
|
283
|
+
</div>
|
|
284
|
+
<div id="progress"><div></div></div>
|
|
285
|
+
<div id="lyrics">
|
|
286
|
+
<div id="section"></div>
|
|
287
|
+
<div id="lines"></div>
|
|
288
|
+
</div>
|
|
289
|
+
<div id="info"></div>
|
|
290
|
+
<div id="tools" class="group" role="group" aria-label="Practice tools">
|
|
291
|
+
<button
|
|
292
|
+
class="icon"
|
|
293
|
+
id="metronome"
|
|
294
|
+
aria-pressed="false"
|
|
295
|
+
aria-label="Metronome"
|
|
296
|
+
aria-describedby="metronomeTip"
|
|
297
|
+
>
|
|
298
|
+
<svg
|
|
299
|
+
width="18"
|
|
300
|
+
height="18"
|
|
301
|
+
viewBox="0 0 20 20"
|
|
302
|
+
fill="none"
|
|
303
|
+
stroke="currentColor"
|
|
304
|
+
stroke-width="1.6"
|
|
305
|
+
stroke-linecap="round"
|
|
306
|
+
stroke-linejoin="round"
|
|
307
|
+
>
|
|
308
|
+
<path d="M7.8 3h4.4l3.3 13.5h-11z" />
|
|
309
|
+
<path d="M5.6 12.5h8.8M10 12.5l4-7" />
|
|
310
|
+
</svg>
|
|
311
|
+
<span class="tip" role="tooltip" id="metronomeTip"><b>Metronome <kbd>K</kbd></b>A click on every beat, higher on the first of each bar</span>
|
|
312
|
+
</button>
|
|
313
|
+
<button
|
|
314
|
+
class="icon"
|
|
315
|
+
id="band"
|
|
316
|
+
aria-label="Play as a band"
|
|
317
|
+
aria-describedby="bandTip"
|
|
318
|
+
disabled
|
|
319
|
+
>
|
|
320
|
+
<svg
|
|
321
|
+
width="18"
|
|
322
|
+
height="18"
|
|
323
|
+
viewBox="0 0 20 20"
|
|
324
|
+
fill="none"
|
|
325
|
+
stroke="currentColor"
|
|
326
|
+
stroke-width="1.6"
|
|
327
|
+
stroke-linecap="round"
|
|
328
|
+
stroke-linejoin="round"
|
|
329
|
+
>
|
|
330
|
+
<circle cx="7.5" cy="7" r="2.5" />
|
|
331
|
+
<path d="M3 16.5a4.5 4.5 0 0 1 9 0" />
|
|
332
|
+
<circle cx="13.8" cy="7.5" r="2" />
|
|
333
|
+
<path d="M13.5 12.2a3.8 3.8 0 0 1 4 4.3" />
|
|
334
|
+
</svg>
|
|
335
|
+
<span class="tip" role="tooltip" id="bandTip"><b>Play as a band</b>Opens every part in a window of its own, side by side, all in time. Play, pause, jump and loop from any of them; the sound comes from this window, which stays open behind them</span>
|
|
336
|
+
</button>
|
|
337
|
+
<button
|
|
338
|
+
class="icon"
|
|
339
|
+
id="tabView"
|
|
340
|
+
aria-pressed="false"
|
|
341
|
+
aria-label="2D tab view"
|
|
342
|
+
aria-describedby="tabViewTip"
|
|
343
|
+
>
|
|
344
|
+
<svg
|
|
345
|
+
width="18"
|
|
346
|
+
height="18"
|
|
347
|
+
viewBox="0 0 20 20"
|
|
348
|
+
fill="none"
|
|
349
|
+
stroke="currentColor"
|
|
350
|
+
stroke-width="1.6"
|
|
351
|
+
stroke-linecap="round"
|
|
352
|
+
>
|
|
353
|
+
<path d="M2.5 5h15M2.5 10h15M2.5 15h15" />
|
|
354
|
+
<path d="M7 3v14" stroke-width="2.2" />
|
|
355
|
+
</svg>
|
|
356
|
+
<span class="tip" role="tooltip" id="tabViewTip"><b>2D tab view <kbd>D</kbd></b>The notes as tab: fret numbers on flat strings, coming in from the right to the play line. Press again for the 3D highway</span>
|
|
357
|
+
</button>
|
|
358
|
+
<button
|
|
359
|
+
class="icon"
|
|
360
|
+
id="minimal"
|
|
361
|
+
aria-pressed="false"
|
|
362
|
+
aria-label="Minimal view"
|
|
363
|
+
aria-describedby="minimalTip"
|
|
364
|
+
>
|
|
365
|
+
<svg
|
|
366
|
+
width="18"
|
|
367
|
+
height="18"
|
|
368
|
+
viewBox="0 0 20 20"
|
|
369
|
+
fill="none"
|
|
370
|
+
stroke="currentColor"
|
|
371
|
+
stroke-width="1.6"
|
|
372
|
+
stroke-linecap="round"
|
|
373
|
+
stroke-linejoin="round"
|
|
374
|
+
>
|
|
375
|
+
<path d="M2.5 10s2.8-5 7.5-5 7.5 5 7.5 5-2.8 5-7.5 5-7.5-5-7.5-5z" />
|
|
376
|
+
<circle cx="10" cy="10" r="2.2" />
|
|
377
|
+
</svg>
|
|
378
|
+
<span class="tip" role="tooltip" id="minimalTip"><b>Minimal view <kbd>H</kbd></b>Just the highway and the lyrics: the header, phrase bars and song info make way. Press again to bring them back</span>
|
|
379
|
+
</button>
|
|
380
|
+
</div>
|
|
381
|
+
<div
|
|
382
|
+
id="settings"
|
|
383
|
+
class="sheet"
|
|
384
|
+
role="dialog"
|
|
385
|
+
aria-labelledby="settingsTitle"
|
|
386
|
+
hidden
|
|
387
|
+
>
|
|
388
|
+
<div class="sheet-head">
|
|
389
|
+
<h2 id="settingsTitle">Settings</h2>
|
|
390
|
+
<button
|
|
391
|
+
class="close"
|
|
392
|
+
id="settingsClose"
|
|
393
|
+
aria-label="Close settings"
|
|
394
|
+
>
|
|
395
|
+
<svg
|
|
396
|
+
width="16"
|
|
397
|
+
height="16"
|
|
398
|
+
viewBox="0 0 20 20"
|
|
399
|
+
fill="none"
|
|
400
|
+
stroke="currentColor"
|
|
401
|
+
stroke-width="1.8"
|
|
402
|
+
stroke-linecap="round"
|
|
403
|
+
>
|
|
404
|
+
<path d="M5 5l10 10M15 5L5 15" />
|
|
405
|
+
</svg>
|
|
406
|
+
</button>
|
|
407
|
+
</div>
|
|
408
|
+
<div class="tabs" role="tablist" aria-label="Settings sections">
|
|
409
|
+
<button
|
|
410
|
+
role="tab"
|
|
411
|
+
id="tab-view"
|
|
412
|
+
aria-controls="pane-view"
|
|
413
|
+
data-tab="view"
|
|
414
|
+
>
|
|
415
|
+
View
|
|
416
|
+
</button>
|
|
417
|
+
<button
|
|
418
|
+
role="tab"
|
|
419
|
+
id="tab-highway"
|
|
420
|
+
aria-controls="pane-highway"
|
|
421
|
+
data-tab="highway"
|
|
422
|
+
>
|
|
423
|
+
Highway
|
|
424
|
+
</button>
|
|
425
|
+
<button
|
|
426
|
+
role="tab"
|
|
427
|
+
id="tab-strings"
|
|
428
|
+
aria-controls="pane-strings"
|
|
429
|
+
data-tab="strings"
|
|
430
|
+
>
|
|
431
|
+
Strings
|
|
432
|
+
</button>
|
|
433
|
+
<button
|
|
434
|
+
role="tab"
|
|
435
|
+
id="tab-style"
|
|
436
|
+
aria-controls="pane-style"
|
|
437
|
+
data-tab="style"
|
|
438
|
+
>
|
|
439
|
+
Style
|
|
440
|
+
</button>
|
|
441
|
+
<button
|
|
442
|
+
role="tab"
|
|
443
|
+
id="tab-audio"
|
|
444
|
+
aria-controls="pane-audio"
|
|
445
|
+
data-tab="audio"
|
|
446
|
+
>
|
|
447
|
+
Audio
|
|
448
|
+
</button>
|
|
449
|
+
</div>
|
|
450
|
+
<section
|
|
451
|
+
class="pane"
|
|
452
|
+
id="pane-view"
|
|
453
|
+
role="tabpanel"
|
|
454
|
+
aria-labelledby="tab-view"
|
|
455
|
+
>
|
|
456
|
+
<h3 class="only-3d">Camera</h3>
|
|
457
|
+
<div class="pair only-3d">
|
|
458
|
+
<div class="setting">
|
|
459
|
+
<div class="setting-head">
|
|
460
|
+
<label for="viewAngle">View angle</label
|
|
461
|
+
><output id="viewAngleOut" for="viewAngle"></output>
|
|
462
|
+
</div>
|
|
463
|
+
<input
|
|
464
|
+
id="viewAngle"
|
|
465
|
+
type="range"
|
|
466
|
+
min="10"
|
|
467
|
+
max="65"
|
|
468
|
+
step="1"
|
|
469
|
+
/>
|
|
470
|
+
<div class="scale" aria-hidden="true">
|
|
471
|
+
<span>Flat</span><span>Top-down</span>
|
|
472
|
+
</div>
|
|
473
|
+
</div>
|
|
474
|
+
<div
|
|
475
|
+
class="setting"
|
|
476
|
+
title="Look at the highway from one side: it runs off that way, and the frets on that side come closer"
|
|
477
|
+
>
|
|
478
|
+
<div class="setting-head">
|
|
479
|
+
<label for="sideAngle">Side angle</label
|
|
480
|
+
><output id="sideAngleOut" for="sideAngle"></output>
|
|
481
|
+
</div>
|
|
482
|
+
<input
|
|
483
|
+
id="sideAngle"
|
|
484
|
+
type="range"
|
|
485
|
+
min="-20"
|
|
486
|
+
max="20"
|
|
487
|
+
step="1"
|
|
488
|
+
/>
|
|
489
|
+
<div class="scale" aria-hidden="true">
|
|
490
|
+
<span>Left</span><span>Right</span>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
<h3>Neck</h3>
|
|
495
|
+
<div class="pair">
|
|
496
|
+
<div
|
|
497
|
+
class="setting only-3d"
|
|
498
|
+
title="How wide each fret is on screen. The strings keep their spacing, and your hand position always stays in view"
|
|
499
|
+
>
|
|
500
|
+
<div class="setting-head">
|
|
501
|
+
<label for="fretWidth">Fret width</label
|
|
502
|
+
><output id="fretWidthOut" for="fretWidth"></output>
|
|
503
|
+
</div>
|
|
504
|
+
<input
|
|
505
|
+
id="fretWidth"
|
|
506
|
+
type="range"
|
|
507
|
+
min="0.5"
|
|
508
|
+
max="2"
|
|
509
|
+
step="0.05"
|
|
510
|
+
/>
|
|
511
|
+
<div class="scale" aria-hidden="true">
|
|
512
|
+
<span>More of the neck</span><span>Bigger frets</span>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
515
|
+
<div
|
|
516
|
+
class="setting"
|
|
517
|
+
title="How far apart the strings are. The notes grow with them, and the fret numbers stay where they are"
|
|
518
|
+
>
|
|
519
|
+
<div class="setting-head">
|
|
520
|
+
<label for="boardHeight">Fretboard height</label
|
|
521
|
+
><output
|
|
522
|
+
id="boardHeightOut"
|
|
523
|
+
for="boardHeight"
|
|
524
|
+
></output>
|
|
525
|
+
</div>
|
|
526
|
+
<input
|
|
527
|
+
id="boardHeight"
|
|
528
|
+
type="range"
|
|
529
|
+
min="0.5"
|
|
530
|
+
max="2"
|
|
531
|
+
step="0.05"
|
|
532
|
+
/>
|
|
533
|
+
<div class="scale" aria-hidden="true">
|
|
534
|
+
<span>Strings closer</span><span>Strings apart</span>
|
|
535
|
+
</div>
|
|
536
|
+
</div>
|
|
537
|
+
</div>
|
|
538
|
+
<h3>Notes</h3>
|
|
539
|
+
<div class="pair">
|
|
540
|
+
<div class="setting">
|
|
541
|
+
<div class="setting-head">
|
|
542
|
+
<label for="noteSpeed">Note speed</label
|
|
543
|
+
><output id="noteSpeedOut" for="noteSpeed"></output>
|
|
544
|
+
</div>
|
|
545
|
+
<input
|
|
546
|
+
id="noteSpeed"
|
|
547
|
+
type="range"
|
|
548
|
+
min="0.25"
|
|
549
|
+
max="2"
|
|
550
|
+
step="0.05"
|
|
551
|
+
/>
|
|
552
|
+
<div class="scale" aria-hidden="true">
|
|
553
|
+
<span>Close together</span><span>Far apart</span>
|
|
554
|
+
</div>
|
|
555
|
+
</div>
|
|
556
|
+
<div
|
|
557
|
+
class="setting only-3d"
|
|
558
|
+
title="How far down the highway notes show up. Shown as the seconds of notes in view, which faster notes also shorten"
|
|
559
|
+
>
|
|
560
|
+
<div class="setting-head">
|
|
561
|
+
<label for="drawDistance">Drawing distance</label
|
|
562
|
+
><output
|
|
563
|
+
id="drawDistanceOut"
|
|
564
|
+
for="drawDistance"
|
|
565
|
+
></output>
|
|
566
|
+
</div>
|
|
567
|
+
<input
|
|
568
|
+
id="drawDistance"
|
|
569
|
+
type="range"
|
|
570
|
+
min="0.2"
|
|
571
|
+
max="2"
|
|
572
|
+
step="0.05"
|
|
573
|
+
/>
|
|
574
|
+
<div class="scale" aria-hidden="true">
|
|
575
|
+
<span>Near</span><span>Far</span>
|
|
576
|
+
</div>
|
|
577
|
+
</div>
|
|
578
|
+
</div>
|
|
579
|
+
<button class="text-button" id="resetSettings">Reset settings</button>
|
|
580
|
+
</section>
|
|
581
|
+
<section
|
|
582
|
+
class="pane"
|
|
583
|
+
id="pane-highway"
|
|
584
|
+
role="tabpanel"
|
|
585
|
+
aria-labelledby="tab-highway"
|
|
586
|
+
hidden
|
|
587
|
+
>
|
|
588
|
+
<div
|
|
589
|
+
class="setting only-2d"
|
|
590
|
+
title="Notes scrolling in to the play line, or a page of bars that holds still while the play line moves across it"
|
|
591
|
+
>
|
|
592
|
+
<div class="setting-head">
|
|
593
|
+
<span id="tabLayoutLabel">Tab</span>
|
|
594
|
+
</div>
|
|
595
|
+
<div
|
|
596
|
+
class="seg"
|
|
597
|
+
data-setting="tabLayout"
|
|
598
|
+
role="group"
|
|
599
|
+
aria-labelledby="tabLayoutLabel"
|
|
600
|
+
></div>
|
|
601
|
+
</div>
|
|
602
|
+
<div class="setting">
|
|
603
|
+
<div class="setting-head">
|
|
604
|
+
<span id="lookLabel">Notes</span>
|
|
605
|
+
</div>
|
|
606
|
+
<div
|
|
607
|
+
class="seg"
|
|
608
|
+
data-setting="look"
|
|
609
|
+
role="group"
|
|
610
|
+
aria-labelledby="lookLabel"
|
|
611
|
+
></div>
|
|
612
|
+
</div>
|
|
613
|
+
<label class="toggle only-3d"
|
|
614
|
+
><span
|
|
615
|
+
>3D notes<small
|
|
616
|
+
>Notes a few pixels deep, lit on top</small
|
|
617
|
+
></span
|
|
618
|
+
><input id="notes3d" type="checkbox" role="switch"
|
|
619
|
+
/></label>
|
|
620
|
+
<div
|
|
621
|
+
class="setting only-3d"
|
|
622
|
+
title="The white line on the floor under each note and chord, where it's played"
|
|
623
|
+
>
|
|
624
|
+
<div class="setting-head">
|
|
625
|
+
<label for="noteLines">Note lines</label
|
|
626
|
+
><output id="noteLinesOut" for="noteLines"></output>
|
|
627
|
+
</div>
|
|
628
|
+
<input
|
|
629
|
+
id="noteLines"
|
|
630
|
+
type="range"
|
|
631
|
+
min="0"
|
|
632
|
+
max="1"
|
|
633
|
+
step="0.05"
|
|
634
|
+
/>
|
|
635
|
+
<div class="scale" aria-hidden="true">
|
|
636
|
+
<span>Hidden</span><span>Solid</span>
|
|
637
|
+
</div>
|
|
638
|
+
</div>
|
|
639
|
+
<div class="setting only-3d">
|
|
640
|
+
<div class="setting-head">
|
|
641
|
+
<span id="framesLabel">Chord frames</span>
|
|
642
|
+
</div>
|
|
643
|
+
<div
|
|
644
|
+
class="seg"
|
|
645
|
+
data-setting="frames"
|
|
646
|
+
role="group"
|
|
647
|
+
aria-labelledby="framesLabel"
|
|
648
|
+
></div>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="setting only-3d">
|
|
651
|
+
<div class="setting-head">
|
|
652
|
+
<span id="repeatMarksLabel">Repeated chords</span>
|
|
653
|
+
</div>
|
|
654
|
+
<div
|
|
655
|
+
class="seg"
|
|
656
|
+
data-setting="repeatMarks"
|
|
657
|
+
role="group"
|
|
658
|
+
aria-labelledby="repeatMarksLabel"
|
|
659
|
+
></div>
|
|
660
|
+
</div>
|
|
661
|
+
<label class="toggle only-3d"
|
|
662
|
+
><span
|
|
663
|
+
>Fret numbers<small
|
|
664
|
+
>The fret of each note, on the floor in front of it</small
|
|
665
|
+
></span
|
|
666
|
+
><input id="fretNumbers" type="checkbox" role="switch"
|
|
667
|
+
/></label>
|
|
668
|
+
<div
|
|
669
|
+
class="setting"
|
|
670
|
+
title="The mute crosses and finger numbers on the notes"
|
|
671
|
+
>
|
|
672
|
+
<div class="setting-head">
|
|
673
|
+
<span id="markingsLabel">Markings on notes</span>
|
|
674
|
+
</div>
|
|
675
|
+
<div
|
|
676
|
+
class="seg"
|
|
677
|
+
data-setting="markings"
|
|
678
|
+
role="group"
|
|
679
|
+
aria-labelledby="markingsLabel"
|
|
680
|
+
></div>
|
|
681
|
+
</div>
|
|
682
|
+
<label class="toggle"
|
|
683
|
+
><span
|
|
684
|
+
>Hand position guides<small
|
|
685
|
+
>Where your hand goes: a band down the highway, or its fret under the tab</small
|
|
686
|
+
></span
|
|
687
|
+
><input id="guides" type="checkbox" role="switch"
|
|
688
|
+
/></label>
|
|
689
|
+
</section>
|
|
690
|
+
<section
|
|
691
|
+
class="pane"
|
|
692
|
+
id="pane-strings"
|
|
693
|
+
role="tabpanel"
|
|
694
|
+
aria-labelledby="tab-strings"
|
|
695
|
+
hidden
|
|
696
|
+
>
|
|
697
|
+
<div class="setting">
|
|
698
|
+
<div class="setting-head">
|
|
699
|
+
<span id="stringOrderLabel">String order</span>
|
|
700
|
+
</div>
|
|
701
|
+
<div
|
|
702
|
+
class="cards"
|
|
703
|
+
data-setting="stringOrder"
|
|
704
|
+
role="group"
|
|
705
|
+
aria-labelledby="stringOrderLabel"
|
|
706
|
+
></div>
|
|
707
|
+
</div>
|
|
708
|
+
<div class="setting">
|
|
709
|
+
<div class="setting-head">
|
|
710
|
+
<span id="stringsLabel">String colours</span>
|
|
711
|
+
</div>
|
|
712
|
+
<div
|
|
713
|
+
class="cards"
|
|
714
|
+
data-setting="strings"
|
|
715
|
+
role="group"
|
|
716
|
+
aria-labelledby="stringsLabel"
|
|
717
|
+
></div>
|
|
718
|
+
</div>
|
|
719
|
+
</section>
|
|
720
|
+
<section
|
|
721
|
+
class="pane"
|
|
722
|
+
id="pane-style"
|
|
723
|
+
role="tabpanel"
|
|
724
|
+
aria-labelledby="tab-style"
|
|
725
|
+
hidden
|
|
726
|
+
>
|
|
727
|
+
<div class="setting">
|
|
728
|
+
<div class="setting-head">
|
|
729
|
+
<span id="colorsLabel">Colours</span>
|
|
730
|
+
</div>
|
|
731
|
+
<div
|
|
732
|
+
class="cards three"
|
|
733
|
+
data-setting="colors"
|
|
734
|
+
role="group"
|
|
735
|
+
aria-labelledby="colorsLabel"
|
|
736
|
+
></div>
|
|
737
|
+
</div>
|
|
738
|
+
<div class="setting">
|
|
739
|
+
<div class="setting-head">
|
|
740
|
+
<span id="fontsLabel">Fonts</span>
|
|
741
|
+
</div>
|
|
742
|
+
<div
|
|
743
|
+
class="seg"
|
|
744
|
+
data-setting="fonts"
|
|
745
|
+
role="group"
|
|
746
|
+
aria-labelledby="fontsLabel"
|
|
747
|
+
></div>
|
|
748
|
+
</div>
|
|
749
|
+
<div class="setting only-3d">
|
|
750
|
+
<div class="setting-head">
|
|
751
|
+
<span id="headstockLabel">Headstock</span>
|
|
752
|
+
</div>
|
|
753
|
+
<div
|
|
754
|
+
class="cards"
|
|
755
|
+
data-setting="headstock"
|
|
756
|
+
role="group"
|
|
757
|
+
aria-labelledby="headstockLabel"
|
|
758
|
+
></div>
|
|
759
|
+
</div>
|
|
760
|
+
<label class="toggle"
|
|
761
|
+
><span
|
|
762
|
+
>Song intro<small
|
|
763
|
+
>The title and "Get ready" before the first notes
|
|
764
|
+
come into view</small
|
|
765
|
+
></span
|
|
766
|
+
><input id="songIntro" type="checkbox" role="switch"
|
|
767
|
+
/></label>
|
|
768
|
+
</section>
|
|
769
|
+
<section
|
|
770
|
+
class="pane"
|
|
771
|
+
id="pane-audio"
|
|
772
|
+
role="tabpanel"
|
|
773
|
+
aria-labelledby="tab-audio"
|
|
774
|
+
hidden
|
|
775
|
+
>
|
|
776
|
+
<label class="toggle"
|
|
777
|
+
><span
|
|
778
|
+
>Autoplay<small
|
|
779
|
+
>Start playing as soon as a song has opened</small
|
|
780
|
+
></span
|
|
781
|
+
><input id="autoplay" type="checkbox" role="switch"
|
|
782
|
+
/></label>
|
|
783
|
+
<div class="setting">
|
|
784
|
+
<div class="setting-head">
|
|
785
|
+
<label for="offset">Audio delay</label
|
|
786
|
+
><output id="offsetOut" for="offset"></output>
|
|
787
|
+
</div>
|
|
788
|
+
<input
|
|
789
|
+
id="offset"
|
|
790
|
+
type="range"
|
|
791
|
+
min="-1000"
|
|
792
|
+
max="1000"
|
|
793
|
+
step="10"
|
|
794
|
+
/>
|
|
795
|
+
<div class="scale" aria-hidden="true">
|
|
796
|
+
<span>Notes earlier</span><span>Notes later</span>
|
|
797
|
+
</div>
|
|
798
|
+
<p class="hint">
|
|
799
|
+
Move it right if notes reach the strings before you hear
|
|
800
|
+
them.
|
|
801
|
+
</p>
|
|
802
|
+
</div>
|
|
803
|
+
<button class="text-button" id="resetOffset">
|
|
804
|
+
Reset delay
|
|
805
|
+
</button>
|
|
806
|
+
<label class="toggle"
|
|
807
|
+
><span
|
|
808
|
+
>Mute my part<small
|
|
809
|
+
>Guitar Pro files played by the synth: hear the
|
|
810
|
+
other tracks without yours</small
|
|
811
|
+
></span
|
|
812
|
+
><input id="mute" type="checkbox" role="switch"
|
|
813
|
+
/></label>
|
|
814
|
+
</section>
|
|
815
|
+
</div>
|
|
816
|
+
<div
|
|
817
|
+
id="legend"
|
|
818
|
+
class="sheet"
|
|
819
|
+
role="dialog"
|
|
820
|
+
aria-labelledby="legendTitle"
|
|
821
|
+
hidden
|
|
822
|
+
>
|
|
823
|
+
<div class="sheet-head">
|
|
824
|
+
<h2 id="legendTitle">Notation and shortcuts</h2>
|
|
825
|
+
<button
|
|
826
|
+
class="close"
|
|
827
|
+
id="legendClose"
|
|
828
|
+
aria-label="Close notation"
|
|
829
|
+
>
|
|
830
|
+
<svg
|
|
831
|
+
width="16"
|
|
832
|
+
height="16"
|
|
833
|
+
viewBox="0 0 20 20"
|
|
834
|
+
fill="none"
|
|
835
|
+
stroke="currentColor"
|
|
836
|
+
stroke-width="1.8"
|
|
837
|
+
stroke-linecap="round"
|
|
838
|
+
>
|
|
839
|
+
<path d="M5 5l10 10M15 5L5 15" />
|
|
840
|
+
</svg>
|
|
841
|
+
</button>
|
|
842
|
+
</div>
|
|
843
|
+
<div class="legend-find">
|
|
844
|
+
<input
|
|
845
|
+
id="legendFind"
|
|
846
|
+
type="search"
|
|
847
|
+
placeholder="Find a notation or shortcut, like bend or loop"
|
|
848
|
+
aria-label="Find a notation or shortcut"
|
|
849
|
+
/>
|
|
850
|
+
</div>
|
|
851
|
+
<div class="pane legend" id="legendList"></div>
|
|
852
|
+
</div>
|
|
853
|
+
<div id="intro" aria-hidden="true">
|
|
854
|
+
<div id="introTitle"></div>
|
|
855
|
+
<div id="introFacts"></div>
|
|
856
|
+
<div id="introState">
|
|
857
|
+
<span class="bars" id="introBars"><i></i><i></i><i></i><i></i></span>
|
|
858
|
+
<span id="introText"></span>
|
|
859
|
+
</div>
|
|
860
|
+
</div>
|
|
861
|
+
<div id="status" role="status" class="loading">
|
|
862
|
+
<span class="bars moving" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
|
|
863
|
+
<span id="statusText">Loading the player…</span>
|
|
864
|
+
</div>
|
|
865
|
+
<div id="bandNote" hidden>
|
|
866
|
+
<span>Playing as a band: every part is in a window of its own, and the sound comes from this one</span>
|
|
867
|
+
<button class="text-button" id="bandBack">Close the band windows</button>
|
|
868
|
+
</div>
|
|
869
|
+
<div id="drop" hidden>
|
|
870
|
+
Drop a Guitar Pro file, or a tab with its recording
|
|
871
|
+
</div>
|
|
872
|
+
<input
|
|
873
|
+
type="file"
|
|
874
|
+
id="file"
|
|
875
|
+
hidden
|
|
876
|
+
multiple
|
|
877
|
+
accept=".gp,.gp3,.gp4,.gp5,.gpx,.musicxml,.mxl,.xml,.mp3,.m4a,.aac,.ogg,.oga,.wav,.flac"
|
|
878
|
+
/>
|
|
879
|
+
<div id="tab"></div>
|
|
880
|
+
<script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@1.8.4/dist/alphaTab.min.js"></script>
|
|
881
|
+
<script type="module" src="player.js"></script>
|
|
882
|
+
</body>
|
|
883
|
+
</html>
|