JS利用浏览器进行语言识别

<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>test</title>
</head>
  
<body>
  <div id="result">测试显示</div>
  <button id="transcribe-now" onclick="startSpeechRecognition()">Start</button>
  
  <!-- built files will be auto injected -->
</body>
<script>
  var i=0;
  var recognition= window.webkitSpeechRecognition ? new webkitSpeechRecognition() : new SpeechRecognition();
   recognition.lang = "zh-CN";
   recognition.continuous = true;// 是否连续识别
   recognition.interimResults = false;// 是否返回临时结果
   recognition.addEventListener("result", function (e) {
        const re = document.getElementById("result"); 
        //re.innerHTML = e.results[0][0].transcript;
       // console.log(e.results[0][0].transcript);
        let result = ''
        for(let i = 0;i <= e.resultIndex; i++) {
             result += e.results[i][0].transcript;
           }
        console.log('' + i + '---' + e.results[e.resultIndex][0].transcript);
        i++; 
        re.innerHTML  = result
             
      });
      recognition.addEventListener("error", function (event) {
        console.error("语音识别失败",event.error);
      });
      recognition.addEventListener("end", function (e) {
       // window.transcriptionInProgress = null;
        console.log("结束了"); 
        recognition.start();//浏览器会弹出使用麦克风确认对话框，很烦
        btn.innerHTML = '<i class="fa fa-circle"></i>Start';
      });
      recognition.addEventListener("start", function (event) {
        console.log("开始");
      });
       
   
   function startSpeechRecognition() {
     
      let btn = document.getElementById("transcribe-now");
      //recognition = window.webkitSpeechRecognition ? new webkitSpeechRecognition() : new SpeechRecognition();
      recognition.start();
     
  }
 
   
</script>
  
</html>