-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathspeech-to-text.html
98 lines (79 loc) · 3.48 KB
/
speech-to-text.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
<!DOCTYPE html>
<head>
<title>Speech to Text</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-0Mou2qXGeXK7k/Ue/a1hspEVcEP2zCpoQZw8/MPeUgISww+VmDJcy2ri9tX0a6iy" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align-center">
<h3 class="no-browser-support">Sorry, Your Browser Doesn't Support the Web Speech API. Try Opening This Demo In Google Chrome.</h3><br><br><br><br><br><br>
<div class="app">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h1>Speech to Text</h1>
<div class="input-single">
<textarea id="note-textarea" class="form-control" readonly placeholder="Speech to Text" cols="60" rows="10"></textarea>
</div>
<br><br>
<button id="start-record-btn" class="btn-success btn-lg" title="Start Recording">Start</button>
<button id="pause-record-btn" class="btn-warning btn-lg" title="Pause Recording">Pause</button> <br><br>
<p id="recording-instructions">Press the <strong>Start</strong> button and allow access.</p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
try {
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
var recognition = new SpeechRecognition();
$('.no-browser-support').hide();
} catch (e) {
console.error(e);
$('.no-browser-support').show();
$('.app').hide();
}
var noteTextarea = $('#note-textarea');
var instructions = $('#recording-instructions');
var noteContent = '';
recognition.continuous = true;
recognition.onresult = function(event) {
var current = event.resultIndex;
var transcript = event.results[current][0].transcript;
var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);
if (!mobileRepeatBug) {
noteContent += transcript;
noteTextarea.val(noteContent);
}
};
recognition.onstart = function() {
instructions.text('Voice recognition activated.');
}
recognition.onspeechend = function() {
instructions.text('On Speech End.');
}
recognition.onerror = function(event) {
if (event.error == 'no-speech') {
instructions.text('No speech was detected.');
};
}
$('#start-record-btn').on('click', function(e) {
if (noteContent.length) {
noteContent += ' ';
}
recognition.start();
});
$('#pause-record-btn').on('click', function(e) {
recognition.stop();
instructions.text('Voice recognition paused.');
});
noteTextarea.on('input', function() {
noteContent = $(this).val();
})
</script>
</body>
</html>