网页端输出文本转换语音_如何在任何网页上添加文本语音转换功能

文字转语音功能是指设备上显示的文字的语音旁白 。 目前，笔记本电脑，平板电脑和移动电话等设备已经具有此功能 。 在这些设备上运行的任何应用程序（例如Web浏览器）都可以使用它 ，并扩展其功能 。 旁白功能可以为显示大量文本的应用程序提供适当的帮助，因为它提供了收听网站访问者的选项 。

Web语音API

Web语音JavaScript API是通过Web浏览器访问“文本到语音”功能的网关。 因此，如果您想在文本较多的网页上引入文本语音转换功能，并允许读者收听内容，则可以使用此便捷的API，或者更具体地说，使用其SpeechSynthesis接口 。

初始代码和支持检查

首先，让我们创建一个网页，其中包含要叙述的示例文本和三个按钮 。

<div>
    <button id=play></button>
    <button id=pause></button>
    <button id=stop></button>
</div>
<article>
    <h1>The Hare With Many Friends</h1>
    <img src="hare-and-friends.jpg">
    <p>A hare was very popular with...</p>
    <p>But he declined, stating that...</p>
    <!-- More text... -->
    <blockquote>Moral of the story...</blockquote>
</article>

这些按钮将成为旁白的控件 。 现在，我们需要确定UA是否支持SpeechSynthesis接口。 为此，我们使用JavaScript快速检查window对象是否具有'speechSynthesis'属性 。