分类 HTML 下的文章

x-webkit-speech 实现语音输入功能

使用Chrome浏览器且细心的童鞋应该都会发现一些大的网站已经有了语音搜索功能了,例如淘宝等等。不过只有Chorme11以上才能够支持。

可以用Chrome浏览器点击话筒体验一下语音搜索。

DEMO:

实现起来非常简单,为input添加名为 x-webkit-speech 的属性就行了。

<input type="text" x-webkit-speech />

相关属性设置:

  • 设置语言种类:lang:
    <input type="text" x-webkit-speech lang="zh-CN" />
  • 设置发声语音改变时触发:onwebkitspeechchange
    <input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
  • 语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如“的”、“啦”:x-webkit-grammar
    <input type="text" class="text"  x-webkit-speech x-webkit-grammar="bUIltin:search">

需要注意的是,这个语音识别实际上是调用谷歌的api,语言识别率还不错,但是因为“你懂的”原因。就现阶段来说,这个功能暂时还只能说趣味性大于实用性

再话痨一句,就是当具有语音搜索的页面是iframe页面时,点击麦克风后,“请开始说话”这浮动层就不跟随input输入框了。

如何让暂不支持HTML5的浏览器识别HTML5标签

由于HTML5近两年的火爆程度,越来越多的人员加入到HTML5的队伍中。各个浏览器厂商也在积极跟进,但是在中国市场上,依旧占着大部分市场的还是IE系列浏览器,IE6/IE7/IE8这些过时浏览器依旧是顽疾在坚挺这。这也导致前端开发人员必须想办法让这些浏览器兼容HTML5的新标签,例如header、nav、footer等标签。

下面介绍一下如何让这些浏览器兼容HTML5标签。原理是通过JS模拟这些新的标签并输出,下面是JS代码:

<!--[if IE]> 
    <script> 
    (function(){
if(!/*@cc_on!@*/0)return;var e = 
"abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,
footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,
video".split(','),i=e.length;while(i--){document.createElement(e[i])}})() 
    </script> 
<![endif]-->

 

最后还是要定义一下CSS样式:

article,aside,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section {  
    display:block; 
}

 

这样就能成功让IE浏览器全面识别HTML5的新标签了。

理想就在那里,实现的过程才是真正的收获

从决定将这个网站改版到新的页面规划、功能的实现、最后到整体上线。经历了近一个月的时间,可以说这是我第一次如此系统的、完整的做完一件事。真的学到很多很多。知道自己想要走的方向,明白要经历的路有多长...

08年,无意中看到别人用简单的HTML实现简单的网页效果,控制着文字的大小、颜色。很震撼!强烈感觉到这就是我最感兴趣的东西,是我寻找很久的东西!依然还记得学会HTML语言的欣喜若狂,全身细胞都在跳动的感觉。如今回头看看几年前写的代码,布局的页面,发现我对代码的热情没有一丝一毫的减少,我想这是我最自豪的事。

由于并非科班出生和迫于就业压力,毕业以后从事了网页设计师这一行。潜意识觉得这个行业会和代码打上交道!然后过了一年设计兼重构的工作,学会了设计,学会了DIV+CSS,学会了使用JS、JQ,学会了制作FLASH动画,学会了ASP的皮毛,学会了PHP的皮毛...哈哈,现在想来真的应该感谢那一年的工作经历。

四年!一路走来,有过快乐,有过痛苦,有过心酸,有过沮丧。不过幸好,我们都还活着,还可以坐在家里写着文字,看着代码,这样就足够了。

咳咳,本来就是想分享下这个网站建设的心得,结果成追忆了。我勒了个去

本来是打算这个站用HTML5+CSS3来写的。等整个网站架起来以后,才发现。原来我对它们的认识真的只是皮毛中的皮毛...无奈,但请继续加油,对自己说!

HTML5,Start!