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

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

javascript 复制代码
<!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[event.resultIndex];
                let transcript = result[0].transcript;  // 获取识别的文本
                console.log("识别结果:", transcript);
                
                // 如果有中间结果,可以实时更新
                if (event.results[0].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>
相关推荐
名字不要太长 像我这样就好18 分钟前
【iOS】继承链
macos·ios·cocoa
潜龙95271 小时前
第4.3节 iOS App生成追溯关系
macos·ios·cocoa
qiqiqi(^_×)8 小时前
卡在“pycharm正在创建帮助程序目录”
ide·python·pycharm
小妖6669 小时前
vscode 源码编译
ide·vscode·编辑器
张人玉10 小时前
Visual Studio 的常用快捷键
ide·visual studio
玄辰星君11 小时前
【MAC】nacos 2.5.1容器docker安装
macos·docker·nacos
focksorCr12 小时前
在VsCode上使用开发容器devcontainer
ide·vscode·编辑器
Lum110412 小时前
PyCharm高效入门指南大纲
ide·python·pycharm
atwdy15 小时前
MacOS安装linux虚拟机
linux·运维·ubuntu·macos·utm
郭尘帅66616 小时前
IDEA中删除多余的jdk选项 【IDEA2024版】
java·ide·intellij-idea