zoukankan      html  css  js  c++  java
  • xwebkitspeech 语音输入功能

    最近发现各大网站陆续出现了搜索框边上一个小话筒的语音输入功能。网上找了下一定要webkit内核浏览器才能使用,不过win下的safari不知道为什么没有显示,回头看下UA。

    检测浏览器是否支持

    1 if (document.createElement("input").webkitSpeech === undefined) {
    2     alert("Speech input is not supported in your browser.");
    3 } 

    下面说下怎么实现: 

    显示出来了吧,其实很简单。

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

    就一句,当然还有别的属性可以添加:

    lang

    设置语言种类: 

    1 <input type="text" x-webkit-speech lang="zh-CN" />

    onwebkitspeechchange

    语音输入事件,当发声语音改变时触发: 

    1 <input type="text" x-webkit-speech onwebkitspeechchange="foo()" />

    1 function foo(){
    2   alert('changed');
    3 } 
    x-webkit-grammar

    语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如「的」 

    1 <input type="text" x-webkit-speech x-webkit-grammar="builtin:search" /> 


    PS : 如果原input中value不为空,输入会直接添加在原有文字后面。既然用webkit就要用placeholder了,不要再使用value为作输入提示了。 
  • 相关阅读:
    [SDOI2015] 序列统计
    [BZOJ3514] Codechef MARCH14 GERALD07加强版
    [CF1082E] Increasing Frequency
    [CF1093G] Multidimensional Queries
    [HNOI2013] 切糕
    [HEOI2017] 寿司餐厅 + 最大权闭合子图的总结
    [BZOJ3771] Triple
    [HEOI2016] 字符串
    [总结] 后缀数组学习笔记
    [Luogu 3613] 睡觉困难综合征
  • 原文地址:https://www.cnblogs.com/qzsonline/p/2344832.html
Copyright © 2011-2022 走看看