-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
223 lines (217 loc) · 8.54 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.23.1"></script>
<link rel="stylesheet" href="style.css">
<title>Harmonize Alone</title>
</head>
<body>
<div class="box-top">
<div class="title">
<a class="home-link" href="index.html">
<h1>
Harmonize Alone
<br>
<span class="subtitle">~おうちでハーモニー練習~</span>
</h1>
</a>
</div>
<!--53~65までをランダムにとってくる-->
<div class="box" id="selectSection">
<h2 class="box-title">step1. コードを選ぶ</h2>
<p>練習したいコードを選んでください</p>
<div class="button-list-wrapper" id="Beginner">
<h3 class="section-title">初心者向け</h3>
<div class="button-list">
<a class="btn beginner" onclick="ready('5step');">
初めての人向け
<br>
<span>まずは完全5度の音を出してみよう</span>
</a>
<a class="btn" onclick="ready('Major');">
メジャー
<br>
<span>M</span>
</a>
<a class="btn" onclick="ready('Minor');">
マイナー
<br>
<span>m</span>
</a>
</div>
</div>
<div class="button-list-wrapper" id="Intermediate">
<h3 class="section-title">中級者向け</h3>
<div class="button-list">
<a class="btn" onclick="ready('7th');">
セブンス
<br>
<span>7</span>
</a>
<a class="btn" onclick="ready('Major 7th');">
メジャー・セブンス
<br>
<span>M7</span>
</a>
<a class="btn" onclick="ready('Minor 7th');">
マイナー・セブンス
<br>
<span>m7</span>
</a>
<a class="btn" onclick="ready('Minor Major 7th');">
マイナー・メジャー・セブンス
<br>
<span>mM7</span>
</a>
</div>
</div>
<div class="button-list-wrapper" id="Advanced">
<h3 class="section-title">上級者向け</h3>
<div class="button-list">
<a class="btn" onclick="ready('sus4')">
Suspended 4th
<br>
<span>sus4</span>
</a>
<a class="btn" onclick="ready('aug')">
Augument
<br>
<span>aug</span>
</a>
</div>
<a class="btn" onclick="ready('add9')">
Add9th
<br>
<span>add9</span>
</a>
</div>
</div>
<div class="box" id="startSection" hidden>
<h2 class="box-title">step2. ハーモニーの音を聞いて音を出してみる</h2>
<p>自分の選んだコードに応じて音を出してみましょう</p>
<div id="5step" hidden>
<div class="column">
<h3 class="section-title">完全5度とは?</h3>
<p>全音3つ分と半音1つ（計：半音7つ）分の音の間隔のことです。多くのコードにルートの音と完全5度の音が使われています。</p>
<p>参考：<a href="https://yurupiano.com/perfect5th/">【音程】図解でわかる！5度音程｜完全5度を解説</a></p>
</div>
<div class="column">
<h3 class="section-title">完全5度の音の感覚に慣れる</h3>
<p>下のボタンを押すと、完全5度の音の練習ができるメロディーが流れます。</p>
<p>「ド、ソ、ド」、「ド#、ソ#、ド#」...と順にキーが上がっていくので、音に合わせて練習してみましょう。</p>
<div class="button-list">
<a id="playStep5Button" class="btn" onclick="step5();">再生</a>
</div>
</div>
<div class="column">
<h3 class="section-title">完全5度の音を出してみよう</h3>
<p>ルートの音（ド）が鳴るので、完全5度の音（ソ）を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div id="Major" hidden>
<div class="column">
<h3 class="section-title">メジャー</h3>
<p>メジャーコードのルートの音（ド）と完全5度の音（ソ）が鳴るので、長3度の音（ミ）の音を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div id="Minor" hidden>
<div class="column">
<h3 class="section-title">マイナー</h3>
<p>マイナーコードのルートの音（ド）と完全5度の音（ソ）が鳴るので、短3度の音（ミ♭）の音を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div id="7th" hidden>
<div class="column">
<h3 class="section-title">セブンス</h3>
<p>セブンスコードのルートの音（ド）と完全5度の音（ソ）、長3度の音（ミ）が鳴るので、短7度の音（シ♭）を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div id="Major 7th" hidden>
<div class="column">
<h3 class="section-title">メジャー・セブンス</h3>
<p>メジャー・セブンスコードのルートの音（ド）と完全5度の音（ソ）、長3度の音（ミ）が鳴るので、長7度の音（シ）を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div id="Minor 7th" hidden>
<div class="column">
<h3 class="section-title">マイナー・セブンス</h3>
<p>マイナー・セブンスコードのルートの音（ド）と完全5度の音（ソ）、短3度の音（ミ♭）が鳴るので、短7度の音（シ♭）を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div id="Minor Major 7th" hidden>
<div class="column">
<h3 class="section-title">マイナー・メジャー・セブンス</h3>
<p>マイナー・メジャー・セブンスコードのルートの音（ド）と完全5度の音（ソ）、短3度の音（ミ♭）が鳴るので、長7度の音（シ）を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div id="sus4" hidden>
<div class="column">
<h3 class="section-title">sus4</h3>
<p>ルートの音（ド）と完全5度の音（ソ）が鳴るので、4度の音（ファ）を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div id="aug" hidden>
<div class="column">
<h3 class="section-title">aug</h3>
<p>ルートの音（ド）と増5度の音（ソ#）が鳴るので、長3度の音（ミ）を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div id="add9" hidden>
<div class="column">
<h3 class="section-title">add9</h3>
<p>ルートの音（ド）と長3度の音（ミ）完全5度の音（ソ）が鳴るので、そのさらに上の長2度の音（レ）を出してみましょう</p>
</div>
<!--<p>※イヤホン推奨です</p>-->
</div>
<div class="button-list">
<a class="btn" id="startButton" onclick="harmony();">スタート！</a>
<a class="btn disabled" id="goToLastStep" onclick="checkAnswer()">
次へ
<br>
<span id="caution"></span>
</a>
</div>
</div>
<div class="box" id="checkAnswerSection" hidden>
<!--<canvas id="canvas"></canvas>
<svg id="svg"></svg>-->
<h2 class="box-title">step3. 正解の音を確認</h2>
<p>正解のコードを再生して、正しい音が出せていたか確認しましょう</p>
<div class="button-list">
<a id="playAllNoteButton" class="btn" onclick="answer()">コード全ての音を再生</a>
<a id="playSingleNoteButton" class="btn" onclick="answerSingle()">正解の音だけを確認</a>
</div>
<!--<canvas id="canvas_a" width="400" height="300"></canvas>-->
<div class="canvas_a_container">
<div id="canvas_a"></div>
</div>
<!--<button onclick="playHarmonyAndRec()">録音した音とハーモニーを一緒に再生</button>-->
</div>
<footer>
<div class="footer title">
<a class="home-link" href="index.html">
<h3>
<img class="logo" src="favicon.ico" alt="logo">
Harmonize Alone
<span>~おうちでハーモニー練習~</span>
</h3>
</a>
<div class="footer-describe">
<p>Built with <a href="https://magenta.tensorflow.org">magenta.js</a>.</p>
<p>You can browse source code <a href="https://github.com/L40S38/harmony_practice_app">here</a>.</p>
</div>
</div>
</footer>
</div>
<script src="chordDataset.js"></script>
<script src="app.js"></script>
</body>