码迷,mamicode.com
首页 > Web开发 > 详细

HTML5新功能

时间:2015-01-23 16:05:09      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

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功能就可以了。

 

技术分享
 

是不是很简单呢?

 

技术分享

HTML5新功能

标签:

原文地址:http://www.cnblogs.com/hl-520/p/4244151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!