chrome文字转语音（tts）_chrome tts

作者：秋刀鱼在做梦 | 2024-07-16 14:54:37

踩

chrome tts

文章目录

一、文章参考
二、TTS (Text-To-Speech) 是文本转语音
三、chrome 文字转语音
四、语音合成Speech Synthesis API有什么用？

一、文章参考

二、TTS (Text-To-Speech) 是文本转语音

2.1 概念

通过 TTS 引擎把文本转化成语音输出

2.2 windows 操作系统

完整版 Windows Vista / 7-7.1 / 8-8.1 / 10 (64 位) 本身带有 TTS 引擎，无需另外安装

完整版 Windows XP-SP3 (32 位) 本身自带功能较弱，需另外安装 TTS 引擎

MicroSoft 微软 TTS 引擎提供了 Windows Speech SDK 开发包，供编程者使用。

语音合成 SS 引擎
语音合成 SS 引擎用于将文字转换成语音输出
语音识别 SR 引擎。
语音识别 SR 引擎用于识别语音命令。

2.3 验证是否有Windows TTS（语音转文本）

请添加图片描述

三、chrome 文字转语音

3.1 Web Speech相关的API实际上有两类

语音识别(Speech Recognition) —— 语音转文字
主要是 chrome 和 Opera 两个浏览器有实现
语音合成(Speech Synthesis) —— 文字转语音
主流浏览器都支持（Edge也支持）

3.2 语音合成Speech Synthesis API

参考 SpeechSynthesis MDN

3.2.1 SpeechSynthesisUtterance对象，主要用来构建语音合成实例

3.2.1.1 属性

SpeechSynthesisUtterance.lang 获取并设置话语的语言
SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
SpeechSynthesisUtterance.text 获取并设置说话时的文本
SpeechSynthesisUtterance.voice 获取并设置说话的声音
SpeechSynthesisUtterance.volume 获取并设置说话的音量

3.2.1.2 回调函数

onstart – 语音合成开始时候的回调。
onpause – 语音合成暂停时候的回调。
onresume – 语音合成重新开始时候的回调。
onend – 语音合成结束时候的回调。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script>
      function speak(textToSpeak) {
        var u = new SpeechSynthesisUtterance()
        u.text = textToSpeak + ''
        //汉语
        u.lang = 'zh-CN'
        //日语
        //u.lang = 'ja-JP';
        u.rate = 1
        speechSynthesis.speak(u)
      }
    </script>
    <title>中文、日文测试</title>
  </head>
  <body>
    <p
      onclick="speak(`1政府工作报告这些暖行动！曹卫东最新解读，美国果然低估了金正恩决心`)"
    >
      Chrome TTS CN/JP
    </p>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3.2.2 speechSynthesis对象，主要作用是触发行为，例如读，停，还原等

speak() – 只能接收SpeechSynthesisUtterance作为唯一的参数，作用是读合成的话语。
pause() – 暂停合成过程。

如果有多条语音播放，不会立马停止，在当前语音执行完了之后会暂停

resume() – 重新开始合成过程。

暂停之后，如果有语音队列，则会回复继续播放队列的语音

SpeechSynthesis.cancel() 移除所有语音谈话队列中的谈话。

立马停止正在播放的语音

getVoices – 此方法不接受任何参数，用来返回浏览器支持的语音包列表，是个数组

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script>
      var u
      function speak(textToSpeak) {
        u = new SpeechSynthesisUtterance()
        u.text = textToSpeak + ''
        //汉语
        u.lang = 'zh-CN'
        //日语
        //u.lang = 'ja-JP';
        u.rate = 1
        speechSynthesis.speak(u)
        u.onstart=function(){
          console.log('onstart')
        }
        u.onend =function(){
          console.log('onend')
        }
        u.onpause =function(){
          console.log('onpause')
        }
        u.onresume =function(){
          console.log('onresume ')
        }
      }

      function test () {
        const str="dasdfsdafhdshfioewhuqrhfeiwhqfehwqoihfeiuhwquiewhfiehwqifhiedhqfjhdskjahkfdslkahfjkdhsalfdsafdsafdsafdsafdasf"
        speak(str)
      }
      function pause () {
        speechSynthesis.pause()
      }
      function resume () {
        speechSynthesis.resume()
      }
      function cancel () {
        speechSynthesis.cancel()
      }
    </script>
    <title>中文、日文测试</title>
  </head>
  <style>
    ul > li {
      cursor: pointer;
    }
  </style>
  <body>
    <ul>
      <li onclick="test()">说话 speak()</li>
      <li onclick="pause()">pause() – 暂停合成过程。</li>
      <li onclick="resume()">resume() – 重新开始合成过程。</li>
      <li onclick="cancel()">cancel() – 移除所有语音谈话队列中的谈话。</li>
    </ul>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

四、语音合成Speech Synthesis API有什么用？

对于盲人或弱视用户，往往会借助一些辅助设备或者软件访问我们的网页

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/834782