惊雷无声 发表于 2025-1-8 08:51:11

【工具】HTML主动识别用户正在讲话 以及制止讲话

【工具】HTML主动识别用户正在讲话 以及制止讲话
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音识别</title>
</head>
<body>
    <h2>点击按钮开始语音识别</h2>
    <button id="startButton">开始识别</button>
    <p id="status">等待用户讲话...</p>
    <script>
      let recognition;
      let isRecognizing = false;

      // 检查浏览器是否支持 Web Speech API
      if (!('webkitSpeechRecognition' in window)) {
            alert("抱歉,您的浏览器不支持语音识别!");
      } else {
            recognition = new webkitSpeechRecognition();
            recognition.continuous = true;// 设置为持续模式,识别一段时间后不会停止
            recognition.interimResults = true;// 获取中间结果

            // 语音识别开始时
            recognition.onstart = function() {
                isRecognizing = true;
                document.getElementById('status').innerText = "正在识别中...";
            };

            // 语音识别结束时
            recognition.onend = function() {
                isRecognizing = false;
                document.getElementById('status').innerText = "停止识别,等待用户讲话...";
            };

            // 识别到语音时
            recognition.onresult = function(event) {
                let result = event.results;
                let transcript = result.transcript;// 获取识别的文本
                console.log("识别结果:", transcript);
               
                // 如果有中间结果,可以实时更新
                if (event.results.isFinal) {
                  document.getElementById('status').innerText = "识别结果: " + transcript;
                }
            };

            // 点击按钮开始识别
            document.getElementById('startButton').addEventListener('click', function() {
                if (isRecognizing) {
                  recognition.stop();// 停止识别
                  document.getElementById('status').innerText = "已停止识别。";
                } else {
                  recognition.start();// 开始识别
                }
            });
      }
    </script>
</body>
</html>







免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 【工具】HTML主动识别用户正在讲话 以及制止讲话