可以使用chrome的web speech api，不过需要连接google的服务，请确保你的网络能访问，代码如下：
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Web Speech APIU</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
#info a {
color: darkred;
text-decoration: underline;
}
.final {
color: black;
padding-right: 3px;
}
.interim {
color: gray;
}
#results {
font-size: 14px;
font-weight: bold;
border: 1px solid #ddd;
padding: 15px;
text-align: left;
min-height: 150px;
margin: 0 0 20px 0;
}
#start_button {
border: 0;
background-color: transparent;
padding: 0;
cursor: pointer;
}
#start_img {
width: 50px;
height: 50px;
}
.btn-primary {
width: 100px;
margin: auto;
}
select {
padding: 5px 5px;
}
@media screen and (max-width: 767px) {
#select_dialect {
position: absolute;
right: 0;
}
}
@media screen and (min-width: 768px) {
select {
margin-right: 10px;
}
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<main>
<div class="container mt-3">
<h3 class="text-center">Web Speech API Demo</h3>
<p>需要你的网络能访问google服务</p>
<div id="info"></div>
<div class="float-right">
<button id="start_button">
<img id="start_img" src="//repo.bfw.wiki/bfwrepo/icon/60ff82091152a.gif" alt="Start"></button>
</div>
<div id="results">
<span id="final_span" class="final"></span>
<span id="interim_span" class="interim"></span>
<p>
</div>
<div class="row col-12 p-0 m-0">
<div class="row col-12 col-md-8 col-lg-6 p-0 m-0">
<select id="select_language"></select>
<select id="select_dialect"></select>
</div>
<div class="col-12 col-md-4 col-lg-6 mt-3 mt-md-0 p-0 m-0">
<div class="float-right">
<button id="copy_button" class="btn btn-primary ">Copy</button>
</div>
</div>
</div>
</div>
</main>
<script>
var langs =
[
['中文', ['cmn-Hans-CN', '普通话 (中国大陆)'],
['cmn-Hans-HK', '普通话 (中国香港)'],
['cmn-Hant-TW', '中文 (中国台灣)'],
['yue-Hant-HK', '粵語 (中国香港)']],
['Afrikaans', ['af-ZA']],
['Bahasa Indonesia', ['id-ID']],
['Bahasa Melayu', ['ms-MY']],
['Català', ['ca-ES']],
['Čeština', ['cs-CZ']],
['Deutsch', ['de-DE']],
['English', ['en-AU', 'Australia'],
['en-CA', 'Canada'],
['en-IN', 'India'],
['en-NZ', 'New Zealand'],
['en-ZA', 'South Africa'],
['en-GB', 'United Kingdom'],
['en-US', 'United States']],
['Español', ['es-AR', 'Argentina'],
['es-BO', 'Bolivia'],
['es-CL', 'Chile'],
['es-CO', 'Colombia'],
['es-CR', 'Costa Rica'],
['es-EC', 'Ecuador'],
['es-SV', 'El Salvador'],
['es-ES', 'España'],
['es-US', 'Estados Unidos'],
['es-GT', 'Guatemala'],
['es-HN', 'Honduras'],
['es-MX', 'México'],
['es-NI', 'Nicaragua'],
['es-PA', 'Panamá'],
['es-PY', 'Paraguay'],
['es-PE', 'Perú'],
['es-PR', 'Puerto Rico'],
['es-DO', 'República Dominicana'],
['es-UY', 'Uruguay'],
['es-VE', 'Venezuela']],
['Euskara', ['eu-ES']],
['Français', ['fr-FR']],
['Galego', ['gl-ES']],
['Hrvatski', ['hr_HR']],
['IsiZulu', ['zu-ZA']],
['Íslenska', ['is-IS']],
['Italiano', ['it-IT', 'Italia'],
['it-CH', 'Svizzera']],
['Magyar', ['hu-HU']],
['Nederlands', ['nl-NL']],
['Norsk bokmål', ['nb-NO']],
['Polski', ['pl-PL']],
['Português', ['pt-BR', 'Brasil'],
['pt-PT', 'Portugal']],
['Română', ['ro-RO']],
['Slovenčina', ['sk-SK']],
['Suomi', ['fi-FI']],
['Svenska', ['sv-SE']],
['Türkçe', ['tr-TR']],
['български', ['bg-BG']],
['Pусский', ['ru-RU']],
['Српски', ['sr-RS']],
['한국어', ['ko-KR']],
['日本語', ['ja-JP']],
['Lingua latīna', ['la']]];
</script>
<script>
var messages = {
"start": {
msg: '点击右边的麦克风开始说话',
class: 'alert-success'
},
"speak_now": {
msg: '请说话.',
class: 'alert-success'
},
"no_speech": {
msg: 'No speech was detected. You may need to adjust your <a href="//support.google.com/chrome/answer/2693767" target="_blank">microphone settings</a>.',
class: 'alert-danger'
},
"no_microphone": {
msg: 'No microphone was found. Ensure that a microphone is installed and that <a href="//support.google.com/chrome/answer/2693767" target="_blank">microphone settings</a> are configured correctly.',
class: 'alert-danger'
},
"allow": {
msg: '点击允许使用您的麦克风',
class: 'alert-warning'
},
"denied": {
msg: 'Permission to use microphone was denied.',
class: 'alert-danger'
},
"blocked": {
msg: 'Permission to use microphone is blocked. To change, go to chrome://settings/content/microphone',
class: 'alert-danger'
},
"upgrade": {
msg: 'Web Speech API is not supported by this browser. It is only supported by <a href="//www.google.com/chrome">Chrome</a> version 25 or later on desktop and Android mobile.',
class: 'alert-danger'
},
"stop": {
msg: 'Stop listening, click on the microphone icon to restart',
class: 'alert-success'
},
"copy": {
msg: 'Content copy to clipboard successfully.',
class: 'alert-success'
},
}
var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;
var recognition;
$(document).ready(function() {
for (var i = 0; i < langs.length; i++) {
select_language.options[i] = new Option(langs[i][0], i);
}
select_language.selectedIndex = 0;
updateCountry();
select_dialect.selectedIndex = 0;
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
showInfo('start');
start_button.style.display = 'inline-block';
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() {
recognizing = true;
showInfo('speak_now');
start_img.src = '//repo.bfw.wiki/bfwrepo/icon/60ff822e60e99.gif';
};
recognition.onerror = function(event) {
if (event.error == 'no-speech') {
start_img.src = '//repo.bfw.wiki/bfwrepo/icon/60ff82091152a.gif';
showInfo('no_speech');
ignore_onend = true;
}
if (event.error == 'audio-capture') {
start_img.src = '//repo.bfw.wiki/bfwrepo/icon/60ff82091152a.gif';
showInfo('no_microphone');
ignore_onend = true;
}
if (event.error == 'not-allowed') {
if (event.timeStamp - start_timestamp < 100) {
showInfo('blocked');
} else {
showInfo('denied');
}
ignore_onend = true;
}
};
recognition.onend = function() {
recognizing = false;
if (ignore_onend) {
return;
}
start_img.src = '//repo.bfw.wiki/bfwrepo/icon/60ff82091152a.gif';
if (!final_transcript) {
showInfo('start');
return;
}
showInfo('stop');
if (window.getSelection) {
window.getSelection().removeAllRanges();
var range = document.createRange();
range.selectNode(document.getElementById('final_span'));
window.getSelection().addRange(range);
}
};
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
});
function updateCountry() {
for (var i = select_dialect.options.length - 1; i >= 0; i--) {
select_dialect.remove(i);
}
var list = langs[select_language.selectedIndex];
for (var i = 1; i < list.length; i++) {
select_dialect.options.add(new Option(list[i][1], list[i][0]));
}
select_dialect.style.visibility = list[1].length == 1 ? 'hidden': 'visible';
}
function upgrade() {
start_button.style.visibility = 'hidden';
showInfo('upgrade');
}
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;
function capitalize(s) {
return s.replace(first_char, function(m) {
return m.toUpperCase();
});
}
$("#copy_button").click(function () {
if (recognizing) {
recognizing = false;
recognition.stop();
}
setTimeout(copyToClipboard, 500);
});
function copyToClipboard() {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('results'));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById('results'));
window.getSelection().addRange(range);
document.execCommand("copy");
}
showInfo('copy');
}
$("#start_button").click(function () {
if (recognizing) {
recognition.stop();
return;
}
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
ignore_onend = false;
final_span.innerHTML = '';
interim_span.innerHTML = '';
start_img.src = '//repo.bfw.wiki/bfwrepo/icon/60ff821c99b13.gif';
showInfo('allow');
start_timestamp = event.timeStamp;
});
$("#select_language").change(function () {
updateCountry();
});
function showInfo(s) {
if (s) {
var message = messages[s];
$("#info").html(message.msg);
$("#info").removeClass();
$("#info").addClass('alert');
$("#info").addClass(message.class);
} else {
$("#info").removeClass();
$("#info").addClass('d-none');
}
}
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
