HTML5语音合成Speech Synthesis API简介
<div><div>
<h4>一、关于HTML5语音Web Speech API</h4>
<p>HTML5中和Web Speech相关的API实际上有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”，这两个名词听上去很高大上，实际上指的分别是“语音转文字”，和“文字变语音”。</p>
<p>而本文要介绍的就是这里的“语音合成-文字变语音”。为什么称为“合成”呢？比方说你Siri发音“你好，世界！” 实际上是把“你”、“好”、“世”、“界”这4个字的读音给合并在一起，因此，称为“语音合成”。</p>
<p>“语音识别”和“语音合成”看上去像是正反两方面，应该带有镜面气质，实际上，至少从兼容性来看，两者并无法直接对等。“语音识别(Speech Recognition)”目前的就Chrome浏览器和Opera浏览器默认支持，但是，“语音合成(Speech Synthesis)”的兼容性要好上太多了Chrome，FF，Edge，Safari等等都是支持的。</p>
<h4>使用的基本套路如下：</h4>
<ul>
<li>
<h5>创建SpeechRecognition的新实例。由于到目前为止，浏览器还没有广泛支持，所以需要webKit的前缀：</h5>
</li>
</ul>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-csharp"><code class="language-csharp"><span class="token keyword">var newRecognition <span class="token operator">= <span class="token function">webkitSpeechRecognition<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;
</span></span></span></span></span></span></code></pre>
</div>
<ul>
<li>设置是持续听还是听到声音之后就关闭接收。通过设置continuous属性值实现。一般聊天沟通使用false属性值，如果是写文章写公众号之类的则可以设置为true，如下示意：</li>
</ul>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-bash"><code class="language-bash">newRecognition.continuous = true;
</code></pre>
</div>
<ul>
<li>控制语音识别的开启和停止，可以使用start()和stop()方法：</li>
</ul>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-cpp"><code class="language-cpp"><span class="token comment">// 开启
newRecognition<span class="token punctuation">.<span class="token function">start<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;
<span class="token comment">// 停止
newRecognition<span class="token punctuation">.<span class="token function">stop<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;
</span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<ul>
<li>对识别到的结果进行处理，可以使用一些事件方法，比方说onresult：</li>
</ul>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-jsx"><code class="language-jsx">newRecognition<span class="token punctuation">.<span class="token function-variable function">onresult <span class="token operator">= <span class="token keyword">function<span class="token punctuation">(<span class="token parameter">event<span class="token punctuation">) <span class="token punctuation">{
console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(event<span class="token punctuation">)<span class="token punctuation">;
<span class="token punctuation">}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>除了result事件外，还有其他一些事件，例如，soundstart、speechstart、error等。</p>
<h3>二、关于语音合成Speech Synthesis API</h3>
<p>先从最简单的例子说起，如果想让浏览器读出“你好，世界！”的声音，可以下面的JS代码：</p>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-dart"><code class="language-dart"><span class="token keyword">var utterThis <span class="token operator">= <span class="token keyword">new <span class="token class-name">window<span class="token punctuation">.SpeechSynthesisUtterance<span class="token punctuation">(<span class="token string">'你好，世界！'<span class="token punctuation">)<span class="token punctuation">;
window<span class="token punctuation">.speechSynthesis<span class="token punctuation">.<span class="token function">speak<span class="token punctuation">(utterThis<span class="token punctuation">)<span class="token punctuation">;
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>没错，只需要这么一点代码就足够了，大家可以在自己浏览器的控制台里面运行上面两行代码，看看有没有读出声音。</p>
<p>上面代码出现了两个长长的对象，<code>SpeechSynthesisUtterance</code>和<code>speechSynthesis</code>，就是语音合成Speech Synthesis API的核心。</p>
<p>首先是<code>SpeechSynthesisUtterance</code>对象，主要用来构建语音合成实例，例如上面代码中的实例对象<code>utterThis</code>。我们可以直接在构建的时候就把要读的文字内容写进去：</p>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-dart"><code class="language-dart"><span class="token keyword">var utterThis <span class="token operator">= <span class="token keyword">new <span class="token class-name">window<span class="token punctuation">.SpeechSynthesisUtterance<span class="token punctuation">(<span class="token string">'你好，世界！'<span class="token punctuation">)<span class="token punctuation">;
</span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>又或者是使用实例对象的一些属性，包括：</p>
<ul>
<li><code>text</code> – 要合成的文字内容，字符串。</li>
<li><code>lang</code> – 使用的语言，字符串， 例如：<code>"zh-cn"</code></li>
<li><code>voiceURI</code> – 指定希望使用的声音和服务，字符串。</li>
<li><code>volume</code> – 声音的音量，区间范围是<code>0</code>到<code>1</code>，默认是<code>1</code>。</li>
<li><code>rate</code> – 语速，数值，默认值是<code>1</code>，范围是<code>0.1</code>到<code>10</code>，表示语速的倍数，例如<code>2</code>表示正常语速的两倍。</li>
<li><code>pitch</code> – 表示说话的音高，数值，范围从<code>0</code>（最小）到<code>2</code>（最大）。默认值为<code>1</code>。</li>
</ul>
<p>因此上面的代码也可以写作：</p>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-dart"><code class="language-dart"><span class="token keyword">var utterThis <span class="token operator">= <span class="token keyword">new <span class="token class-name">window<span class="token punctuation">.SpeechSynthesisUtterance<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;
utterThis<span class="token punctuation">.text <span class="token operator">= <span class="token string">'你好，世界！'<span class="token punctuation">;
</span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>不仅如此，该实例对象还暴露了一些方法：</p>
<ul>
<li><code>onstart</code> – 语音合成开始时候的回调。</li>
<li><code>onpause</code> – 语音合成暂停时候的回调。</li>
<li><code>onresume</code> – 语音合成重新开始时候的回调。</li>
<li><code>onend</code> – 语音合成结束时候的回调。</li>
</ul>
<p>接下来是<code>speechSynthesis</code>对象，主要作用是触发行为，例如读，停，还原等：</p>
<ul>
<li>
<p><code>speak()</code> – 只能接收<code>SpeechSynthesisUtterance</code>作为唯一的参数，作用是读合成的话语。</p>
</li>
<li>
<p><code>stop()</code> – 立即终止合成过程。</p>
</li>
<li>
<p><code>pause()</code> – 暂停合成过程。</p>
</li>
<li>
<p><code>resume()</code> – 重新开始合成过程。</p>
</li>
<li>
<p><code>getVoices</code> – 此方法不接受任何参数，用来返回浏览器支持的语音包列表，是个数组，例如，在我的电脑下，Firefox浏览器返回的语言包是两个：</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="403" data-height="48"><img src="//upload-images.jianshu.io/upload_images/5116580-bee2e99b381272db.png?imageMogr2/auto-orient/strip|imageView2/2/w/403/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5116580-bee2e99b381272db.png" data-original-width="403" data-original-height="48" data-original-format="" data-original-filesize="2974" data-image-index="0"></div>
</div>
<div class="image-caption">语言包Firefox浏览器</div>
</div>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="413" data-height="46"><img src="//upload-images.jianshu.io/upload_images/5116580-77c19af35dc9152f.png?imageMogr2/auto-orient/strip|imageView2/2/w/413/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5116580-77c19af35dc9152f.png" data-original-width="413" data-original-height="46" data-original-format="" data-original-filesize="2206" data-image-index="1"></div>
</div>
<div class="image-caption">Firefox浏览器下的语言包运行结果</div>
</div>
<p>而在chrome浏览器下，数量就很惊人了：</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="233" data-height="413"><img src="//upload-images.jianshu.io/upload_images/5116580-818bb41fa85e1de6.png?imageMogr2/auto-orient/strip|imageView2/2/w/233/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5116580-818bb41fa85e1de6.png" data-original-width="233" data-original-height="413" data-original-format="" data-original-filesize="5123" data-image-index="2"></div>
</div>
<div class="image-caption">Chrome浏览器下返回的语言包</div>
</div>
<p>虽然数量很多，是有种给人中看不中用的感觉，为什么这么说呢！在我的chrome浏览器下，不知道为什么，不会读任何声音，但是同样的demo见面，公司的电脑就可以，我后来仔细查了一下，有可能(20%可能性)是我家里的电脑win7版本是阉割版，没有安装或配置TTS引擎。</p>
<p>手机Safari浏览器也不会读。</p>
<p>其中，17是普通话大陆：</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="299" data-height="139"><img src="//upload-images.jianshu.io/upload_images/5116580-1270c83989b402b6.png?imageMogr2/auto-orient/strip|imageView2/2/w/299/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/5116580-1270c83989b402b6.png" data-original-width="299" data-original-height="139" data-original-format="" data-original-filesize="4614" data-image-index="3"></div>
</div>
<div class="image-caption">普通话中国大陆语言包</div>
</div>
<p>另外，<code>getVoices</code>的获取是个异步的过程，因此，你可以直接在控制台输入，<code>speechSynthesis.getVoices()</code>返回的是一个空数组，没关系，多试几次，或者搞个定时器之类的。</p>
</li>
</ul>
<h3>三、语音合成Speech Synthesis API有什么用</h3>
<p>对于盲人或弱视用户，往往会借助一些辅助设备或者软件访问我们的网页，其原理是通过触摸或定位某些元素发出声音，来让用户感知内容。<br>
有了语音合成Speech Synthesis API，对于这类用户，以及开发人员自己，都会带来一定的便利性。</p>
</div>
<br><br>作者：被床封印怎么都吃不胖的程序猿<br>链接：https://www.jianshu.com/p/92dec635f6c5<br>来源：简书<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</div><p>喜欢这篇文章？欢迎打赏~~</p><p><img src="https://img2020.cnblogs.com/blog/1313648/202012/1313648-20201207210415386-746901846.png" alt="" loading="lazy"></p><p> </p><br><br>
来源：https://www.cnblogs.com/cangqinglang/p/12119185.html
頁:
[1]