实现微软语音识别功能

1. 编写语音按钮

<button class="emoji-btn" onclick="toggleRecognition()" id="toggleBtn">
  <img src="/assets/images/yuyin.png" style="width:30px; height:30px" >                                                     
</button>

2. 编写JS代码

/**
 * 语音识别
 */
var recognition = new webkitSpeechRecognition() ||new SpeechRecognition();
recognition.continuous = true;  //识别到声音就关闭，还是一直识别
recognition.lang = 'cmn-Hans-CN'; //定义普通话 (中国大陆)
var resultDiv = document.getElementById('message');//输入框
var isRecognizing = false;

function toggleRecognition() {
    if (isRecognizing) {
        endRecognition();
    } else {
        startRecognition();
    }
}

function startRecognition() {
    console.log('start');
    // 开启
    recognition.start();
    resultDiv.value = "正在听取您的语音...";
    // document.getElementById('toggleBtn').innerText = "结束说话";
    // 获取按钮元素
    var toggleBtn = document.getElementById('toggleBtn');

// 设置按钮的 innerHTML 为图标的 HTML 代码的路径,就是点击之后的图标
    toggleBtn.innerHTML = '<img src="/assets/images/gyuyin.png" style="width:30px; height:30px" >';
    isRecognizing = true;
}

function endRecognition() {
    console.log('end');
    // 停止
    recognition.stop();
    // document.getElementById('toggleBtn').innerText = "开始说话";
    var toggleBtn = document.getElementById('toggleBtn');

// 设置按钮的 innerHTML 为图标的 HTML 代码的路径
    toggleBtn.innerHTML = '<img src="/assets/images/yuyin.png"  style="width:30px; height:30px">';
    isRecognizing = false;
}

// 当调用recognition的stop的时候会触发此对象的onresult事件，然后我们在这里获取我们的转换结果。
recognition.onresult = function (event) {
    var transcript = event.results[0][0].transcript;
    resultDiv.value = transcript;
    console.log(transcript);
}


recognition.onspeechend = (e) => {
    console.log("讲话完毕",e);
    // 停止语音识别，这会触发 onresult 事件
    endRecognition();
}