前端实现语音合成

HTML5语音Web Speech API

HTML5中和Web Speech相关的API实际上有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”，即“语音转文字”和“文字变语音”。

语音合成

SpeechSynthesisUtterance：主要用来构建语音合成实例

• 属性

  1. text：要合成的文字内容，string
  2. lang：使用的语言，string， 例如：“zh-CN”
  3. volume：声音的音量，string，范围是0到1，默认是1
  4. rate：语速，number，范围是0.1到10，默认值是1。表示语速的倍数，例如2表示正常语速的两倍
  5. pitch：说话的音高，number，范围从0到2，默认值为1
  6. voice：指定希望使用的声音和服务，object

• 方法

  1. onstart()：语音合成开始时候的回调
  2. onpause()：语音合成暂停时候的回调
  3. onresume()：语音合成重新开始时候的回调
  4. onend()：语音合成结束时候的回调

SpeechSynthesis：主要作用是触发行为，例如读，停，还原等

• 属性

  1. paused：当SpeechSynthesis处于暂停状态时，Boolean值返回true。
  2. pending：当语音播放队列到目前为止保持没有说完的语音时，Boolean值返回true。
  3. speaking：当语音谈话正在进行的时候，即使SpeechSynthesis处于暂停状态，Boolean返回 true。

• 方法

  1. cancel()：移除所有语音谈话队列中的谈话。
  2. getVoices()：返回浏览器支持的语音包列表数组
  3. pause()：暂停合成过程
  4. resume()：重新开始合成过程
  5. speak()：播放合成的话语
  6. stop()：立即终止合成过程

• 事件操作
  onvoiceschanged：当由SpeechSynthesis.getVoices()方法返回的列表改变时触发

语音识别

SpeechRecognition
由于到目前为止，浏览器还没有广泛支持，所以需要webKit的前缀：
var newRecognition = webkitSpeechRecognition();

• continuous：设置是持续听还是听到声音之后就关闭接收。
  一般聊天沟通使用false属性值，如果是写文章写公众号之类的则可以设置为true，如
  newRecognition.continuous = true;

• start()和stop()方法：控制语音识别的开启和停止。
  开启：newRecognition.start();
  停止：newRecognition.stop();

• onresult：对识别到的结果进行处理

  newRecognition.onresult = function(event) { 
    console.log(event);
  }
  

除了result事件外，还有其他一些事件，例如，soundstart、speechstart、error等。

• 语音合成超简单例子
  将下面的代码复制到chrome控制台中体验～

  let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客");
  window.speechSynthesis.speak(msg);
  

• SpeechSyntehesisUtteranc
SpeechSyntehesisUtteranc对象包含了语音服务要读取的内容和一些参数，比如语言，音高和音量等

  let msg = new SpeechSynthesisUtterance();
  msg.text = "how are you"; // 要合成的文本
  msg.lang = "en-US"; // 语言：美式英语发音（默认自动选择）
  msg.rate = 2;  // 语速：二倍速（默认为 1，范围 0.1～10）
  msg.pitch = 2; // 音调：高音调（数字越大越尖锐，默认为 1，范围 0～2 ）
  msg.volume = 0.5; // 音量：音量 0.5 倍（默认为1，范围 0～1）
  window.speechSynthesis.speak(msg);
  

  let count = 0; // 词语数量
  let msg = new SpeechSynthesisUtterance();
  let synth = window.speechSynthesis;
  msg.addEventListener('start',()=>{
    // 开始阅读
    console.log(`文本内容： ${msg.text}`);
    console.log("start");
  });
  msg.addEventListener('end',()=>{
    // 阅读结束
    console.log("end");
    console.log(`文本单词（词语）数量：${count}`);
    count = 0;
  });
  msg.addEventListener('boundary',()=>{
    // 统计单词
    count++;
  });
  

百度文字转语音开放API

  <div>
      文本：
      <input name="text" type="text" placeholder="请输入您想合成的语音" />
  </div>
  <div>
      语速：
      <input name="spd" type="range" min="0" max="15" value="5" step="1" />
  </div>
  <div>
      <button onclick="voicePlay()">合成语音</button>
  </div>

  <script>
      const voicePlay = () => {
          let text = encodeURI(document.querySelector('input[name="text"]').value);
          let spd = document.querySelector('input[name="spd"]').value;

          let audio = new Audio();
          audio.autoplay = 'autoplay';

          // lan=zh – 语言是中文，如果改为lan=en，则语言是英文
          // ie=UTF-8 – 文字格式
          audio.src = `http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=${text}&spd=${spd}`;

          document.body.appendChild(audio);
      }
  </script>