1. 程式人生 > >如何利用input標籤新增語音錄入功能

如何利用input標籤新增語音錄入功能

相信大家現在在瀏覽網頁時都不難看到一些網站的文字框中帶有一個話筒(點選話筒可以語音輸入內容到文字框中),下面給大家介紹如何使自己的網站也支援語音輸入內容。

現在各大網站都在搜尋框中加入了語音輸入功能,不過目前只有Chrome 11及以上版本才支援。可以用chrome瀏覽器在這裡試試效果,點選話筒即可:

實現起來也非常簡單,為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()" />

x-webkit-grammar
語音輸入語法,"builtin:search”值使得語音輸入的內容儘量靠近搜尋內容,去除多餘的字元,例如
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
還有個值:"builtin:translate”看到taobao在用,但目前還不清楚是什麼意義,有時間再仔細看看W3C的文件。

測試了下效果,語音識別率還不錯,但中英夾雜的時候就很悲劇了,而且該服務需要走google的伺服器所以有時響應速度很慢,另外在mac中遇到提示“麥克風無法使用”的情況,猜測可能存在一些硬體相容性問題。總的來說是趣味性大於實用性;比較期待能在手機瀏覽器上實現這個功能,可以做一些比較有趣的應用。

補充: 經過多個瀏覽器測試 均未顯示小話筒  查資料發現  其實所謂的語音識別 是我們在說話的時候 谷歌瀏覽器接收語音.然後傳送到谷歌後臺,谷歌自己寫的語音識別系統,然後再將資料返回,而現在的谷歌需要翻牆才能訪問官網,所以此功能失效,有興趣的去看另一個部落格吧 .,終結....

相關推薦

如何利用input標籤新增語音錄入功能

相信大家現在在瀏覽網頁時都不難看到一些網站的文字框中帶有一個話筒(點選話筒可以語音輸入內容到文字框中),下面給大家介紹如何使自己的網站也支援語音輸入內容。現在各大網站都在搜尋框中加入了語音輸入功能,不過目前只有Chrome 11及以上版本才支援。可以用chrome瀏覽器在這裡

input標籤之外是否一定新增form標籤

原文轉載自:https://blog.csdn.net/lamanchas/article/details/78753031 input標籤外是否新增form標籤需要按情形區分:應用場景的區別:1.所有向後臺提交資料(包括原生和ajax提交)的input都建議用form包裹,2.如果只是用來做前臺互動效果則

vue 動態生成input進行操作——簡單實現新增刪除聯絡人功能

實現類似的如圖功能: 程式碼如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改實現新增聯絡人

webapi 利用 ActionFilter 為 ASP.NET Web API 新增 GZip 壓縮功能

webapi 利用 ActionFilter 為 ASP.NET Web API 新增 GZip 壓縮功能 先直接上程式碼 /// <summary> /// 對結果進行壓縮處理 /// </summary> public class De

vue專案中實現新增收藏的功能,以及利用vue-resource傳送請求

1.新增收藏功能     建立一張表,儲存歌手id,使用者id,利用外來鍵將歌手錶與使用者表關聯起來。如果新增收藏之後,為該使用者新增一條資料,取消收藏後,將該條資料刪除。     當用戶登入之後才能顯示歌手列表中該使用者已經收藏過的歌手,然後將這些收

html移動應用 input 標籤 清除按鈕功能如何實現(不觸發鍵盤)

