前端 文本转语音，语音播放

配景：

   一条信息使用语音播放。这篇文章先容了如何使用JavaScript和Web Speech API实现语音播报功能。Web Speech API 提供了强大的语音合乐成能，使得开辟者可以轻松地将文本转换为语音。
  本文不仅先容了基本的使用方法，还展示了如何选择差异的语音、监听变乱以及在现实中的应用场景。希望您能够全面了解和掌握 JavaScript 语音播报的实现方法。
  效果展示：

一、配景

   目前笔墨转语音即语音合成技术现在已经很成熟了，像百度、讯飞等都提供了相干的服务，支持将笔墨转换成各种形式的语音，通常这些服务都必要付费使用，假如对语音要求不高，而且又想节省成本，那么可以直接使用浏览器的语音合乐成能。 
  HTML5中相干的API现实上有两类，一类是 语音识别Speech Recognition，指的是“语音转笔墨”；另外一个就是 语音合成Speech Synthesis，指的是“笔墨变语音”。
  有些浏览器已经支持将笔墨转换为语音的功能，下面来看看官方的先容：
   The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition.)
  Web语音API使您能够将语音数据合并到Web应用步调中。Web语音API有两部分：语音合成（文本到语音）和语音识别（异步语音识别）
  官网链接：点击跳转

