被忽视的前端语音识别和语音合成方法——SpeechRecognition、speechSynthesis

这个随笔拖了很久了，源于一年前的项目经历，在此记录分享下。

当初需求需要语音识别和语音合成，故了解了一些，如果你正需要可以看看是否有启发。

现在国内几家云服务语音识别和语音合成做的都可以了，是一种解决方案。

但其实 Web Speech API 也提供了直接可用的语音识别和语音合成：

先贴文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

文档能看明白的话就不用看下面例子了：

• webkitSpeechRecognition　　语音识别

const speechRecognition = new webkitSpeechRecognition()
speechRecognition.onresult = function(event) {
    var results = event.results
    if(results.length > 0) {
        for(var i = 0;i < results.length;i++) {
            console.log(results[i][0].transcript)
        }
    }
}
speechRecognition.continuous = true
speechRecognition.start()

利用 SpeechGrammerList 还可以简单自定义关键词和权重，详见文档

注：chrome 下可用，需要能访问 google 才可用、需要 HTTPS，故局限性大。

其他浏览器见文档，但推测都需要网络

 

 

• SpeechSynthesisUtterance 　　语音合成

不需要网络

测试了 macOS 下 火狐和谷歌浏览器，均可用

 

function speak (text) {
    const msg = new SpeechSynthesisUtterance()
    msg.text = text
    msg.lang = "zh-CN"
    speechSynthesis.speak(msg)
}
speak("辞旧迎新。")
speak("新年快乐！")