-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
104 lines (97 loc) · 5.58 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
<!DOCTYPE html>
<html lang="en" ng-app="recorder">
<head>
<meta charset="utf-8">
<title>Speech Recording in Browser</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="app.js"></script>
<style type="text/css"> .red-btn { color: #D00000; } .green-btn { color: #00D000; } .blue-btn { color: #0000D0; } .inline { display: inline; } .code-em{ font-family: monospace; } </style>
</head>
<body ng-controller="RecorderController">
<div class="container well">
<h1 class="text-center">Record FLAC from the Browser</h1>
<div class="row">
<div class="offset3 span3 text-left">
<label>Compression: <select ng-model="compression" ng-options="b for b in compressions" ng-disabled="wav_format"></select></label>
</div>
<div class="span3 text-left">
<label>Auto Select Input Sample Rate: <input type="checkbox" ng-model="autoSelectSamplerate" ng-click="setResultMode(isASREnabled);" /></label>
</div>
<div class="span3 text-left">
<label>Input Sample Rate: <select ng-model="samplerate" ng-options="s + ' Hz' for s in samplerates" ng-disabled="wav_format || autoSelectSamplerate"></select></label>
</div>
</div>
<div class="row">
<div class="offset3 span3 text-center"><button class="btn" ng-click="startRecording()" ng-disabled="recording"><i class="icon-circle" ng-class="recordButtonStyle"></i> Start recording</button></div>
<div class="span3 text-center"><button class="btn" ng-click="stopRecording()" ng-disabled="!recording"><i class="icon-download-alt"></i> Stop recording</button></div>
</div>
<div class="row">
<div class="span12 text-center" ng-show="recording">
<span class="label label-important">Recording...</label>
</div>
</div>
<div class="row">
<div class="offset3 span6">
<!-- <button class="btn blue-btn" ng-click="recordaswave('wav_btn');" ng-disabled="recording" id="wav_btn"> -->
<!-- <i class="icon-circle" ng-class="recordButtonStyle" id="wav_btn"></i> (Format: <i class="icon-circle green-btn"></i> = WAV <i class="icon-circle blue-btn"></i> = FLAC)
<i class="icon-circle blue-btn" id="wav_btn"></i> (Format: <i class="icon-circle green-btn"></i> = WAV <i class="icon-circle blue-btn"></i> = FLAC) -->
<!-- FLAC
</button><br>
-->
<h4>Download as</h4>
<input type="radio" name="format" ng-click="recordaswave(false);" value="flac" checked>FLAC-file
<input type="radio" name="format" ng-click="recordaswave(true);" value="wav">WAV-file<br>
<br>
<div ng-show="!wav_format">
<input type="checkbox" ng-disabled="isNotASRCapable" ng-model="isASREnabled" ng-click="setResultMode(isASREnabled);" />
<span ng-show="!isNotASRCapable">Send Audio to Speech Recognition (instead of File)</span>
<div ng-show="isNotASRCapable" class="inline">
<s>Send Audio to Speech Recognition (instead of File)</s><br>
<div class="alert alert-warning alert-dismissible">
Disabled: Need authorization for accessing Google Cloud Speech API (see comment in app.js)
<br/>
<em>
For testing, you can generate an <span class="code-em">access token</span> using your
<span class="code-em">service key</span> and set it as query param:
(e.g. see the example Node.js script <span class="code-em">create_access_token.js</span>)
</em>
<br/>
<code>https://...?key=<the generated access token></code>
<br/>
<em>Alternatively, you can set an <span class="code-em">API key</span> as query param:</em>
<code>https://...?auth=apiKey&key=<your API key></code>
<br>
<strong>WARNING</strong> you should take care to keep your <span class="code-em">API key</span> secret!!!
</div>
</div>
<br/>
</div>
</div>
</div>
<div class="row" >
<div class="offset3 span6">
<label ng-show="!wav_format && result_mode == 'asr'">Recognition Language: <select ng-model="language" ng-options="l for l in languages"></select></label>
</div>
<div class="text-center offset3 span6 form-group" ng-show="!wav_format && result_mode == 'asr'">
<h4>Recognition Result Data:</h4>
<textarea name="asr-result" class="form-control span6" rows="10" ng-model="asr_result.text" readonly></textarea>
</div>
</div>
</div>
<p>Press on the "Start recording button" to start the recording per microphone - permission by the user is required.<br>
To end the recording press on "Stop recording".<br>
The compression and input-sample-rate options are only applicable for FLAC file format download.<br>
The input sample rate in Chrome is - as of now - 44100 Hz. If you change that, the recorded sample may be played slower or faster than expected.</p>
<p>
Important:<br>
<br>
If running the HTML page directly from the file system, then Chrome needs to be started with flag
<code>--allow-file-access-from-files</code>.
Otherwise the web worker cannot be loaded.<br>
If you want to use the Google Speech Recognition web service, you may need to start Chrome with the flag
<code>--disable-web-security</code>; <b>WARNING:</b> you should not browse the Internet when this flag is active.
</p>
</body>
</html>