【javascript】实现语音识别

<html><head><script type='text/javascript'>if (document.createElement("input").webkitSpeech === undefined) {alert("很遗憾，你的浏览器不支持语音识别。");...

不死鸟.亚历山大.狼崽子

2935人浏览 · 2020-02-19 13:34:36

不死鸟.亚历山大.狼崽子 · 2020-02-19 13:34:36 发布

你能用这儿的代码片段轻松地为个人网站添加语音识别功能，而且仅用原生的javascript就可实现。目前这些代码只在Chrome下工作

<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>

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