-
Notifications
You must be signed in to change notification settings - Fork 7
/
offline.html
97 lines (84 loc) · 3.97 KB
/
offline.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
<!-- A sample where you can record your voice and it can be played back -->
<!-- Original source: http://codeartists.com/post/36746402258/how-to-record-audio-in-chrome-with-native-html5-apis -->
<!-- By offline we mean that the entire voice sample is recorded before decoding -->
<!-- Adapted by Alex Popof for CS 224S at Stanford - June 2014 -->
<html>
<body>
<div align="center">
<h1>Welcome to Kaldi Web Client</h1>
<audio controls autoplay></audio>
<script type="text/javascript" src="recorder.js"> </script>
<script type="text/javascript" src="resampler.js"> </script>
<script src="/socket.io/socket.io.js"></script>
<div>
<input id="start" onclick="startRecording()" type="button" value="start recording" />
<input id="stop" onclick="stopRecording()" type="button" disabled="disabled" value="stop recording and play" />
</div>
<h4>Output Text from Kaldi:</h4>
<div style="width:400px;height:100px;border:2px solid blue;" id="kaldi-output"></div>
</div>
<script>
// NOTE: This must be changed for your IP
var socket = io.connect('54.225.44.44:8080');
var output_elem = document.getElementById("kaldi-output");
socket.on('decode', function (data) {
var current = output_elem.innerHTML;
output_elem.innerHTML = current + data.result;
});
var onFail = function(e) {
console.log('Rejected!', e);
};
var context = new webkitAudioContext();
var onSuccess = function(s) {
var mediaStreamSource = context.createMediaStreamSource(s);
recorder = new Recorder(mediaStreamSource);
recorder.record();
// audio loopback
// mediaStreamSource.connect(context.destination);
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var recorder;
var audio = document.querySelector('audio');
function startRecording() {
if (navigator.getUserMedia) {
output_elem.innerHTML = "";
navigator.getUserMedia({audio: true}, onSuccess, onFail);
document.getElementById("start").disabled = true;
document.getElementById("stop").disabled = false;
} else {
console.log('navigator.getUserMedia not present');
}
}
function stopRecording() {
document.getElementById("start").disabled = false;
document.getElementById("stop").disabled = true;
recorder.stop();
recorder.getBuffer(function(s) {
// return value holds interleaved stereo audio data at mic's sample rate (44.1 or 48 kHz)
// "interleaved": indices alternate between left and right channels
var buffer = s;
var sampleRateFromMic = context.sampleRate;
// resample input stereo to 16khz stereo
// Resample args: inputRate, outputRate, numChannels, length of buffer, noReturn boolean
// since we want the returned value, noReturn is set to false
var resamplerObj = new Resampler(sampleRateFromMic, 16000, 2, buffer.length, false);
var resampledBuffer = resamplerObj.resampler(buffer);
// convert stereo to mono and export
recorder.exportDownsampledWAV(function(s) {
src = window.URL.createObjectURL(s);
audio.src = src;
// convert blob to binary data so can send over socket
var reader = new FileReader();
reader.onloadend = function () {
console.log('wav file created...sending to server');
socket.emit('wav',{'str':reader.result});
}
// send binary string to server where it will save wav locally and decode
reader.readAsBinaryString(s);
}, resampledBuffer);
});
}
</script>
</body>
</html>