聊聊js中的语音识别

1,205 阅读4分钟

之前写过一篇文章,说的是语音合成,可以让电脑说话,就像是google翻译的发音功能一样,当然,这功能的在浏览器上的兼容性上比较一般,但是今天说的这个语音识别比语音合成更加小众。mdn上面在标题下面硕大的黄框里面表明这个功能某些浏览器尚在开发,而且mdn上面连中文的翻译都没有,慢慢的都是英文,所以我就简单介绍一下吧,毕竟这个功能还在开发过程中,可能某些api会在后面的开发中有一些更改。

先简单的介绍一下网页上语音识别的历史。

语音识别功能最早是作为input的一个属性出现的,从chrome11版本可以通过在input中添加x-webkit-speech属性来增加语音识别的小话筒。

 <input type="text" x-webkit-speech onwebkitspeechchange="foo()" />

其中onwebkitspeechchange是语音识别的回调事件,可以看得出来,这个功能属于webkit专属功能,并没有推广开来。而且我并没有在网上找到有关于这个属性的具体介绍,所以关于这个功能没有办法介绍的太多。

这个功能在chrome36中就被废除了,因为这个功能有漏洞:带有x-webkit-speech属性的文本框允许用户单击麦克风图标并在框中朗读文本。通过一些简单的样式表技巧,可以隐藏文本框(以及随后的弹出窗口),以便在用户不知情的情况下捕获语音。所以现在版本的chrome是无法使用这个属性的。起码我的电脑是不能的。

当然,google在浏览器语音识别的道路上还是并没有停止的,在chrome25上就添加了语音识别的api,当然这方面我并没有找到明确的证据,在mdn上面明确标注所有的语音识别api的兼容性是整齐划一的33,可能是在版本更新的过程中有过修改,但是我确实是找不到证明。目前来讲,这个就是我们现在能用的浏览器上面的语音识别的唯一选择了。

先简单的介绍一下这个语音识别的语法吧。

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

start调用之后会先询问用户是否同意使用麦克风,如果同意就可以开始说话,并根究个人设置触发onresult的回调函数,捕获语音识别结果。

返回的event.results是一个数组,数据类型大概如下所示。

results: { 
    0: { 
        0: { 
            confidence: 0.695017397403717, 
            transcript: "hello world" 
            }, 
        isFinal:true, 
        length:1 }, 
    length:1 }

鉴于没有mdn没有中文版,我的英语水平一般,怕出现大的错漏,我就把我能理解的属性和方法简单的介绍一下。所以先声明,语音识别api的方法和属性并不只有我列出的这些。

先说语音识别的属性吧。

还有就是比较简单的方法,start和stop,这个两个方法我不介绍估计也能看出来是干什么用的。

还有就是一些回调方法

  • audiostart

  • 当用户代理开始捕获音频时触发。
    也可通过onaudiostart获得。

  • audioend

  • 当用户代理完成捕获音频时触发。
    也可通过onaudioend获得。

  • end

  • 当语音识别服务断开连接时触发。
    也可通过onend获得。

  • error

  • 发生语音识别错误时触发。
    也可通过`onerror店获得。

  • result

  • 当语音识别服务返回结果时触发 - 一个词或短语已被肯定识别,并且已将其传达回应用程序。
    也可通过onresult获得。

  • soundstart

  • 当检测到任何声音(可识别语音或不可识别语音)时触发。
    也可通过onsoundstart获得。

  • soundend

  • 当任何声音(可识别语音与否)停止检测时触发。
    也可通过onsoundend获得。

  • speechstart

  • 当检测到语音识别服务识别为语音的声音时触发。
    也可通过onspeechstart获得。

  • speechend

  • 当语音识别服务识别的语音停止被检测到时触发。
    也可通过onspeechend获得。

  • start

  • 当语音识别服务开始收听传入音频以识别与当前SpeechRecognition.
    也可通过onstart获得。

回调方法我就简单的贴过来了,都是google翻译的结果,因为这些回调的名字起的比较易懂,所以就不多说了。

这个就是目前浏览器语音识别api的一个大概的介绍,文章内容比较草率,作为新人还在学习中,争取在后面能做得更好。如果有人看到先感谢您的阅读。