-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
78 lines (78 loc) · 3.05 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Push-To-Talk Speech Recognition</title>
</head>
<body>
<button id="ptt" style="font-size:1.5em" disabled>Push-To-Talk</button>
<p id="text" style="font-size:1.5em"></p>
<p id="error" style="color:red">error: getUserMedia failed</p>
<script type="text/javascript">
var pttButton = document.getElementById('ptt');
var textBox = document.getElementById('text');
var errorBox = document.getElementById('error');
var audioCtx, sourceNode, recorderNode, ws;
function do_ws() {
ws = new WebSocket((location.protocol == 'http:' ? 'ws' : 'wss') + '://' + location.host + '/audio');
ws.addEventListener('open', function() {
errorBox.innerHTML = ' ';
});
ws.addEventListener('message', function(event) {
var msg = JSON.parse(event.data);
textBox.style.color = msg.final ? 'green' : 'orange';
textBox.innerHTML = msg.text;
if (!msg.final)
textBox.innerHTML += ' ...';
textBox.innerHTML += ' (' + new Date().toLocaleTimeString() + ')';
errorBox.innerHTML = msg.error ? 'error: ' + msg.error : ' ';
});
ws.addEventListener('close', function(event) {
errorBox.innerHTML = 'error: WebSocket: server connection lost';
ws = null;
setTimeout(do_ws, 1000);
});
ws.addEventListener('error', function(event) {
errorBox.innerHTML = 'error: WebSocket: ' + event;
});
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (navigator.getUserMedia) {
errorBox.innerHTML = ' ';
pttButton.disabled = false;
window.AudioContext = window.AudioContext || window.webkitAudioContext;
audioCtx = new AudioContext({sampleRate:16000});
navigator.getUserMedia({audio:true}, function(stream) {
try {
sourceNode = audioCtx.createMediaStreamSource(stream);
} catch(error) {
errorBox.innerHTML = 'error: createMediaStreamSource: ' + error + '<br/>';
pttButton.disabled = true;
return;
}
recorderNode = audioCtx.createScriptProcessor(512, 1, 1);
recorderNode.onaudioprocess = function(e) {
var samples = Int16Array.from( e.inputBuffer.getChannelData(0).map( x => x * 0x7FFF) );
if (ws !== undefined && ws.readyState === WebSocket.OPEN)
ws.send(samples);
}
do_ws();
}, function(error) {
errorBox.innerHTML = 'error: getUserMedia: ' + error;
});
pttButton.addEventListener('mousedown', function(event) {
if (audioCtx.state == 'suspended')
audioCtx.resume();
sourceNode.connect(recorderNode);
recorderNode.connect(audioCtx.destination);
});
pttButton.addEventListener('mouseup', function(event) {
recorderNode.disconnect(audioCtx.destination);
sourceNode.disconnect(recorderNode);
if (ws !== undefined && ws.readyState === WebSocket.OPEN)
ws.send(new Int16Array([]));
});
}
</script>
</body>
</html>