背景
近期在完善blockly4pi中AI的相关部分，语音和图像/视频流是常见的输入，语音的输入之前计划在硬件积木那边采集，之后流向树莓派，交由树莓派来处理，不过协议因此变得复杂许多，一番权衡之下，我们决定在浏览器里来处理多媒体输入
我一直在关注浏览器中的webRTC和Web Speech，之前在几个项目中也接触过它们,这些接口现在越发强大了，而且浏览器的支持也在变好
Web Speech
HTML5中和Web Speech相关的API有两类, 一类是"语音合成(Speech Synthesis)"，一类是"语音识别(Speech Recognition)",无论哪种,使用起来都非常简单.
语音合成
之前语音合成我一直用百度语音来做，效果还不错，不过多了一层网络请求.
Chrome 浏览器在版本25之后开始支持这一特性，效果非常棒.你可以调出你的控制台,让浏览器说: ‘你好,世界’,像下边这样:
1
2
|
var utterThis = new window.SpeechSynthesisUtterance('你好，世界！');
window.speechSynthesis.speak(utterThis);
|
神奇的是，竟然没有用到云服务，完全在本地完成!
语音识别
相比于语音合成，语音识别还有些坑。
我们先来说下它的简单用法
1
2
3
4
5
|
var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event) {
console.log(event);
}
newRecognition.start();
|
上边短短的几行，你就完成了浏览器调用麦克风，等待语音输入到结果输出的完成流程
如果你只是想拿到输出结果的内容，可以这样:
1
2
3
4
5
6
7
8
9
|
var newRecognition = new webkitSpeechRecognition();
//newRecognition.continuous = false;
newRecognition.onresult = function(event) {
//console.log(event);
result = event.results[0][0];
transcript = result.transcript;
console.log(transcript);
}
newRecognition.start();
|
识别结果比较理想
坑
有个恼人的坑是，识别开始后，浏览器有时候一直在等待输入，而无法返回识别结果（可能是墙的原因），这种情况时常发生，而且在各个平台下(mac/windows)下都是如此
不过在chrome的开发版(canary)中一切正常,我的当前版本号是: 60.0.3099.0（正式版本）canary （64 位
为了将其纳入到blockly4pi体系中，我们需要将Web Speech包装为blockly积木块
语音合成部分比较简单,在积木中接受用户输入，传到api中即可，@dsl已经完成了这个工作
语音识别部分会比较麻烦，在上边的语音识别示例代码里，我们看到对语音的识别结果出现在onresult事件回调的函数里，这样一来控制流就不是线性的了(哈哈 在js中这才是常态)，如何在blockly中表达变达这种控制流，是个值得思考的问题
熟悉js的同学会觉得思路上不难，可要在blockly中表达也没有很容易，首先得熟悉blockly的表达习惯和api,有些部分涉及比较高级的api
这个问题webduino团队给出了漂亮的解答，我们稍后对其源码做个分析
源码分析
熟悉blockly的小伙伴，很轻松能定位到目标积木块的源码(我们只关注sound_recognition块，其他块相对简单)
在注释中我们找到了积木块的生成方式：sound_recognition blockfactory
积木外观由以下代码定义:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
Blockly.Blocks['sound_recognition'] = {
init: function() {
this.appendDummyInput()
.appendField("開始語音辨識 ( Chrome 限定，不支援 iOS )");
this.appendDummyInput()
.appendField("辨識語言：")
.appendField(new Blockly.FieldDropdown([["中文","cmn-Hant-TW"], ["English","en-US"]]), "lang_")
.appendField(" 即時辨識：")
.appendField(new Blockly.FieldDropdown([["on","on"], ["off","off"]]), "interimResults_")
.appendField("( 行動裝置勾選 off )");
this.appendStatementInput("recognition_");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip('');
this.setHelpUrl('');
}
};
|
(以js为例)拿到积木中的用户的输入很简单:
1
2
3
4
5
6
7
8
|
Blockly.JavaScript['sound_recognition'] = function(block) {
var dropdown_lang_ = block.getFieldValue('lang_');
var dropdown_interimresults_ = block.getFieldValue('interimResults_');
var statements_recognition_ = Blockly.JavaScript.statementToCode(block, 'recognition_');
// TODO: Assemble JavaScript into code variable.
var code = '...;\n';
return code;
};
|
其中statements_recognition_值得留意
至此整个积木块已经完成，只剩下最后也最核心的问题了，sound_recognition是如何来generate出代码的，上边提到的回调的问题也是在这里处理
直接上代码更直观些:
抛开辅助性的代码，我们看到最核心的部分是
1
2
3
4
5
6
7
8
9
10
11
12
13
|
' window._recognition.onresult = async function(event,result) {\n' +
' result = {};\n' +
' result.resultLength = event.results.length-1;\n' +
' result.resultTranscript = event.results[result.resultLength][0].transcript;\n' +
' if(event.results[result.resultLength].isFinal===' + inter1 + '){\n' +
' console.log(result.resultTranscript);\n' +
' ' + statements_recognition_ +
' ' + consoleFinal1 +
' }else if(event.results[result.resultLength].isFinal===' + inter2 + '){\n' +
' ' + consoleFinal2 +
' }\n' +
' };\n' +
' window._recognition.start();\n' +
|
特别注意statements_recognition_
顺便吐个槽，尽管code的拼接极尽排版的工整，但读起来还是不舒服，用es6的模版字符串来写会好看很多
参考
