基本示例

浏览器 web api 功能，语音读取

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9. </head>
  11. <body>
  12.   <input type="text" id="textMsg" value="有新的订单，请及时处理">
  13.   <button onclick="speak()">播放</button>
  14.   <button onclick="pause()">暂停</button>
  15.   <button onclick="resume()">继续播放</button>
  16.   <button onclick="cancel()">取消播放</button>
  17.   <script>
  18.     var speech = new SpeechSynthesisUtterance();
  20.     // 播放
  21.     function speak() {
  22.       // speech.pitch = 1 // 获取并设置话语的音调(值越大越尖锐,越低越低沉)
  23.       // speech.rate  = 5 // 获取并设置说话的速度(值越大语速越快,越小语速越慢)
  24.       // speech.voice = 10 // 获取并设置说话的声音
  25.       // speech.volume = 1 // 获取并设置说话的音量
  26.       // speech.lang = speechSynthesis.getVoices()[0] // 设置播放语言，测试没效果
  27.       // speech.cancel() // 删除队列中所有的语音.如果正在播放,则直接停止
  28.       speech.text = textMsg.value // 获取并设置说话时的文本
  29.       speechSynthesis.speak(speech);
  30.     }
  32.     // 暂停
  33.     function pause() {
  34.       speechSynthesis.pause()
  35.     }
  36.     // 继续播放
  37.     function resume() {
  38.       speechSynthesis.resume()
  39.     }
  41.     // 取消播放
  42.     function cancel() {
  43.       speechSynthesis.cancel()
  44.     }
  45.   </script>
  46. </body>
  48. </html>

参考

【1】js文字转语音播放-掘金