forked from elchiapp/WebLooper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (132 loc) · 6.41 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
<html>
<head>
<title>Web Looper</title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" rel="stylesheet" href="style/main.css"/>
</head>
<body>
<h1>Web Looper</h1>
<h5>A loop recorder made entirely with the <a href="http://www.w3.org/TR/webaudio/">WebAudio API</a></h5>
<h5>Click <a href="client.html" target="_blank">here</a> to connect to a room (or share the ID below to allow others to connect to you!)</h5>
<div id="artistVideo"></div>
<div class="container">
<div class="looper-info">
<div class="label">Power</div>
<div id="powerbtn" class="btn">OFF</div>
<div class="label label-warning">Tempo</div>
<div class="leds-container">
<img class="led" id="loop-led" src="resources/ui/ledblack.png" alt="" />
<img class="led" id="beat-led" src="resources/ui/ledblack.png" alt="" />
</div>
<div id="muteLabel" class="label">Mute [M]</div>
<button id="recordBtn" class="btn">Record</button>
</div>
<div class="tracks-container">
<div class="track-container" id="track1">
<div class="track-status">
<span class="label">Track 1 [1]</span>
</div>
<input type="range" name="gain" value="100" />
</div>
<div class="track-container" id="track2">
<div class="track-status">
<span class="label">Track 2 [2]</span>
</div>
<input type="range" name="gain" value="100" />
</div>
<div class="track-container" id="track3">
<div class="track-status">
<span class="label">Track 3 [3]</span>
</div>
<input type="range" name="gain" value="100" />
</div>
<div class="track-container" id="track4">
<div class="track-status">
<span class="label">Track 4 [4]</span>
</div>
<input type="range" name="gain" value="100" />
</div>
<div class="track-container" id="track5">
<div class="track-status">
<span class="label">Track 5 [5]</span>
</div>
<input type="range" name="gain" value="100" />
</div>
</div>
<div class="filters-info">
<div class="label label-info">Filters</div>
<div id="lowpass" class="label filterLabel">Low Pass [Z]</div>
<div id="highpass" class="label filterLabel">High Pass [X]</div>
</div>
<div class="effects-info">
<div class="label label-info">Effects</div>
<div id="convolution" class="label effectLabel">Convolution [C]</div>
</div>
</div>
<div id="rtc">
<h4 class="roomid">This room's ID: </h4>
<h4 class="connections">People in the audience: <span class="number">0</span></h4>
<div class="audience"></div>
</div>
<hr/>
<h3>F.A.Q.</h3>
<input id="showfaq" type="button" value="Show"/>
<div id="faq" class="hidden">
<ul>
<li>How do I use this looper?</li>
<p>Use the keyboard! Using a keyboard is the quickest and most efficient way of using any kind of looper, regardless of its nature (hardware or software).</p>
<li>How do I record/play a track?</li>
<p>Just press the number corresponding to the track you want to record/play. The first time you press the button you will record the track, the second time you will play it.</p>
<li>How do I increase/decrease the volume?</li>
<p>Hold one of the volume keys under each record/play button (e.g. Q for track 1, W for track 2 and so on) while you scroll up or down. This will increase/decrease the volume of the related track.</p>
<li>I made a mistake! How can I reset a track or the entire looper?</li>
<p>If you want to reset a track you can just hold 0 while you press the number of the track you want to clear. If you want to reset the whole looper the best thing is to refresh the page (for now!)</p>
<li>I erased all the tracks but the led keeps blinking and the recordings are weird now</li>
<p>This bug still has to be fixed. The tempo is not reset when the last active track is cleared. As a workaround please turn the looper OFF and ON again (it will reset the tempo)</p>
</ul>
</div>
<a target="_blank" href="https://github.com/mardurhack/WebLooper"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
<script>
showfaq.onclick = function(e){
var btn = e.target;
faq.classList.toggle('hidden');
}
var labels = document.querySelectorAll('.label');
var notification = document.createElement('p');
var container = document.querySelector('.container');
notification.setAttribute('style', 'color:red');
notification.innerHTML = "Mouse interaction not available (yet). Please read the F.A.Q..";
for (var label in labels){
if (labels[label]){
labels[label].onclick = function(){
document.body.insertBefore(notification, container.nextSibling);
showfaq.click();
setTimeout(function(){
document.body.removeChild(notification);
}, 1000);
}
}
}
</script>
<script>
if (!navigator.appVersion || navigator.appVersion.indexOf("Chrome") == -1){
document.body.innerHTML = "<h4>Sorry, this application is compatible with Chrome (>= 23) only! </h4><a href=\"https://www.google.com/intl/it/chrome/browser/\">Download Chrome</a>";
}
</script>
<!-- Scripts -->
<!-- Bootstrap -->
<!-- <script src="lib/bootstrap/js/bootstrap.min.js"></script> -->
<!-- Custom -->
<script type="text/javascript">
// Normalize
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
</script>
<script src="recorder/recorder.js"></script>
<script src="http://cdn.peerjs.com/0.3/peer.min.js"></script>
<script src="UIManager.js"></script>
<script type="text/javascript" src="Track.js"></script>
<script type="text/javascript" src="Looper.js"></script>
<script type="text/javascript" src="Application.js"></script>
</body>
</html>