html5输入语音输入,使用语音输入

HTML5语音识别原理是什么？可以很简单实现，但是具体原理是怎么样的?

原理：

主流的大词汇量语音识别系统多采用统计模式识别技术。典型的基于统计模式识别方法的 语音识别系统由以下几个基本模块所构成：

信号处理及特征提取模块。该模块的主要任务是从输入信号中提取特征，供声学模型处理。同时，它一般也包括了一些信号处理技术，以尽可能降低环境噪声、信道、说话人等因素对特征造成的影响。

统计声学模型。典型系统多采用基于一阶隐马尔科夫模型进行建模。

发音词典。发音词典包含系统所能处理的词汇集及其发音。发音词典实际提供了声学模型建模单元与语言模型建模单元间的映射。

语言模型。语言模型对系统所针对的语言进行建模。理论上，包括正则语言，上下文无关文法在内的各种语言模型都可以作为语言模型，但目前各种系统普遍采用的还是基于统计的N元文法及其变体。

解码器。解码器是语音识别系统的核心之一，其任务是对输入的信号，根据声学、语言模型及词典，寻找能够以最大概率输出该信号的词串。

以上是语音识别的各个组成部分，而离线的语音识别，应该也是基于以上的原理，而且在手机内部内置了语音的字典，从而实现无线的识别

如：

1、浏览器提供的功能，比如chrome，如果没有提供的话就不能用。

2、具体实现的细节主要是chrome的离线语音识别引擎。

3、调用系统api，浏览器是个app，可以访问所有底层的api，只要系统提供就可以实现。

相关代码如下：

!DOCTYPE HTML html head title简单通过html5实现语音识别/title script if (document.createElement(“input”).webkitSpeech === undefined) { alert(“Speech input is not supported in your browser.”); } /script /head body

input type=”text” name=”value_2″ x-webkit-speech/

/body /html

相关问答

Q1: 谷歌浏览器怎样设置支持html5语音输入

实现语音输入

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

只要在input元素上加上x-webkit-speech属性就可以了。如果你用的是xhtml，那么就需要这样写x-webkit-speech="x-webkit-speech";

lang 说明语音识别的语言种类

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

x-webkit-grammar 精确语音内容，如果是用搜索可以自动去掉 “的”之类的字

input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" /

onwebkitspeechchange事件，即语音发生变化时触发的事件，一般可以作为提交

input type="text" x-webkit-speech onwebkitspeechchange="$(this).closest('form').submit()"/

Q2: 如何实现HTML5语音识别功能

HTML5之语音识别实例

代码

input type="text" x-webkit-speech id="d1" lang="zh-CN" x-webkit-grammar="bUIltin:search" onwebkitspeechchange="foo()"/

script

function foo(){

var n = document.getElementById("d1").value;

if(n == "百度"){

window.location.href = "";

}else{

window.location.href = "";

}

}

/script

说明：

1）x-webkit-speech：语音识别支持属性

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

2）lang：设置语言种类，比如汉语:lang="ch-CN"

input type="text" x-webkit-speech lang="ch-CN"/

3） x-webkit-grammar ：语音输入语法

比如: x-webkit-grammar="bUIltin:search"使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如“的、啦”等

input type="text" x-webkit-speech lang="ch-CN" x-webkit-grammar="bUIltin:search"/

4） onwebkitspeechchange ：语音输入事件，当语音改变时触发

比如：onwebkitspeechchange="foo()" ，当停止语音时，会触发js中的foo()函数

input type="text" x-webkit-speech lang="ch-CN" x-webkit-grammar="bUIltin:search"

onwebkitspeechchange="foo()"/

此时，需要写相应的JavaScript函数foo()

script

function foo(){

//函数体，如下：

alert(8);

}

/script

Q3: html5可以做在线语音聊天功能吗

首先使用node.js 搭建一个简易的 websocket服务器：

var cons = new Array();var ws = require('ws').Server;var server = new ws({ port: 8888 });server.on('connection', function (ws) {console.log('new connection founded successfully');cons.push(ws);ws.on('message', function (data) {for (var i = 0; i cons.length; i++) {cons[i].send(data);}});ws.on('close', function () {for (var i = 0; i cons.length; i++) {if (cons[i] == ws) cons.splice(i, 1);}});});console.log('websocket-server running...');

接下来为了更容易理解， 我在这分为两个页面，一个为视频者页面，另一个是观看者页面

下面代码为视频者页面：

!DOCTYPE htmlhtml xmlns=""headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title/titlescript src="jQuery_1.8.2.min.js"/scriptscript type="text/javascript"$(function () {var video = document.getElementById("video");var canvas = document.getElementById("canvas"),context = canvas.getContext("2d");var w;if (navigator.webkitGetUserMedia) {navigator.webkitGetUserMedia({ video: true }, function (stream) {video.src = window.webkitURL.createObjectURL(stream);video.play();w = new WebSocket(url);w.onopen = function () {sendImg();}w.onmessage = function (e) {sendImg();}}, function () {console.log("video error");});var host = 'localhost';var port = 8888;var url = 'ws://' + host + ':' + port + '/';function sendImg() {context.drawImage(video, 0, 0, 320, 320);var imgData = canvas.toDataURL();w.send(imgData);}}});/script/headbodyvideo id="video" width="640" height="480" style="background:#000;" autoplay/videocanvas style="display:none" id="canvas" width="320" height="320"/canvas/body/html

接下来是观看者页面：

!DOCTYPE htmlhtml xmlns=""headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title/titlescript src="jQuery_1.8.2.min.js"/scriptscript$(function () {var host = 'localhost';var port = 8888;var url = 'ws://' + host + ':' + port + '/';var w = new WebSocket(url);w.onmessage = function (e) {$("#canvas").attr("src", e.data);}});/script/headbodyimg id="canvas" width="320" height="320" / /body/html注：希望可以帮到你!