SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等，不支持IE浏览器。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11. <input type="text" id="textMsg" value="有新的订单，请及时处理">
  12. <button onclick="speak()">播放</button>
  13. <button onclick="pause()">暂停</button>
  14. <button onclick="resume()">继续播放</button>
  15. <button onclick="cancel()">取消播放</button>
  16. <script>
  17.     var  synth = window.speechSynthesis //来创建语音,
  18.     var speech = new SpeechSynthesisUtterance();//来创建文本实例
  20.     // 播放
  21.     function speak() {
  22.        //speech.pitch = 1 // 获取并设置话语的音调(值越大越尖锐,越低越低沉)
  23.        // speech.rate  = 5 // 获取并设置说话的速度(值越大语速越快,越小语速越慢 0.1-10)
  24.        // speech.volume = 100 // 获取并设置说话的音量
  25.        // speech.lang = 'zh-CN' //语言
  27.        //返回当前设备所有可用声音的 SpeechSynthesisVoice (en-US)列表。
  28.        //var voices = synth.getVoices(); 
  29.        //console.log(voices);
  30.        //speech.voice = voices[0];
  32.        speech.text = textMsg.value; // 获取并设置说话时的文本
  33.        synth.cancel();//先关闭所有队列在播放 防止点击几次播放几次语音
  34.        synth.speak(speech);//将对应的实例添加到语音队列中
  36.     }
  38.     // 暂停
  39.     function pause() {
  40.         synth.pause()
  41.     }
  42.     // 继续播放
  43.     function resume() {
  44.         synth.resume()
  45.     }
  47.     // 取消播放
  48.     function cancel() {
  49.         synth.cancel()
  50.     }
  52.     //当口语到达单词或句子边界时触发boundary。 也可通过onboundary获得
  53.     //当话语说完时触发end ,也可通过onend获得
  54.     speech.addEventListener('end',function(){
  55.          console.log('语音播报结束')
  56.     });
  57.     speech.onend = function(){
  58.         console.log('语音播报结束')
  59.     }
  60. </script>
  61. </body>
  63. </html>