HTML5语音识别 Demo

最新推荐文章于 2023-07-07 10:51:53 发布

Techzero

最新推荐文章于 2023-07-07 10:51:53 发布

阅读量3k

点赞数

分类专栏：互联网文章标签： HTML5 浏览器搜索语音

本文链接：https://blog.csdn.net/techzero/article/details/9362235

版权

互联网专栏收录该内容

25 篇文章 1 订阅

订阅专栏

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

Techzero

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5语音识别 Demo

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

扫一扫