HTML5语音识别 Demo

语音识别输入实践

最新推荐文章于 2025-12-02 15:55:42 发布

最新推荐文章于 2025-12-02 15:55:42 发布 · 280 阅读

文章标签：

#人工智能

部署运行你感兴趣的模型镜像

<html>  
    <head>  
      
    <script type='text/javascript'>  
    if (document.createElement("input").webkitSpeech === undefined) {    
        alert("很遗憾，你的浏览器不支持语音识别。");  
        }  
    else{  
        alert("尝试使用语言识别来输入内容吧");  
        }  
  
    //事件的触发（可使用下面的js调用完成）  
    /*  
    input.onwebkitspeechchange = function() {  
            alert("aaa");  
    */  
    };  
    </script>  
    <script>//这里的作用是文本框（搜索框）失去焦点的时候，值重新赋了下。这样语音再次输入就不会将以前的值去掉  
        document.querySelector("input[name='s']").addEventListener("blur",function(){this.value=this.value;});  
    </script>  
    </head>  
    <body>  
    <!--  
        <input name="s" type="text" x-webkit-speech x-webkit-grammar="builtin:translate" />  
        <input x-webkit-speech lang="zh-CN" />  
        <input x-webkit-speech x-webkit-grammar="bUIltin:search" />  
    -->  
    <form action="http://www.google.com/search" >  
        <input type="search" name="q" lang="zh-CN" x-webkit-speech x-webkit grammar="builtin:search" onwebkitspeechchange="startSearch(event)"/>  
    </form>  
    </body>  
</html>

您可能感兴趣的与本文相关的镜像