试玩HTML5 Web Speech API

最新推荐文章于 2024-07-24 20:44:50 发布

pk8893163

最新推荐文章于 2024-07-24 20:44:50 发布

阅读量1.2k

点赞数

分类专栏： html5 文章标签： html5 HTML5 Html5 Web Speech API

本文链接：https://blog.csdn.net/pk8893163/article/details/8530348

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

google chrome桌面版最近提供了Web Speech API，手痒想尝试一下这新鲜玩意，跟以前的input框的语音输入有什么区别呢？上代码最直接！

	<body>
		
		<div id="result" >
			<span class="final" id="final_span"></span>
			<span class="interim" id="interim_span"></span>
			
		</div>
		
		<button id="startBtn" >Start!</button>
		
	</body>

一段简单的前端HTML

/**
 * @author junhong
 */

$(document).ready(function(){
	

	var final_span = $('#final_span');
	var interim_span = $('#interim_span');
	var final_transcript = "";
	
	$('#startBtn').bind('click', function(event) {
		BtnHandle();
	});
	 
	
	if (!('webkitSpeechRecognition' in window)	) {
			console.log("no webkitSpeechRecognition in window");
		}
		else{
			console.log(" webkitSpeechRecognition in window");
			var recognition = new webkitSpeechRecognition();
			recognition.continuous = true;
			recognition.interimResults = true;
			recognition.land = "en-US";         //介是语言
			
			
			recognition.onresult = function(event){
				
		
				var interim_transcript = ''; //介是放recognition在识别时产生的未最后确定识别的字符串，类似缓冲
		
				for (var i = event.resultIndex; i < event.results.length; ++i) {
					if (event.results[i].isFinal) {
						final_transcript += event.results[i][0].transcript;//最后确定的字符串 
						
					} else {
						interim_transcript += event.results[i][0].transcript;//未到最后一个字符就累加缓冲字符串
					}
					
				}
				//console.log(final_transcript);
				
				final_transcript = capitalize(final_transcript);
				final_span.html(final_transcript+".");
				interim_span.html(linebreak(interim_transcript));
				

				};

			};
			recognition.onerror = function(event){  //处理错误的地方};
			recognition.onend = function(){
				
			};
			
	
	
	function BtnHandle(){
		recognition.start();
	};
	

	var two_line = /\n\n/g;
	var one_line = /\n/g;
	function linebreak(s) {
		return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
	}

	var first_char = /\S/;
	function capitalize(s) {
		return s.replace(first_char, function(m) {
			return m.toUpperCase();
		});
	}

	
});

每当onstart开始，麦克风就开始请求监听麦克风，期间获取声音后上传到谷歌的服务器进行识别，不是本地识别，所以网络因素对识别速度影响很大，好的话即说即有，慢的话会卡很久不动，不过放心，到最后它还是会出结果，只是延迟了。

onresult不断返回的句柄里的result是个SpeechRecognitionResultList，进行识开始录音后返回的SpeechRecognitionResultList数组，短时间内随着你讲的东西越多，它会在里面多增加SpeechRecognitionResult，里面有个transcript就存放着一小段识别出来的字符串，把这些transcript连起来就是你说的话了。

英文：

白话：