在blockly中构建语音识别/合成 积木块

背景

近期在完善blockly4pi中AI的相关部分,语音和图像/视频流是常见的输入,语音的输入之前计划在硬件积木那边采集,之后流向树莓派,交由树莓派来处理,不过协议因此变得复杂许多,一番权衡之下,我们决定在浏览器里来处理多媒体输入

我一直在关注浏览器中的webRTC和Web Speech,之前在几个项目中也接触过它们,这些接口现在越发强大了,而且浏览器的支持也在变好

Web Speech

HTML5中和Web Speech相关的API有两类, 一类是"语音合成(Speech Synthesis)",一类是"语音识别(Speech Recognition)",无论哪种,使用起来都非常简单.

语音合成

之前语音合成我一直用百度语音来做,效果还不错,不过多了一层网络请求.

Chrome 浏览器在版本25之后开始支持这一特性,效果非常棒.你可以调出你的控制台,让浏览器说: '你好,世界',像下边这样:

var utterThis = new window.SpeechSynthesisUtterance('你好,世界!');
window.speechSynthesis.speak(utterThis);

神奇的是,竟然没有用到云服务,完全在本地完成!

语音识别

相比于语音合成,语音识别还有些坑。

我们先来说下它的简单用法

var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event) {
        console.log(event);
}
newRecognition.start();

上边短短的几行,你就完成了浏览器调用麦克风,等待语音输入到结果输出的完成流程

如果你只是想拿到输出结果的内容,可以这样:

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 位

包装成blockly积木块

为了将其纳入到blockly4pi体系中,我们需要将Web Speech包装为blockly积木块

语音合成部分比较简单,在积木中接受用户输入,传到api中即可,@dsl已经完成了这个工作

语音识别部分会比较麻烦,在上边的语音识别示例代码里,我们看到对语音的识别结果出现在onresult事件回调的函数里,这样一来控制流就不是线性的了(哈哈 在js中这才是常态),如何在blockly中表达变达这种控制流,是个值得思考的问题

熟悉js的同学会觉得思路上不难,可要在blockly中表达也没有很容易,首先得熟悉blockly的表达习惯和api,有些部分涉及比较高级的api

这个问题webduino团队给出了漂亮的解答,我们稍后对其源码做个分析

源码分析

熟悉blockly的小伙伴,很轻松能定位到目标积木块的源码(我们只关注sound_recognition块,其他块相对简单)

在注释中我们找到了积木块的生成方式:sound_recognition blockfactory

积木外观由以下代码定义:

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为例)拿到积木中的用户的输入很简单:

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出代码的,上边提到的回调的问题也是在这里处理

直接上代码更直观些:

抛开辅助性的代码,我们看到最核心的部分是

    '    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的模版字符串来写会好看很多

参考




Fork me on GitHub