【工具】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>
相关推荐
C7211BA10 小时前
Visual Studio Code (VS Code) 官方下载渠道
ide·vscode·编辑器
zhangfeng113310 小时前
win7 VSCode 1.70设置R语言的版本,电脑上有两个版本
ide·vscode·r语言
学习和思考10 小时前
为什么我的vscode有的时候可以跳转,有的时候不能跳转
arm开发·ide·驱动开发·vscode·学习·1024程序员节
新手村领路人10 小时前
vscode ssh远程连接 ubuntu虚拟机
ide·vscode·ssh
Bruce_Liuxiaowei10 小时前
Mac与Kali主机间SSH连接故障排除:主机密钥变更的解决方案
运维·macos·网络安全·ssh
繁依Fanyi11 小时前
【参赛心得】我的 HarmonyOS 开发入门与参赛之路
ide·人工智能·华为·word·harmonyos·aiide·codebuddyide
2501_9387802812 小时前
Objective-C 类的协议(Protocol)应用:解耦父子类与跨类通信实践
开发语言·macos·objective-c
wa的一声哭了12 小时前
Mac os安装Easyconnect卡在正在验证软件包
运维·服务器·git·macos·eclipse·github·mac
Jackson@ML12 小时前
在macOS上搭建C#集成开发环境指南
开发语言·macos·c#
Molesidy13 小时前
【Embedded System】【CMake】Windows下CMake+VSCode的开发环境搭建以及初步认识
ide·vscode·编辑器·cmake