有個需求是:輸入框有文字的時候就顯示清除按鈕,沒有文字則隱藏清除按鈕,點選清除按鈕不能影響鍵盤彈出的狀態。 網上有css實現自動顯示和隱藏清除按鈕的方案,但是考慮到相容性,我們還是使用js來實現。   css body{     &nbs

利用js動態新增標籤,並且使用點選效果為其新增和移除class

js檔案 $(function () { $.ajax({ type: "post", url: purl+"/news/categorys", datatype: "json", succ

如何給自己的微信機器人新增語音識別和文字識別的功能

前言:這是我幾個月前一邊工作,一邊搗鼓的個人專案,一直沒有時間去寫點總結,也許是我這個人比較懶吧,不然也不會做出這種東西,哈哈哈。記得那時閒來無事,自己又有許多奇思異想,由於自己之前使用itchat做了個可以接管微信的聊天機器人,我就想能不能給自己的機器人加一些

RDIFramework.NET ━ .NET快速資訊化系統開發框架 V3.2-> “Tab”標籤新增可“最大化”顯示功能

  最大化工作區的功能是非常必要的,特別是當模組功能比較多時,把工作區最大的展現出來就變得很重要,RDIFramework.NET V3.2版本對工作區新增了最大功能,最大化工作區後如下圖所示:   具體使用的是layout佈局,程式碼參考:    相關文章:      一路走來數

使用jquery給input 標籤新增屬性

現:            1.<input type="text" id=-"cert" /> 想要變成: 2.<input type="text" id="cert" readOnly="readOnly"> 在js中新增標籤 1轉換

去除input標籤/button按鈕原本樣式 並利用js賦值,select 中Option的增加與刪除

-----------input--------- <input   id="show" type="text" style="border-left: 0; border-right: 0;

easyui 動態新增input標籤

 動態新增easyui控制元件<input class=" easyui-textbox" > 這樣是無效的,因為easyui沒有實時監控,所以必須動態渲染$.parser.parse(); $.parser.parse(context)  //context 

利用Javascript來修改file型別input標籤的樣式

問題描述: 一般情況下,利用file型別的input瀏覽選擇檔案,再配合form就可以實現檔案的上傳功能。實現出的效果如下圖:(以csdn寫部落格上傳圖片時的瀏覽框為例) 在實際的開發情況中,為了配合整個網頁的風格,也為了讓瀏覽框更美觀,需要對file型別的input進行

Js給表格每行動態新增input標籤

function InserTab() { var trLen = $("#tab1 tr").length; var rowT = "<tr><td><input type=text style='width:9

Label標籤結合input標籤使用功能

在<form>表單中的input標籤前邊經常帶有註釋的文字,比如使用者名稱註冊時,我們要求瀏覽者填寫使用者名稱,我們會在對應的 input 前面加上 "姓名:",瀏覽者就知道在哪個文字框中輸入相應的內容。 那麼,我們在填寫註釋文字的時候,如果選擇直接在<

【jQuery】利用jQuery實現“記住我”的功能

jquer sms sep jquery實現 .com script lis put bar 【1】先下載jQuery.cookie插件:使用幫助請參考鏈接(https://github.com/carhartl/jquery-cookie)。 【2】安裝插件:

利用 Gearman 實現系統錯誤報警功能

-m bre load() 區別 inf .cn cnblogs 短信 date Gearman 是什麽? Gearman是一個用來把工作委派給其他機器、分布式的調用更適合做某項工作的機器、並發的做某項工作在多個調用間做負載均衡、或用來在調用其它語言的函數的系統。 G

集成Android免費語音合成功能(在線、離線、離在線融合)

com nvi sid 審核 contacts lai 音量 ant demo 集成Android免費語音合成功能(在線、離線、離在線融合),有這一篇文章就夠了(離線)集成Android免費語音合成功能(在線、離線、離在線融合),有這一篇文章就夠了(離在線融合) 轉

iOS中 語音識別功能語音轉文字教程具體解釋 韓俊強的博客

rdd tex forkey dex errortype map pin ins prop 原文地址:http://blog.csdn.net/qq_31810357/article/details/51111702前言:近期研究了一下語音識別,從百度語音識別到訊飛語音

Unity中使用百度中文語音識別功能

來源 openapi ner key nbsp 語音識別 ann .text esp 下面是API類 Asr.cs using System; using System.Collections; using System.Collections.Generic;