使用Google Chrome Web Speech API进行文本转语音转换

现在，有声读物更受读者的欢迎，因为他们可以在听的同时进行任何工作来获取知识。此外，一些网站会在每篇文章中添加文章的音频，因此，如果用户不想阅读文章，他们可以听它。

要将普通文本转换为语音，我们需要使用Google Chrome的Web Speech API。在本教程中，我们将学习如何使用Google Chrome的Web Speech API将文本转换为语音。

语法

用户可以按照下面的语法来使用Google Chrome的Web Speech API进行文本转语音转换。

var synth = window.speechSynthesis;
var speechOBj = new SpeechSynthesisUtterance(text);
synth.speak(speechOBj);

在上面的语法中，我们初始化了SpeechSynthesisUtterance（）对象并将文本作为参数传递。之后，我们使用speak（）方法将文本转换为语音。

示例1

下面的示例演示了使用Google Chrome Web Speech API将文本转换为语音的基本用法。我们使用HTML的“textarea”标签接收用户的文本输入。

在JavaScript中，我们从“textarea”输入字段中访问文本。之后，每当用户单击提交按钮时，我们将SpeechSynthesisUtterance的新对象初始化为“textarea”输入字段的文本值。此外，我们使用speak（）方法将文本转换为语音，用户可以在输出中观察到。

<html>
<body>
   <h3>使用Google Chrome Web Speech API进行文本转语音转换</h3>
   <div class = "container">
      <textarea name = "text" id = "text" cols = "30" rows = "10"> 添加文本以阅读。 </textarea>
      <br> <br>
      <button id = "speak"> 朗读文本 </button>
   </div>
   <script>
      // 编写JavaScript代码使用Web Speech API进行文本转语音转换
      var synth = window.speechSynthesis;
      var speak = document.getElementById("speak");
      speak.addEventListener("click", () => {
         var text = document.getElementById("text").value;
         var speechOBj = new SpeechSynthesisUtterance(text);
         synth.speak(speechOBj);
      });
   </script>
</body>
</html>

示例2

下面的示例演示了Google Chrome Web Speech API的高级用法。在此示例中，每当用户单击按钮时，它都会调用textToVoice（）函数，将文本转换为语音。还可以向语音添加速率和音高值。

此外，setVoices（）函数将所有不同地区的可用语音设置为下拉菜单选项。用户可以从下拉菜单中选择任何语音并更改语音。

接下来，我们添加了恢复（resume）、暂停（pause）和取消（cancel）按钮以执行相应的操作。

<html>
<head>
   <style>
      textarea {
         border: 2px solid green;
         width: 500px;
      }
      .controls {
         margin-top: 10px;
      }
   </style>
</head>
<body>
   <h3>使用 Google Chrome 的 <i>Web speech API</i> 把文本转成语音</h3>
   <div class="container">
      <textarea name="text" id="text" cols="30" rows="10"> 添加需要转换的文本 </textarea>
      <div class="controls">
      <label for="voice-select">发音人</label>
      <select name="voice" id="voice-select"> </select>
      <br> <br>
      <label for="rate-select">语速</label>
      <input type="range" name="rate" id="rate-select" min="0" max="1" step="0.1" value="1">
      <span id="rate-value">10</span>
      <br> <br>
      <label for="pitch-select">音高</label>
      <input type="range" name="pitch" id="pitch-select" min="0" max="2" step="0.1" value="1">
      <span id="pitch-value">10</span>
      <br> <br>
      <button id="btn">
         开始转换
      </button>
      <button id="pause"> 暂停 </button>
      <button id="resume"> 继续 </button>
      <button id="cancel"> 取消 </button>
   </div>
   <script>
      // 获取元素
      const textarea = document.getElementById('text');
      const voice_select = document.getElementById('voice-select');
      const rateSelect = document.getElementById('rate-select');
      const pitchSelect = document.getElementById('pitch-select');
      const rateval = document.getElementById('rate-value');
      const pitchval = document.getElementById('pitch-value');
      let button = document.getElementById('btn');
      let pause = document.getElementById('pause');
      let resume = document.getElementById('resume');
      let cancel = document.getElementById('cancel');

      // 初始化语音 API
      const speeachSynth = window.speechSynthesis;
      let AllVoices = [];
      function setVoices() {
         AllVoices = speeachSynth.getVoices();
         var string_op = "";
         AllVoices.forEach(voice => {
            var option = voice.name + ' - ' + voice.lang + ' - ';
            var new_option = "<option data-name='" + voice.name +
            "' data-lang='" + voice.lang + "'>" + option
            + "</option>  
";
            string_op += new_option;
         });
         voice_select.innerHTML = string_op;
      }
      speeachSynth.onvoiceschanged = function () {
         setVoices();
      };
      function textToVoice() {
         if (textarea.value !== '') {
            // 创建一个新的语音对象
            const textToSpeak = new SpeechSynthesisUtterance(textarea.value);
            //如果出错
            textToSpeak.error = e => {
               console.error('Error occurred...');
            };
            // 从下拉列表中选择发音人
            const id = voice_select.selectedIndex;
            const selectedVoice =
            voice_select.selectedOptions[0].getAttribute('data-name');
            // 设置发音人
            AllVoices.forEach(voice => {
               if (voice.name === selectedVoice) {
                  textToSpeak.voice = voice;
               }
            });
            // 选择语速和音高
            textToSpeak.rate = rateSelect.value;
            textToSpeak.pitch = pitchSelect.value;
            // 开始转换
            speeachSynth.speak(textToSpeak);
         }
      };

      // 更新语速和音高的值并显示
      rateSelect.addEventListener('change', event => rateval.innerHTML
      = (Number.parseFloat(rateSelect.value) * 10) + "");
      pitchSelect.addEventListener('change', evt => pitchval.innerHTML
      = (Number.parseFloat(pitchSelect.value) * 10) + "");

      // 监听“开始转换”按钮点击事件
      button.addEventListener('click', e => {
         e.preventDefault();
         textToVoice();
      });

      // 监听“暂停”按钮点击事件
      pause.addEventListener('click', e => {
         e.preventDefault();
         speeachSynth.pause();
      });

      // 监听“继续”按钮点击事件
      resume.addEventListener('click', e => {
         e.preventDefault();
         speeachSynth.resume();
      });

      // 监听“取消”按钮点击事件
      cancel.addEventListener('click', e => {
         e.preventDefault();
         speeachSynth.cancel();
      });
   </script>
</body>
</html>