zoukankan      html  css  js  c++  java
  • HTML5新功能

    1、 x-webkit-speech

    HTML5的Input tag新提供x-webkit-speech语法,目前只能在Chrome 11以后的浏览器上使用,能让我们将语音输入的功能很简单的带到我们的网站中。最简易的运用方式是像下面这样将x-webkit-speech加在input tag后方就可以了。

    1 <html>
    2 <input x-webkit-speech>
    3 </body>
    4 </html>

     运行起来后我们可以在输入框后方看到麦克风的图示.


     

    点选麦克风的图示即可啟动语音输入功能。


     


     

    若有需要这边我们可以再进一步透过lang指定语音输入所要使用的语系,像是带入lang= "zh-CN"的话,语音输入所识别出来的文字就会变成简体字。

    1 <html>
    2 <body>
    3 <input x-webkit-speech lang = "zh-CN">
    4 </body>
    5 </html>


     

    此外我们也可以透过onwebkitspeechchange去為语音输入时加些对应的动作。
     

     1 <html>
     2 <body>
     3 <input x-webkit-speech onwebkitspeechchange="onChange()">
     4 </body>
     5 </html>
     6  
     7 <script>
     8 function onChange() {
     9 alert('changed');
    10 }
    11 </script>


     

    x-webkit-speech使用上就是那麼简单,但是最后这边还是要再提一下,x-webkit-speech语法并不是所有瀏览器都可以支援的,因此我们在使用上必须针对与法是否支援做些检查,有需要的话检查的动作可参阅下面的简易范例。

     1 <html>
     2 <body onLoad = "OnLoad();">
     3 <input x-webkit-speech>
     4 </body>
     5 </html>
     6 <script>
     7 function OnLoad()
     8 {
     9 if (document.createElement("input").webkitSpeech === undefined) { 
    10 alert("Speech input is not supported in your browser."); 
    11 }
    12 } 
    13 </script>


     

    若有在用点部落的,我们也可以用这个语法来加强点部落的搜寻功能,只要在网站管理页面的Custom HTML/Script区域将textSearch的element啟用webkitSpeech功能就可以了。


     

    是不是很简单呢?

  • 相关阅读:
    iOS APM性能统计
    iOS promise
    静态代码检测工具Infer的部署
    ES读写数据的工作原理
    关于 Elasticsearch 内存占用及分配
    Elasticsearch中数据是如何存储的
    ES中的选举机制
    .net core 3.1 webapi解决跨域问题 GET DELETE POST PUT等
    .net framework WEBAPI跨域问题
    Angular前端项目发布到IIS
  • 原文地址:https://www.cnblogs.com/hl-520/p/4244151.html
Copyright © 2011-2022 走看看