-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (120 loc) · 5.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Piano chords and scales</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1 class="title"><span class="title-span">Piano</span> scales & chords</h1>
</header>
<div id='board' class="board">
<div class="white key-c2"><span class="note C2">C</span></div>
<div class="black key-cs2"><span class="note Cs2">C#</span></div>
<div class="white key-d2"><span class="note D2">D</span></div>
<div class="black key-ds2"><span class="note Ds2">D#</span></div>
<div class="white key-e2"><span class="note E2">E</span></div>
<div class="white key-f2"><span class="note F2">F</span></div>
<div class="black key-fs2"><span class="note Fs2">F#</span></div>
<div class="white key-g2"><span class="note G2">G</span></div>
<div class="black key-gs2"><span class="note Gs2">G#</span></div>
<div class="white key-a2"><span class="note A2">A</span></div>
<div class="black key-as2"><span class="note As2">A#</span></div>
<div class="white key-b2"><span class="note B2">B</span></div>
<div class="white key-c3"><span class="note C3">C</span></div>
<div class="black key-cs3"><span class="note Cs3">C#</span></div>
<div class="white key-d3"><span class="note D3">D</span></div>
<div class="black key-ds3"><span class="note Ds3">D#</span></div>
<div class="white key-e3"><span class="note E3">E</span></div>
<div class="white key-f3"><span class="note F3">F</span></div>
<div class="black key-fs3"><span class="note Fs3">F#</span></div>
<div class="white key-g3"><span class="note G3">G</span></div>
<div class="black key-gs3"><span class="note Gs3">G#</span></div>
<div class="white key-a3"><span class="note A3">A</span></div>
<div class="black key-as3"><span class="note As3">A#</span></div>
<div class="white key-b3"><span class="note B">B</span></div>
</div>
<form action="" class="form">
<section class="root-section">
<label>Root:</label>
<select name="Root" id="root">
<option value="C">C</option>
<option value="Cs">C#</option>
<option value="D">D</option>
<option value="Ds">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="Fs">F#</option>
<option value="G">G</option>
<option value="Gs">G#</option>
<option value="A">A</option>
<option value="As">A#</option>
<option value="B">B</option>
</select>
</section>
<section class="scale-section">
<label class="scale-label">Scale:</label>
<select name="scale" id="scale">
<option value="221222">Major</option>
<option value="212212">Natural Minor</option>
<option value="212212">Harmonic Minor</option>
<option value="212222">Melodic Minor</option>
<optgroup label="-Pentatonic-">
<option value="2322">Pentatonic Major</option>
<option value="3223">Pentatonic Minor</option>
<option value="32113">Pentatonic Blues</option>
<option value="2323">Pentatonic Neutral</option>
</optgroup>
<optgroup label="--Exotic--">
<option value="221221">Mixolydian</option>
<option value="2121211">Diminished</option>
<option value="222121">Lydian Dominant</option>
<option value="221212">Aeolian Dominant (Hindu)</option>
<optgroup label="-Chinese-">
<option value="4214">Chinese</option>
<option value="131131">Oriental</option>
</optgroup>
<optgroup label="-Arabic-">
<option value="221122">Arabic</option>
<option value="213121">Maqams</option>
<option value="121211">Byzantine</option>
<option value="131123">Persian</option>
<option value="2323">Egyptian</option>
</optgroup>
<optgroup label="-Japanese-">
<option value="2141">Hirajoshi</option>
<option value="14212">Insen</option>
<option value="1414">Iwato</option>
<option value="2322">Yo</option>
</optgroup>
<optgroup label="-European-">
<option value="2121112">Algerian</option>
<option value="22231">Prometheus</option>
<option value="122213">Neapolitan </option>
<option value="131212">Spanish Gypsy</option>
<option value="213113">Hungarian Gypsy</option>
<option value="213121">Romanian Minor</option>
</optgroup>
</optgroup>
</select>
</section>
<section class="chord-section">
<label class="chord-label inactive">Chord:</label>
<select class="inactive" name="Root" id="chord">
<option value="43">Major</option>
<option value="34">Minor</option>
<option value="433">Seventh</option>
<option value="44">Augmented</option>
<option value="36">Diminished</option>
</select>
</section>
<button type="button" class="play-btn">Play</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.60/Tone.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
"></script>
<script src="app.js"></script>
</body>
</html>