💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## 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()`方法是用于发音的。