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功能就可以了。
是不是很简单呢?
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。