前端语音识别（webkitSpeechRecognition）

需求：需要在浏览器（pc）实现语音转文字。

webkitSpeechRecognition（语音识别）

// 创建一个webkitSpeechRecognition实例
let newRecognition = new webkitSpeechRecognition();
// 设置识别到声音就关闭还是一直识别
newRecognition.continuous = true;
// 开启录音
newRecognition.start();
// 关闭录音
newRecognition.stop();
// 识别到结果即触发，所以讲话过程多次停顿的情况下会触发多次
newRecognition.onresult = function(event) {
    
    console.log(event);
}
// 基本以上就已经达到了语音转文字的功能，下面是一些其他事件
//只要开始讲话了，就会触发onsoundstart和onspeechstart事件
newRecognition.onsoundstart = function(e){
   
    console.log("开始收听了");
    console.log(e);
}
newRecognition.onspeechstart = (e)=>{
   
    console.log("开始讲话了");
    console.log(e);
}
// onspeechend事件应该是监测到执行了stop方法时触发的。而如果一段时间没有录入信息，则会自动执行stop方法停止录音，同样也会触发onspeechend事件
newRecognition.onspeechend = (e)=>{
   
    console.log("讲话完毕");
    console.log(e);
}
// onerror很明显是有异常时会触发该事件，测试发现当长时间没有录入导致自动关闭录音的时候就会触发该事件
newRecognition.onerror = (e)=>{
   
    console.log("发生异常");
    console.log(e);
}

vue3.0 demo

存在兼容问题，本人测试谷歌浏览器并不能正常使用（不排除版本较低的缘故），safari浏览器正常。