2012年底推出的Web Speech API, 使Web开发人员可以在Web浏览器中提供语音输入和文本到语音输出功能。通常, 在使用标准语音识别或屏幕阅读器软件时, 这些功能不可用。该API负责保护用户的隐私。在允许网站通过麦克风访问语音之前, 用户必须明确授予权限。
你需要了解的一些重要事项:
- 仅在日期(23.02.2016)中可用, 仅在Google Chrome中可用。
- 不允许使用本地文件(file://协议), 该文件需要以某种方式托管在服务器(或localhost)中。
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = "en-GB";
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;
}
}
console.log(interim_transcript, final_transcript);
};
}
Google github中的存储库有一个非常完整的示例(具有许多语言代码, 可防止错误等), 你可以在此处从存储库下载演示。
【如何使用javascript(webkitSpeechRecognition API)轻松将语音转换为文本】Artyom.js是webkitSpeechRecognition API的强大包装器库, 它使你可以做一些很棒的技巧, 例如语音命令, 语音提示, 语音合成以及更多功能。在这种情况下, 我们将对artyom.newDictation函数感兴趣。此功能将用更简单的方式包装所有先前的代码, 首先你需要将库包含到你的项目中, 你的html文件应如下所示:
<
!DOCTYPE>
<
html>
<
head>
<
title>
Dictation example <
/title>
<
script type="text/javascript" src="http://www.srcmini.com/path/to/artyom.min.js">
<
/script>
<
/head>
<
body>
<
input type="button" onclick="startRecognition();
" value="http://www.srcmini.com/Recognize text" />
<
input type="button" onclick="stopRecognition();
" value="http://www.srcmini.com/stop recognition" />
<
script>
// we will write the javascript here<
/script>
<
/body>
<
/html>
如果你已经在文档中链接了artyom库, 那么你的javascript将如下所示:
var settings = {continuous:true, // Don't stop never because i have https connectiononResult:function(text){
// text = the recognized textconsole.log(text);
}, onStart:function(){console.log("Dictation started by the user");
}, onEnd:function(){alert("Dictation stopped by the user");
}};
var UserDictation = artyom.newDictation(settings);
function startRecognition(){
UserDictation.start();
}function stopRecognition(){
UserDictation.stop();
}
你只需要处理初始化, 然后, 魔术将在settings对象的onResult属性中发生。尽管artyom使事情变得容易得多, 但是你需要考虑是否确实需要使用它, 如果你是从本主题开始, 建议使用纯代码, 因此你将了解此api的工作原理以及是否你仍然感兴趣, 可以稍后再使用artyom。
这个api的潜力确实令人难以置信, 但是只有谷歌chrome支持它是一种遗憾。你可以改进前面的所有代码, 例如检测你可以在哪种浏览器中初始化webkitSpeechRecogniton。
推荐阅读
- 如何漂亮地打印(美化)JSON字符串
- Console.table你可能不知道的Chrome JavaScript调试控制台的属性
- 如何使用javascript向你的网页添加语音命令
- 如何在JavaScript中将Uint8Array转换为字符串
- 如何使用JavaScript正确反转字符串
- 如何使用CSS在JavaScript控制台上自定义调试
- 什么是去抖动方法以及如何在JavaScript中使用它
- JS框架与VanillaJS(使用还是不使用框架())
- javascript中变量声明中LET和VAR有什么区别