-
Notifications
You must be signed in to change notification settings - Fork 0
/
tihai_timer.html
137 lines (112 loc) · 7.44 KB
/
tihai_timer.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>
<head>
<title>Tihai with a metronome </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
@media print {
p {page-break-after: always;}
}
table, th, td {
border: 1px solid black;
}
.mark {background-color: pink;}
.tihai1 {background-color: yellow;}
.tihai2 {background-color: orange;}
.wrapper {
max-width: 1000px;
margin: 0 20px;
display: grid;
grid-gap: 10px;
font-size: 25px;
}
</style>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
<script src=timer.js></script>
</head>
<body>
<div class="wrapper">
<h1> Tihai with a metronome </h1>
<p>Practice playing this on your tabla with various speeds
before you move on to the next table. Synchronize your beats
with the tabla. For the pauses, just tap your index finger
lightly on the bayan.
</p>
<div>
<button type="button" class="btn btn-success" onclick="startTihai(0)">Start Tihai</button>
<label class="btn btn-secondary active" for="bpm0">Bpm:</label>
<input type="number" id="bpm0" name="bmp0" min="10" max="500" value="100">
<label class="btn btn-secondary active" for="repeat0">Repeat:</label>
<input type="number" id="repeat0" name="repeat" min="1" max="500" value="1">
<button type="button" class="btn btn-danger" onclick="stopTihai();">Stop Tihai</button>
</div>
<table class="table-warning" id="table0"><tbody><tr><td>dhaa </td><td>- </td><td>dhaa </td><td>- </td><td>ta </td><td>dhaa </td><td>- </td></tr><tr></tr>
<tr><td>dhaa </td><td>- </td><td>dhaa </td><td>- </td><td>ta </td><td>dhaa </td><td>- </td></tr><tr></tr>
<tr><td>dhaa </td><td>- </td><td>dhaa </td><td>- </td><td>ta </td><td>dhaa </td><td>- </td></tr><tr></tr>
</tbody></table>
<p>Practice this before moving on to next table</p>
<div>
<button type="button" class="btn btn-success" onclick="startTihai(1)">Start Tihai</button>
<label class="btn btn-secondary active" for="bpm1">Bpm:</label>
<input type="number" id="bpm1" name="bmp1" min="10" max="500" value="100">
<label class="btn btn-secondary active" for="repeat1">Repeat:</label>
<input type="number" id="repeat1" name="repeat" min="1" max="500" value="1">
<button type="button" class="btn btn-danger" onclick="stopTihai();">Stop Tihai</button>
</div>
<table id=table1 class="table-success"><tbody>
<tr><td>dhaa </td><td>- </td><td>dhaa </td><td>ge </td><td>naa </td><td>dhaa </td></tr>
<tr><td>- </td><td>dhaa </td><td>ti </td><td>dhaa </td><td>ge </td><td>dhin </td><td>naa </td><td>ge </td><td>naa </td><td>dhaa </td></tr><tr></tr>
<tr><td>- </td><td>dhaa </td><td>- </td><td>dhaa </td><td>- </td><td>ta </td><td>dhaa </td></tr>
<tr><td>- </td><td>dhaa </td><td>- </td><td>dhaa </td><td>- </td><td>ta </td><td>dhaa </td></tr>
<tr><td>- </td><td>dhaa </td><td>- </td><td>dhaa </td><td>- </td><td>ta </td><td>dhaa </td><td>- </td></tr>
</tbody></table>
<hr></hr> <p>The same thing now two beats at a time. Again practice
this on your tabla with various speeds before moving on.</p>
<div>
<button type="button" class="btn btn-success" onclick="startTihai(2)">Start Tihai</button>
<label class="btn btn-secondary active" for="bpm2">Bpm:</label>
<input type="number" id="bpm2" name="bmp2" min="10" max="500" value="60">
<label class="btn btn-secondary active" for="repeat2">Repeat:</label>
<input type="number" id="repeat2" name="repeat" min="1" max="500" value="1">
<button type="button" class="btn btn-danger" onclick="stopTihai();">Stop Tihai</button>
</div>
<table class="table-info" id="table2">
<tbody><tr><td>dhaa - </td><td>dhaa ge </td><td>naa dhaa </td></tr>
<tr><td>- dhaa </td><td>ti dhaa </td><td>ge dhin </td><td>naa ge </td><td>naa dhaa </td></tr>
<tr><td>- dhaa </td><td>- dhaa </td><td>- ta </td></tr>
<tr><td>dhaa - </td><td>dhaa - </td><td>dhaa - </td><td>ta dhaa </td></tr>
<tr><td>- dhaa </td><td>- dhaa </td><td>- ta </td><td>dhaa - </td></tr>
</tbody></table>
<hr></hr>
<p>The same thing now four beats at a time. This is just one
iteration. Practice this till you are completely
comfortable, before moving on to doing the three iterations
all together. </p>
<div>
<button type="button" class="btn btn-success" onclick="startTihai(3)">Start Tihai</button>
<label class="btn btn-secondary active" for="bpm3">Bpm:</label>
<label class="btn btn-secondary active" for="repeat3">Repeat:</label>
<input type="number" id="repeat3" name="repeat" min="1" max="500" value="1">
<input type="number" id="bpm3" name="bmp3" min="10" max="500" value="40">
<button type="button" class="btn btn-danger" onclick="stopTihai();">Stop Tihai</button>
</div>
<table class="table-warning" id="table3">
<tbody><tr><td>dhaa - dhaa ge </td><td>naa dhaa - dhaa </td><td>ti dhaa ge dhin </td><td>naa ge naa dhaa </td><td>- dhaa - dhaa </td><td>- ta dhaa - </td><td>dhaa - dhaa - </td></tr><tr><td>ta dhaa - dhaa </td><td>- dhaa - ta </td><td>dhaa - </td></tr>
</tbody></table>
<hr></hr>
Adding two more instances of this to get the full tihai:
<div>
<button type="button" class="btn btn-success" onclick="startTihai(4)">Start Tihai</button>
<label class="btn btn-secondary active" for="bpm4">Bpm:</label>
<input type="number" id="bpm4" name="bmp4" min="10" max="500" value="40">
<label class="btn btn-secondary active" for="repeat4">Repeat:</label>
<input type="number" id="repeat4" name="repeat" min="1" max="500" value="1">
<button type="button" class="btn btn-danger" onclick="stopTihai();">Stop Tihai</button>
</div>
<table class="table-info" id="table4"><tbody><tr><td>dhaa - dhaa ge </td><td>naa dhaa - dhaa </td><td>ti dhaa ge dhin </td><td>naa ge naa dhaa </td><td>- dhaa - dhaa </td><td>- ta dhaa - </td><td>dhaa - dhaa - </td></tr><tr><td>ta dhaa - dhaa </td><td>- dhaa - ta </td><td>dhaa - <span class="tihai1">dhaa - </span></td><td> <span class="tihai1">dhaa ge naa dhaa </span></td><td> <span class="tihai1">- dhaa ti dhaa </span></td><td> <span class="tihai1">ge dhin naa ge </span></td><td> <span class="tihai1">naa dhaa - dhaa </span></td></tr><tr><td> <span class="tihai1">- dhaa - ta </span></td><td> <span class="tihai1">dhaa - dhaa - </span></td><td> <span class="tihai1">dhaa - ta dhaa </span></td><td> <span class="tihai1">- dhaa - dhaa </span></td><td> <span class="tihai1">- ta dhaa - </span></td><td> <span class="tihai1"><span class="tihai2">dhaa - dhaa ge </span></span></td><td> <span class="tihai2">naa dhaa - dhaa </span></td></tr><tr><td> <span class="tihai2">ti dhaa ge dhin </span></td><td> <span class="tihai2">naa ge naa dhaa </span></td><td> <span class="tihai2">- dhaa - dhaa </span></td><td> <span class="tihai2">- ta dhaa - </span></td><td> <span class="tihai2">dhaa - dhaa - </span></td><td> <span class="tihai2">ta dhaa - dhaa </span></td><td> <span class="tihai2">- dhaa - ta </span></td></tr><tr><td> <span class="tihai2">dhaa - </span></td></tr></tbody></table>
</div>
</body>
</html>