Web Speech使用说明

发布日期：2023/5/28 12:26:28      浏览量：

Web Speech 语音输入

老版本中，如果我们要部署一个带有语音搜索功能的input，可用如下代码：

	
	

		<input id="speech" type="search"
	

	

		 x-webkit-speech speech />
	

然后通过webkitspeechchange事件来监听用户输入：

	
	

		var speech = document.getElementById(’speech’);
	

	

		speech.onwebkitspeechchange = funciton(){
	

	

		
	

	

		}
	

注意：目前只有Chrome支持这种带语音的输入框。

在新版本中，我们还可以用JavaScript操作语音输入，就是通过Web Speech这个API。（也是只有Chrome支持）

主要有两部分：

• 语言识别（将所说的转换成文本文字）
• 语言合成（将文本文字读出来）

1、语言识别

1.1 SpeechRecognition对象

这个API部署在SpeechRecognition对象之上。

1.1.1 检测是否支持

	
	

		if (’webkitSpeechRecognition’ in window) {
	

	

		 //  支持
	

	

		}
	

确定支持后，新建一个SpeedchRecognition的实例对象：

	
	

		if (’webkitSpeechRecognition’ in window) {
	

	

		 var recognition = new webkitSpeechRecognition();
	

	

		}
	

1.1.2 属性和方法

属性

• continous：是否让浏览器始终进行语言识别，默认为false，也就是说，当用户停止说话时，语音识别就停止了。这种模式适合处理短输入的字段。
• maxAlternatives：设置返回的最大语音匹配结果数量，默认为1
• lang：设置语言类型，默认值就继承自HTML文档的根节点或者是祖先节点的语言设置。

方法

• start()：启动语音识别
• stop()：停止语音识别
• abort()：中止语音识别

1.1.3 事件

浏览器会询问用户是否许可浏览器获取麦克风数据
这个API提供了11个事件。

• audiostart：当开始获取音频时触发，也就是用户允许时。

• audioend：当获取音频结束时触发

• error：当发生错误时触发

• nomatch：当找不到与语音匹配的值时触发

• result： 当得到与语音匹配的值时触发，它传入的是一个SpeechRecognitionEvent对象，它的results属性就是语音匹配的结果数组，最匹配的结果排在第一位。该数组的每一个成员是SpeechRecognitionResult对象，该对象的transcript属性就是实际匹配的文本，confidence属性是可信度（在0到1之间）

• soundstart

• soundend

• speechstart

• speechend

• start：当开始识别语言时触发

• end：当语音识别断开时触发

看个实例：

	
	

		<input id="speech" type="search" 
	

	

		 x-webkit-speech speech />
	

	

		
	

	

		 var speech = document.getElementById(’speech’);
	

	

		if(’webkitSpeechRecognition’ in window) {
	

	

		 var recognition = new webkitSpeechRecognition();
	

	

		
	

	

		 recognition.onaudiostart = function(){
	

	

		 speech.value = ’开始录音’;
	

	

		 };
	

	

		
	

	

		 recognition.ononmatch = function(){
	

	

		 speech.value = ’没有匹配结果，请再次尝试’;
	

	

		 };
	

	

		
	

	

		 recognition.onerror = function(){
	

	

		 speech.value =’错误，请再次尝试’;
	

	

		 };
	

	

		
	

	

		 // 如果得到与语音匹配的值，则会触发result事件。
	

	

		
	

	

		 recognition.onresult = function(event){
	

	

		 if(event.results.length > 0) {
	

	

		 var results = event.results[0];
	

	

		 var topResult = results[0];
	

	

		
	

	

		 if(topResult.confidence > 0.5) {
	

	

		
	

	

		 } else {
	

	

		 speech.value = ’请再次尝试’;
	

	

		 }
	

	

		 }
	

	

		 }
	

	

		}
	

2、语音合成

语音合成只有Chrome和Safari支持。

2.1 SpeechSynthesisUtterance对象

打开控制台，黏贴下面的函数，然后调用：

	
	

		funciton speak(textToSpeak){
	

	

		 var newUtterance = new SpeechSynthesisUtterance();
	

	

		
	

	

		 newUtterance.text = textToSpeak;
	

	

		
	

	

		 window.speechSynthsisi.speak(newUtterance);
	

	

		}
	

2.1 SpeechSynthesisUtteranc的实例对象的属性

• text：识别的文本
• volume：音量（0~1）
• rate：发音速度
• pitch：音调
• voice：声音
• lang：语言类型

2.2 window.speechSynthesis.getVoices()

通过API提供给用户的声音在很大程度上取决于操作系统。谷歌有自己的一套给Chrome的默认声音，可以在Mac OS X，Windows和Ubuntu上使用。Mac OS X的声音也可用，所以和OSX的Safari的声音一样。你可以通过开发者工具的控制台看有哪种声音可用。

window.speechSynthesis.getVoices()用来获取发音列表，返回一个数组，每个元素的name属性表示声音名称

2.3 window.speechSynthsisi.speak()

window.speechSynthsisi.speak()方法是用于发音的。