-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
206 lines (163 loc) · 8.72 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="//beotiger.com/inc/css/_main.css?v=2" type="text/css">
<link rel="stylesheet" href="//beotiger.com/inc/css/justmicrec.css?v=2" type="text/css">
<!-- Note: jquery is needed just for demonstration script -->
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="js/justmicrec_lib.js"></script>
<script src="js/justmicrec.js"></script>
<title>JustRec - HTML5 Javascript Recording Software</title>
</head>
<body>
<div id="main" style="width: 75%; margin: 40px auto">
<h1>JustMicRec: HTML5 JavaScript Microphone [-MP3-] Recording for You</h1>
<nav id="jc-nav">
<ul>
<li><a href="#dts">Demo</a></li>
<li> </li>
<li><a href="#cmd">Commands</a></li>
<li><a href="#opt">Options</a></li>
<li><a href="#callbacks">Callbacks</a></li>
<li> </li>
<li><a href="#spt">Notes</a></li>
</ul>
</nav>
<h2 id="dts"><i class="fa"></i>Demo and test</h2>
<div>In this section you can try JustMicRec and see how it works.</div>
<p>
<strong>Note 1</strong>: you can pause, preview and resume recording before sending it to server<!-- or converting it to MP3. Send MP3 data to server only after converting.<br> -->
<br>
<strong>Note 2</strong>: <em>your recordings here are in a public domain and will be live for at least 1 day.</em>
</p>
<div id="myflashrec">
<h3>justMicRec: Welcome!</h3>
<div id="rec-ctrl">
<strong>maxTime</strong>:
<select id="maxtime" title="Select maximum time for recording">
<option value="15">15 sec</option>
<option value="30">30 sec</option>
<option value="60" selected>1 min</option>
<option value="120">2 min</option>
<option value="180">3 min</option>
<option value="300">5 min</option>
<option value="600">10 min</option>
</select>
<strong>Time left</strong>: <span id="time">00:00</span>
<input type="hidden" id="recn" value="%%RECN%%">
</div>
<br>
<div>
<strong>Microphone level</strong>: <span id="level"></span>
</div>
<div>
<div id="levelbase">
<canvas id="levelbar"></canvas>
</div>
<div id="levelbase2">
<div id="levelbar2"></div>
</div>
</div>
<hr>
<div>
<input type="button" id="start" value="Start">
<input disabled type="button" id="stop" value="Stop/Pause">
<input disabled type="button" id="resume" value="Resume">
<input disabled type="button" id="preview" value="Preview">
<input disabled type="button" id="stoppreview" value="Stop preview">
<br><br>
<input type="button" id="sendwav" value="Send WAV to server">
<!--
<input type="button" id="convert" value="Convert to MP3">
<input type="button" id="sendmp3" value="Send MP3 to server">
-->
<br>
</div>
<hr>
<div>
<table class="tabnobord">
<tr>
<th colspan="2">Your WAV recording (size <span id="wavsize">0</span> bytes<!-- , length: <span id="wavlength">0</span> seconds -->)</th>
</tr>
<tr>
<td id="wavaudi"> </td><td id="wavaudid"> </td>
</tr>
<!--
<tr><th>Your MP3 recording on server (Size <span id="mp3size">0</span> bytes):</th><td id="mp3audi"> </td><td id="mp3audid"> </td></tr>
-->
</table>
</div>
<hr>
<h3>Events Log <button onclick="$('#log').val('')">Clear log</button></h3>
<div>
<textarea id="log" cols="50" rows="8"></textarea>
</div>
</div>
<h2 id="cmd"><i class="fa"></i> Commands</h2>
<table class="jc-opts">
<tr><th>Commands & Queries</th><th>Description</th></tr>
<tr><th>justMicRec.configure({<br>option: value,<br>option: value<br>...<br> })</th><td>Reconfigure JustMicRec for your needs. As a rule you should define path to your actual server-side script for uploading WAV files in <b>hostPath</b> parameter here.</td></tr>
<tr><th>justMicRec.start([maxTime])</th><td>Start recording.<br>
<strong>maxTime</strong> is optional parameter that defines maximum length of recording in seconds, it defaults to 60 seconds (1 minute) if not set. Throws <em>recordingActivity</em> callback during recording process.</td></tr>
<tr><th>justMicRec.stop()</th><td>Stop/pause recording. Throws <em>recordingStopped</em> callback when recording is actually ready for further usage, such as previewing or uploading to server.</td></tr>
<tr><th>justMicRec.resume()</th><td>Resume recording.</td></tr>
<tr><th>justMicRec.preview()</th><td>Start previewing recording.</td></tr>
<tr><th>justMicRec.stoppreview()</th><td>Stop previewing spawned by <b>justMicRec.preview()</b> command.</td></tr>
<tr><th>justMicRec.sendWAV()</th><td>Send raw WAV recording to server. Must be runned after <em>recordingStopped</em> event. Throws <em>WAVsendingFinished</em> callback when sending succeeds.</td></tr>
<tr><th>justMicRec.UAhasUserMedia()</th><td>Find out if current user agent (UA) supports MediaStream interfaces.</td></tr>
<tr><th>justMicRec.getWAVsize()</th><td>Get the size of recorded WAV blob (in bytes).</td></tr>
<!-- <tr><th>justMicRec.getWAVlength()</th><td>Get the length of recorded WAV blob (in seconds).</td></tr> -->
<!--
<tr><th>justMicRec.convert2MP3()</th><td>Begin converting the recording from WAV to MP3 format. Throws <em>MP3converted</em> callback when converting succeeds.</td></tr>
<tr><th>justMicRec.sendMP3()</th><td>Send MP3 recording to server. Must be runned after <b>justMicRec.convert2MP3()</b> command. Throws <em>MP3sendingFinished</em> callback when sending succeeds.</td></tr>
-->
</table>
<br>
<h2 id="opt"><i class="fa"></i> Options</h2>
<table class="jc-opts">
<tr><th>Property</th><th>Default</th><th>Description</th></tr>
<tr><th>hostPath</th><td> 'micrecajax.php'</td><td>Pathname for a server side script for uploading recordings</td></tr>
<tr><th>workerPath</th><td> 'js/justmicrecworker.js'</td><td>Pathname to recording worker script</td></tr>
<tr><th colspan="3">Callback functions</th></tr>
<tr><th>recordingError </th><td> function(e) { alert(e) }</td><td>Spawns when something goes wrong with recording process</td></tr>
<tr><th>recordingActivity</th><td> function(analyserNode, seconds) {}</td><td>Spawns during recording process about one tenth of second. <b>seconds</b> is time of recording left in seconds and <b>analyserNode</b> is a reference to an audio recorder audio node for visualizing microphone level.</td></tr>
<tr><th>recordingStopped</th><td> function(){}</td><td>Spawns when recording interrupts either by timer or by <em>justrec.stop()</em> command and when recording is ready for further manipulations such as previewing or uploading to server</td></tr>
<tr><th>uploadingProcess</th><td> function(current, total) {}</td><td>Spawns during uploading process.</td></tr>
<tr><th>WAVsendingFinished</th><td> function(){}</td><td>Spawns when WAV file fully transferred to the server by server-side script</td></tr>
</table>
<br>
<h2 id="callbacks"><i class="fa"></i> Callbacks</h2>
<table class="jc-opts">
<tr><th>Callback</th><th>Description</th></tr>
<tr><th>recordingError(e)</th><td>Throws when some error occured. Parameter <b>e</b> is a string describing this error.</td></tr>
<tr><th>recordingActivity(analyserNode, seconds)</th><td>Throws during recording process. Parameters are: <b>analyserNode</b> - reference to audio node of mic level, <b>seconds</b> - seconds left for recording.</td></tr>
<tr><th>recordingStopped</th><td>Throws when recording is being stopped and is ready for further usage - for previewing or uploading to server.</td></tr>
<tr><th>WAVsendingFinished</th><td>Throws when recording has been successfully sent to server.</td></tr>
</table>
<br>
<hr>
<h2 id="spt"><i class="fa"></i> Notes</h2>
<div>
<h3>Recording process</h3>
<p>
Users should allow microphone access when browser asks them permission to do it.<br><br>
Actual recording process will start when user first allows it.<br><br>
Recording is being processed in stereo WAV blob, and is converted to mono WAV file when recording stopped for minimizing requiring disk and memory space usage.
</p>
<h3>Using server-side script</h3>
<p>Recordings are sent to server-side script as raw POST data. You can grab and save it anywhere by server-side script of your choice.</p>
<br><br>
<i class="fa"></i> If you still need some help, please email me to <b>[email protected]</b>.<br><br>
<br>
</div>
<hr>
<h2><i id="love" class="fa"></i> Thank you for using JustMicRec</h2>
</div><!-- /#main -->
</body>
</html>