-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (111 loc) · 5.84 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
<!DOCTYPE html>
<html ng-app="hamrSJ">
<head>
<title>Sawaal Jawaab</title>
<link rel="stylesheet" type="text/css" href="static/thirdparty/css/bootstrap.min.css">
<script type="text/javascript" src="static/thirdparty/src/angular.min.js"></script>
<script type="text/javascript" src="static/bower_components/recorderjs/recorder.js"></script>
<script src="static/thirdparty/src/jquery.min.js"></script>
<style>
img{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
div {
display: inline-block;
white-space: nowrap;
}
.img1,.img2{
width:50%;
}
</style>
</head>
<body onload="init()" ng-controller="SJController as sj">
<div style='float: right;'>
<img src=images/hamr-ismir-logo.png height="60" width="120">
</div>
<p style="font-size:20px">
{{sj.appName}} - A machine improvisation system for vocals and tabla
</p>
<div style='float: right;'>
<img src=images/CompMusicLogo.png height="80" width="80">
</div>
<p style="font-size:14px">
Ajay Srinivasamurthy, Swapnil Gupta, Sankalp Gulati, Kaustuv Kanti Ganguli <br> <b>Music Technology Group, UPF, Barcelona</b>
</p>
<br></br>
<p style="font-size:13px">
During Hindustani music concerts, it is common to have a call-response improvisatory passages between musicians, called a <b>sawaal-jawaab</b> (literally, question-answer). Such an improvisation is done within the framework of a specific taal, the rhythmic framework of Hindustani music. Here is such an improvisation system - with the call being the vocal recitation of tabla syllables (bols) and the response is an automatically generated tabla composition. The response is generated as an improvisation of the call using timing, rhythmic and timbral features from the call, exploiting the onomatopeioc nature of the tabla bols.
</p>
<p style="font-size:13px">
<b> Instructions</b>
</p>
<ol style="font-size:12px">
<li>Works best on Google Chrome and Firefox. When the page asks for microphone permissions, select "Allow" on Chrome and "Always share" on Firefox, and then reload the page again. </li>
<li> Use the tempo slider to set a tempo. Select the taal (metrical cycle) from the dropdown. </li>
<li> The metronome audio clicks mark the vibhaag (sections) of the cycle. The sam (downbeat) has a different click. The sam is shown with the red dot, with the beats blinking in green.</li>
<li>Click and hold down the record button, the system starts recording from the next sam to record your sawaal</li>
<li>Release the record button and wait for the response. The response is also aligned with the sam and starts on the next cycle. </li>
<li>Repeat as many times you want, improvise with the system!</li>
</ol>
<hr>
<div ng-controller="TempoController as tempo">
<label for="tempoControl">Choose Tempo:</label>
<input type="range" id="tempoControl" min="120" max="250" value="180" onchange="onTempoChange()">
<span id="tempoView"></span> <p id="tempoValDisp"> 180 beats(matras) per minute</p>
</div>
<br></br>
<b><p > Select Taal: </p></b>
<div>
<select id="taal" onchange="onTaalChange()">
<option selected value="teen">Teental (16 beats)</option>
<option value="ek">Ektaal (12 beats) </option>
<option value="jhap">Jhaptaal (10 beats)</option>
<option value="rupak">Rupak taal (7 beats)</option>
</select>
</div>
<br></br>
<br></br>
<hr>
<b><p> Taal cue: </p></b>
<div style="max-width: 900px" align="center">
<div class="img1" style="height: auto; border:1px red solid">
<img id="samaImage" src=./images/reddot.png>
</div>
<div class="img2" style="height: auto; border:1px green solid" >
<img id="beatImage" src=./images/greendot.png >
</div>
<p>Sama Beat</p>
</div>
<br></br>
<div>
<button onclick="startMetronome()">Start Metronome</button>
<button onclick="stopMetronome()">Stop Metronome</button>
<span> Vol: </span>
<div>
<input type="range" id="metVol" min="0" max="100" value="80" onchange="onMetVolChange()">
</div>
</div>
<br></br>
<div ng-controller="RecordController as rec">
<button id="recordButton" ng-mousedown="rec.startRecording()" ng-mouseup="rec.stopRecording()" ng-class="{'btn-danger': rec.isRecording(), btn: true}" disabled>
<b>Click and hold to Record!</b>
</button>
<b><span id="recordingInfo" style="font-size:14px"> Loading data ... Please wait!!</span></b>
</div>
<br></br>
<!--
<button onclick="buildTheka()">Build Response</button>
-->
<button onclick="stopPlayingButton()">Stop Playing</button>
<button onclick="playThekaButton()">Play Response Again</button>
<br> </br>
<p>Additional description can be found at <a href="http://labrosa.ee.columbia.edu/hamr_ismir2015/proceedings/doku.php?id=sawaal-jawaab"> HAMR 2015 wiki</a>
<br>Code can be found <a href="https://github.com/ajaysmurthy/sawaaljawaab">here</a> </p>
<!-- Loading the scripts -->
<script type="text/javascript" src="static/app.js"></script>
<script type="text/javascript" src="static/utils.js"></script>
<script type="text/javascript" src="static/audioGenerate.js"></script>
</body>
</html>