HTML5 视频语音检索(淘宝店视频语音搜素)

日期:2021-01-20 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

Html5适用视频语音检索,可是的是仅有webkit关键的访问器才可以应用。用法很简易  只必须在input加上特性x-webkit-speech便可,事例以下:   <input type="text" x-webkit-speech />

这样你的键入框右侧里就多了个「小麦克风」,点一下的情况下就会提醒  

这时候讲出来鉴别后便可以了,如淘宝店视频语音搜素:


视频语音键入别的特性:   lang  便是語言类型

能够操纵键入框里边的视频语音的語言类型,比如 <input type="text" x-webkit-speech lang="zh-CN"/>

现阶段已知的仅有onwebkitspeechchange,说白了,便是视频语音产生转变时开启的恶性事件,1般能够做为递交 <input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/> 这样说完之后就全自动检索了。
x-webkit-grammar :这个并不是视频语音检索用的特性,可是能够操纵这个键入的英语的语法,比如在做检索框的话便可以用 <input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" />   x-webkit-grammar:

使得视频语音键入的內容尽可能挨近检索內容,除去过剩的标识符,比如「的」。

下面做1个小事例检测1下

拷贝编码
编码以下:

<html>
<body>
<inputtype="text"accesskey="s" autofocus="true" autocomplete="off"name="value_2"id="value_2"x-webkit-speech lang="zh-CN" x-webkit-grammar="bUIltin:search">
<button type="submit">搜 索</button>
</body>
</html>

实际效果以下: