forked from 1j01/guitar
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (137 loc) · 5.11 KB
/
index.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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Guitar Recorder</title>
<style>
html, body {
padding: 0;
margin: 3px;
font-family: sans-serif;
}
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.tablature-editor {
width: 100%;
height: 200px;
border: rgba(0, 0, 0, 0.4) solid 1px;
box-sizing: border-box;
}
.tablature-editor.ace_focus {
box-shadow: 0 0 2px #0080FF;
}
.playback-position,
.playing-note {
border-radius: 0 !important;
position: absolute;
z-index: 5;
}
.playback-position {
box-shadow: inset -4px 0 0 0 rgba(228, 0, 255, 0.2), inset -2px 0 0 0 rgba(228, 0, 255, 0.5);
}
.playing-note {
background: rgba(0, 255, 255, 0.5);
}
.error {
background: #E9311E;
color: rgb(255, 255, 255);
padding: 0.2em;
}
footer {
margin-top: 1em;
padding: 1em 0;
}
</style>
<script src="lib/jquery.min.js"></script>
<script src="lib/PEP.min.js"></script>
<script src="lib/webaudioshim.js"></script>
<script src="lib/tuna.js"></script>
<script src="lib/teoria.js"></script>
<script src="lib/coffee-script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
</head>
<body>
<h1>Guitar Recorder</h1>
<div class="header">
<h2>Interactive Fretboard</h2>
<div class="controls">
<label>Theme: <select class="theme"></select></label>
<label>Scale:
<select id="scale">
<option value="" selected>None (Highlight Off)</option>
<option value="harmonicchromatic">Harmonic Chromatic</option>
<option value="major">Ionian (Major)</option>
<option value="minor">Aeolian (Minor)</option>
<option value="dorian">Dorian</option>
<option value="phrygian">Phrygian</option>
<option value="lydian">Lydian</option>
<option value="mixolydian">Mixolydian</option>
<option value="locrian">Locrian</option>
<option value="majorpentatonic">Major Pentatonic</option>
<option value="minorpentatonic">Minor Pentatonic</option>
<option value="blues">Blues</option>
<option value="doubleharmonic">Double Harmonic (Flamenco)</option>
<option value="harmonicminor">Harmonic Minor</option>
<option value="melodicminor">Melodic Minor</option>
<option value="wholetone">Whole Tone</option>
</select>
</label>
<label> on <select id="scale-start">
<option value="C" selected>C</option>
<option value="C#">C♯</option>
<option value="D">D</option>
<option value="D#">D♯</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F♯</option>
<option value="G">G</option>
<option value="G#">G♯</option>
<option value="A">A</option>
<option value="A#">A♯</option>
<option value="B">B</option>
</select></label>
<!-- <label><input id="disable-keys-outside-scale" type="checkbox">Disable playing outside scale / Constrain to scale</label> -->
<!-- TODO: add the above option and maybe an option to toggle note names, because they can be noisey -->
</div>
</div>
<div class="fretboard-area area"></div>
<div class="header">
<h2>Tablature Editor</h2>
<div class="controls">
<!-- TODO: probably a button like Load Tabs or Load Song that prompts you with instuctions -->
<!-- there's not really enough room in one line of text to explain that you can simply copy the webpage contents with Ctrl+A Ctrl+C -->
<!-- could also integrate some services/searching into the app directly -->
<span>Search the web for any song and paste the tabs here.</span>
<!-- TODO: toggle button for insert/overwrite (INS/OVR? nah, not unless we run out of space) and one for the auto multiline selection -->
<label>Or load a preset:
<select id="tablature-presets">
<option value="" selected>Choose Song</option>
<option value="tabs/tetris.txt">Tetris (fancy version!)</option>
<option value="tabs/ievan polkka.txt">Ievan Polkka</option>
<option value="tabs/still alive.txt">Still Alive (Portal)</option>
<option value="tabs/my song.txt">My Song (Isaiah Odhner)</option>
</select>
</label>
</div>
</div>
<div class="tablature-area area">
<div class="tablature-error error" role="alert" aria-hidden="true" style="display: none"></div>
<div class="tablature-editor"></div>
</div>
<footer>
Usage info, source code, and to-do list <a href="https://github.com/1j01/guitar">on GitHub</a>.
Made by <a href="https://isaiahodhner.ml">Isaiah Odhner</a>.
</footer>
<script src="src/helpers.coffee" type="text/coffeescript"></script>
<script src="src/audio-setup.coffee" type="text/coffeescript"></script>
<script src="src/tablature.coffee" type="text/coffeescript"></script>
<script src="src/TablatureEditor.coffee" type="text/coffeescript"></script>
<script src="src/GuitarString.coffee" type="text/coffeescript"></script>
<script src="src/Fretboard.coffee" type="text/coffeescript"></script>
<script src="src/app.coffee" type="text/coffeescript"></script>
</body>
</html>