二、语音合成(笔墨转语音)  

   Speech synthesis is accessed via the SpeechSynthesis interface, a text-to-speech component that allows programs to read out their text content (normally via the device's default speech synthesizer.) Different voice types are represented by SpeechSynthesisVoice objects, and different parts of text that you want to be spoken are represented by SpeechSynthesisUtterance objects. You can get these spoken by passing them to the SpeechSynthesis.speak() method.
  语音合成是通过 SpeechSynthesis 接口举行访问，它提供了笔墨到语音（TTS）的能力，这使得步调能够读出它们的笔墨内容（通常使用设备默认的语音合成器）。
  差异的声音类型通过 SpeechSynthesisVoice 对象举行表示，
  差异部分的笔墨则由 SpeechSynthesisUtterance 对象来表示，
  最后可以通过 SpeechSynthesis.speak() 方法来产生语音。
  语音合成主要涉及到上面的三个对象：

SpeechSynthesis 、SpeechSynthesisVoice 和 SpeechSynthesisUtterance 。

1.1、SpeechSynthesis  

官网链接：点击跳转 

   SpeechSynthesis： 负责管理和播放语音合成的音频流。
  

  1.2、SpeechSynthesisVoice

官网链接：点击跳转

 
   SpeechSynthesis.getVoices()
  它有5个只读的属性，分别为 default、lang、name、localService、voiceURI.
  

  1.3、 SpeechSynthesisUtterance 

官网链接：点击跳转

 
   SpeechSynthesisUtterance： 代表一个语音合成请求，可以设置文本、语言、音量、速率和音调。
  它有6个属性，分别如下：
  

• lang：读取时的语言
  
• pitch：声音的音高，取值0~2 ，正常音高为1
  
• rate：读取的语速，取值0.1~10 ，正常语速值为1
  
• text：要合成语音的笔墨内容
  
• voice：读取笔墨的语音服务，默认为 SpeechSynthesisVoice 的属性值为 default 的那个
  
• volume：读取时声音的音量，取值0~1，正常音量为1
  

  除了上面的属性外，还有7个变乱方法，分别如下：
  

• onboundary：当播放至一个词或句子结尾时触发
  
• onend：语音播放结束时触发
  
• onerror：语音播放错误时触发
  
• onmark：当语音播放至 mark 标志时触发
  
• onpause：停息语音播放时触发
  
• onresume：规复语音播放时触发
  
• onstart：开始语音播放时触发
  

  关于SpeechSynthesisVoice 的属性和方法，可以直接在 console 中查看，如下：
   

  核心思路：
   一个简单的语音播报应用。用户可以输入文本，选择语音，并点击按钮举行播报。 
  实现思路：
  

• 查抄浏览器是否支持 Web Speech API。
  
• 创建SpeechSynthesisUtterance实例。
  
• 设置文本、语言、音量、速率和音调。
  
• 调用speechSynthesis.speak()方法举行语音播报。
  

  核心代码：

1. var utterance= new window.SpeechSynthesisUtterance('扫码成功，微信到账100元！');
2. window.speechSynthesis.speak(utterance); //这样就会有个美女姐姐语音朗读

复制代码

1. //核心代码
2.   // 创建一个新的 SpeechSynthesisUtterance 实例
3.   let utterance = new SpeechSynthesisUtterance();
4.   // 设置要播报的文本
5.   utterance.text = "微信到账100元.";
6.   // 设置语言
7.   utterance.lang = "en-US";
8.   // 设置音量（0 到 1）
9.   utterance.volume = 1;
10.   // 设置速率（0.1 到 10）
11.   utterance.rate = 1;
12.   // 设置音调（0 到 2）
13.   utterance.pitch = 1;
14.   // 播报文本
15.   window.speechSynthesis.speak(utterance);

复制代码

封装方法：speak（）

1. /**
2. * @description 文字转语音方法
3. * @public
4. * @param { text, rate, lang, volume, pitch } object
5. * @param  text 要合成的文字内容，字符串
6. * @param  rate 读取文字的语速 0.1~10  正常1
7. * @param  lang 读取文字时的语言
8. * @param  volume  读取时声音的音量 0~1  正常1
9. * @param  pitch  读取时声音的音高 0~2  正常1
10. * @returns SpeechSynthesisUtterance
11. */
12. function speak({ text, speechRate, lang, volume, pitch }, endEvent, startEvent) {
13.     if (!window.SpeechSynthesisUtterance) {
14.         console.warn('当前浏览器不支持文字转语音服务')
15.         return;
16.     }
17.     if (!text) {
18.         return;
19.     }
20.     const speechUtterance = new SpeechSynthesisUtterance();
21.     speechUtterance.text = text;
22.     speechUtterance.rate = speechRate || 1;
23.     speechUtterance.lang = lang || 'zh-CN';
24.     speechUtterance.volume = volume || 1;
25.     speechUtterance.pitch = pitch || 1;
26.     speechUtterance.onend = function() {
27.         endEvent && endEvent();
28.     };
29.     speechUtterance.onstart = function() {
30.         startEvent && startEvent();
31.     };
32.     speechSynthesis.speak(speechUtterance);
33.     return speechUtterance;
34. }

复制代码

调用方法：speak（）

1. //调用封装的方法
2. speak(
3.     {
4.       text: "微信到账100元",
5.     },
6.     function () {
7.       console.log("语音播放结束");
8.     },
9.     function () {
10.       console.log("语音开始播放");
11.     }
12.   );

复制代码

同时控制台会依次输出下面的信息：
   语音开始播放
  语音播放结束 
  三、语音合成的高级功能

选择差异的语音

Web Speech API 答应选择差异的语音来播报文本。可以使用speechSynthesis.getVoices()方法获取所有可用的语音，并设置SpeechSynthesisUtterance实例的voice属性。

1. let voices = window.speechSynthesis.getVoices();
3. utterance.voice = voices.find(voice => voice.name === 'Google US English');

复制代码

监听变乱

可以为SpeechSynthesisUtterance实例添加变乱监听器，以便在语音播报过程中执行特定的操纵。例如，可以监听start、end、error等变乱。

1. utterance.onstart = function(event) {
2.     console.log('Speech has started');
3. };
5. utterance.onend = function(event) {
6.     console.log('Speech has ended');
7. };
9. utterance.onerror = function(event) {
10.     console.error('Speech synthesis error', event);
11. };

复制代码

应用场景

   当顾客付款乐成后，必要系统主动播报收款的金额，此中付款金额是不固定的，比如1元、2元、3.2元等等 
  假如是相对固定的场景，而且语音有限的情况下，可以采用录制的方式，即先录制好所有的音频资源，然后根据业务场景播放相应的音频即可；但是假如场景不固定，必要的语音也不一样时，采用录制的方式的话，音频资源将会非常多，而且还可能会不全。
    语音播报功能在无障碍辅助（Accessibility）方面具有紧张意义。它可以帮助视障用户更好地访问和明白网页内容。 
    在线教诲平台中，语音播报功能可以用来朗读课文、单词发音等，帮助学生更好地学习。 
     语音播报是智能助手和聊天机器人中的紧张功能之一。通过语音反馈，用户可以得到更自然和互动的体验。
   
  四、语音识别(语音转笔墨) 

   Speech recognition is accessed via the SpeechRecognition interface, which provides the ability to recognize voice context from an audio input (normally via the device's default speech recognition service) and respond appropriately. Generally you'll use the interface's constructor to create a new SpeechRecognition object, which has a number of event handlers available for detecting when speech is input through the device's microphone. The SpeechGrammar interface represents a container for a particular set of grammar that your app should recognize. Grammar is defined using JSpeech Grammar Format (JSGF.)
  语音识别是通过SpeechRecognition接口访问的，该接口提供了从音频输入中识别语音上下文（通常通过设备的默认语音识别服务）并做出适当相应的能力。通常，您将使用接口的构造函数创建一个新的SpeechRecognition对象，该对象有许多变乱处理惩罚步调可用于检测何时通过设备的麦克风输入语音。SpeechGrammar界面代表了应用步调应该识别的特定语法集的容器。语法是使用JSpeech语法格式（JSGF）定义的
  官网链接：点击跳转

点击跳转:点击跳转 

 
   假如你要使用SpeechRecognitionAPI，请务必举行充实的测试和容错处理惩罚，以确保你的应用在差异浏览器和设备上都能正常运行。
  
  SpeechRecognition是一种有用的 JavaScript API，它可以使您的 Web 应用步调更加易于使用，并为用户提供更加人性化的体验。
  固然 SpeechRecognition有一些局限性，但它仍然是一种有用的技术，可以让您的应用步调更加智能化。
  核心代码：

1. //创建 SpeechRecognition 对象
2. let recognition = new SpeechRecognition();//window.SpeechRecognition
3. //设置语言,如果未指定语言，则 WebkitSpeechRecognition 默认使用浏览器的语言。
4. recognition.lang = window.navigator.language || 'en-US'; // 设置为语言
5. recognition .continuous = true;
6. //开始语音识别
7. recognition .start();
8. //停止识别
9. recognition .stop();
10. //监听事件：使用 onresult 事件来监听语音识别结果。当识别成功时，该事件会触发，并将识别结果作为参数传递给事件处理程序。
11. recognition .onresult = function(event) {
12.     console.log(event);//识别结果
13. }

复制代码

SpeechRecognition()局限性：

以下是一些常见的局限性：
   

• 浏览器支持：SpeechRecognition API 只能在 Webkit 浏览器中使用，因此无法在其他浏览器中使用。
  
• 语音识别质量：语音识别技术的质量取决于多个因素，例如用户的发音、语音识别引擎的质量等。因此，SpeechRecognition可能无法准确地识别所有用户的语音。
  
• 隐私问题：由于 SpeechRecognition必要访问用户的麦克风，因此可能会引起隐私问题。假如您的应用步调必要使用 SpeechRecognition，请确保遵照适当的隐私掩护步伐。
  

  浏览器兼容性：

   Features listed as widely available have a consistent history of support in each of the Baseline browsers for at least 2.5 years.
  Features listed as newly available work in at least the latest stable version of each of the Baseline browsers, but may not work with older browsers and devices.
  Features listed with limited availability are not yet available in all browsers.
  列出的广泛可用的功能在每个Baseline浏览器中都有至少2.5年的一致支持历史。
列出的新功能至少适用于每个Baseline浏览器的最新稳定版本，但可能不适用于较旧的浏览器和设备。
列出的可用性有限的功能尚未在所有浏览器中可用。
  

   

• Chrome 25+
  
• Edge 79+
  
• Firefox 44+
  
• Opera 27+
  
• Safari 6+
  

  必要注意的是，差异浏览器可能有差异的语音识别引擎，因此识别效果可能会有所差异。此外，由于SpeechRecognition API是实行性的，因此其举动和特性可能会在未来版本中发生变化。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。