首页 >web前端 >js教程 >创建文本到语音镀铬扩展

创建文本到语音镀铬扩展

Jennifer Aniston原创: 2025-02-18 11:30:16785浏览

Create a Text-to-Speech Chrome Extension

核心要点

本文阐述了如何创建一个Chrome浏览器文本转语音(TTS)扩展程序，该程序利用HTML5语音合成API或第三方API将高亮显示的文本或剪贴板内容转换为语音。

Chrome扩展程序通常包含清单文件（元数据文件）、图像（例如扩展程序的图标）、HTML文件、JavaScript文件以及其他资源（如样式表）。

TTS扩展程序等待用户点击其图标或按下特定热键（Shift Y），然后将高亮显示的文本或剪贴板内容转换为语音。

扩展程序的代码包括后台脚本和内容脚本，访问活动标签和用户剪贴板的权限，以及检查高亮显示的文本或剪贴板内容、初始化扩展程序、添加热键和将文本转换为语音的方法。

如果HTML5语音合成API不可用，扩展程序将使用第三方API（如Voice RSS）将文本转换为语音。扩展程序还包含一个错误修复程序，用于解决Chrome在200-300个单词后停止语音合成的問題。

本文由Marc Towler同行评审。感谢所有SitePoint的同行评审员，使SitePoint的内容尽善尽美!

文本转语音（也称为语音合成或TTS）是一种人工产生人类语音的方式。这并非什么新鲜事物，据维基百科记载，人们尝试创造能够产生人类语音的机器至少已有一千年的历史。

如今，TTS在我们的生活中越来越普遍，每个人都可以从中受益。我们将通过创建一个将文本转换为语音的Chrome扩展程序来演示这一点。HTML5为我们带来了语音合成API，允许任何Web应用程序将任意文本字符串转换为语音，并免费播放给用户。

Chrome扩展程序通常包含以下内容：

清单文件（包含元数据的必需文件）
图像（例如扩展程序的图标）
HTML文件（例如，当用户点击扩展程序的图标时显示的弹出窗口）
JavaScript文件（例如稍后将解释的内容和/或后台脚本）
应用程序可能使用的任何其他资源（例如样式表）

关于页面转语音扩展程序

由于Chrome的普及和TTS的兴起，我们将创建一个将文本转换为语音的Chrome扩展程序。该扩展程序将等待用户点击其图标或按下特殊热键（Shift Y），然后尝试查找用户在其当前查看的页面上高亮显示的内容，或者尝试查找复制到其剪贴板的内容。如果找到任何内容，它将首先尝试使用HTML5语音合成API将其转换为语音，如果该API不可用，则调用第三方API。

Chrome扩展程序基础知识

每个Chrome扩展程序都需要一个名为manifest.json的文件。清单是一个JSON格式的文件，其中包含对应用程序至关重要的数据，从扩展程序的名称、描述、图标和作者等内容，到定义扩展程序需求的数据——扩展程序应该能够在哪些网站上运行（这些将是用户必须授予的权限）或在用户浏览特定网站时运行哪些文件。

<code class="language-json">{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
</code>

我们的清单首先记录了扩展程序的名称、描述、作者、版本和图标。您可以在icons对象中提供许多响应不同大小的图标。

<code class="language-json"> "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],
</code>

然后，我们在background对象中定义了一个名为background.min.js的后台脚本（注意我们使用的是最小化文件）。后台脚本是长期运行的脚本，将在用户浏览器关闭或扩展程序禁用之前继续运行。

之后，我们有一个content_scripts数组，它指示Chrome由于通配符“http://*/*"和“https://*/*"而在每个网站请求时加载两个JavaScript文件。与后台脚本不同，内容脚本可以访问用户正在访问的实际网站的DOM。内容脚本既可以读取也可以修改嵌入其中的任何网页的DOM。因此，我们的polyfill.min.js和ext.min.js将能够读取和修改每个网页上的所有数据。

<code class="language-json">  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}
</code>

等等！我们还有一个名为permissions的数组，我们请求只访问用户当前打开的网页（活动标签）。我们还请求另一个名为clipboardRead的权限，这将允许我们读取用户的剪贴板（以便我们可以将其内容转换为语音）。

编写页面转语音Chrome扩展程序

首先，我们创建我们唯一一个后台脚本，它挂钩一个事件监听器，该监听器将在用户点击扩展程序的图标时触发。发生这种情况时，我们将调用sendMessage函数，该函数使用chrome.tabs.sendMessage(tabId, message, callback)方法向我们的内容脚本发送消息（内容脚本可以读取DOM并找出用户高亮显示的内容和/或用户放在剪贴板上的内容）。我们使用chrome.tabs.query方法向当前打开的标签页发送消息——因为这是我们感兴趣的内容，也是我们能够访问的内容——该方法的参数包括一个回调函数，该函数将使用包含与查询匹配的标签页的参数调用。

<code class="language-javascript">chrome.browserAction.onClicked.addListener(function (tab) {
    //fired when the user clicks on the ext's icon
    sendMessage();
});
function sendMessage() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "pageToSpeech"}, function(response) {});
  });
}
</code>

现在，比较冗长的是我们的内容脚本。我们创建一个对象来保存与扩展程序相关的一些数据，然后定义我们的初始化方法。

<code class="language-javascript">initialize: function() {
    if (!pageToSpeech.hasText()) { return;}
    if (!pageToSpeech.trySpeechSynthesizer()) {
        pageToSpeech.trySpeechApi();
    }
},
</code>

该方法检查用户是否未高亮显示文本或剪贴板中没有任何内容，在这种情况下只返回。否则，它将尝试使用HTML5语音合成API生成语音。如果这也失败了，它最终将尝试使用第三方API。

检查文本的方法执行几项操作。它尝试使用内置的getSelection()方法获取包含高亮显示文本的对象，并使用toString()将其转换为文本字符串。然后，如果没有高亮显示文本，它将尝试在用户的剪贴板中查找文本。它通过向页面添加一个输入元素、聚焦它、使用execCommand('paste')触发粘贴事件，然后将粘贴到该输入中的文本保存在一个属性中来实现这一点。然后它清空输入。无论哪种情况，它都会返回它找到的内容。

<code class="language-json">{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
</code>

为了使用热键（硬编码为Shift Y）启用用户运行文本转语音转换，我们初始化一个数组并为onkeydown和onkeyup事件设置一个事件监听器。在监听器中，我们存储一个与按下键的keyCode对应的索引，该值是根据e.type事件类型与keydown的比较结果得出的，并且是一个布尔值。因此，每当一个键按下时，对应的键索引的值将设置为true，每当一个键释放时，索引的值将更改为false。因此，如果索引16和84都持有真值，我们就知道用户正在使用我们的热键，因此我们将初始化文本转语音转换。

<code class="language-json"> "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],
</code>

为了将文本转换为语音，我们依赖于trySpeechSynthesizer()方法。如果HTML5语音合成存在于用户的浏览器中（window.speechSynthesis），我们就知道用户能够使用它，因此我们检查当前是否正在运行语音（我们通过pageToSpeech.data.speechInProgress布尔值知道它是否正在运行）。如果语音正在进行中，我们将停止当前语音（因为trySpeechSynthesizer将启动一个新的语音，我们不希望同时发出两种声音）。然后，我们将speechInProgress设置为true，每当语音完成时，再次将该属性设置为假值。

现在，我不想详细说明为什么我们使用speechUtteranceChunker，但它是一个与Chrome在发出200-300个单词后停止语音合成相关的错误修复程序。基本上，它将我们的文本字符串分割成许多较小的块（在我们的例子中是120个单词），并使用一个块接一个块地调用语音合成API。

<code class="language-json">  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}
</code>

最后，如果HTML5语音合成API不可用，我们将尝试一个API。我们有相同的属性，用于知道是否需要停止已经运行的音频。然后，我们直接创建一个新的Audio对象，并向其传递所需API端点的URL，因为我们选择的演示API直接流式传输音频。我们只需传递API密钥和要转换的文本。我们还检查音频是否触发错误。在这种情况下，我们只需向用户显示一个警报，说明此时我们无法提供帮助（我们测试代码的这个特定的API，Voice RSS，允许免费层级上300次请求）。

<code class="language-json">{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
</code>

最后，在任何局部作用域之外，我们调用addHotkeys方法，该方法将开始等待用户按下正确的热键，并且我们设置一个监听器，该监听器将等待从后台脚本接收消息。如果接收到正确的消息（speakHighlight）或按下热键，我们将初始化文本转语音转换对象。

<code class="language-json"> "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],
</code>

结论

瞧，我们有一个不错的Chrome扩展程序，可以将文本转换为语音。此处的概念可用于创建用于不同目的的Chrome扩展程序。您是否构建了任何有趣的Chrome扩展程序，或者您想构建一个？请在评论中告诉我！

如果您喜欢这个想法并想进一步开发它，您可以在我们的GitHub存储库中找到完整的代码。如果您想测试它，可以在Chrome网上应用店中找到扩展程序的生产版本。

参考文献：https://www.php.cn/link/b8b0e04211dce1c104dfcdb685c9b9ad https://www.php.cn/link/e417baa9cdf34202f71b55a27da899e8

文本转语音Chrome扩展程序常见问题解答

如何安装文本转语音Chrome扩展程序？

安装文本转语音Chrome扩展程序是一个简单的过程。首先，打开您的Google Chrome浏览器，然后导航到Chrome网上应用店。在搜索栏中，输入您要安装的扩展程序的名称，例如“Read Aloud”或“Text-to-Speech (TTS)”。从搜索结果中点击扩展程序，然后点击“添加到Chrome”按钮。将出现一个弹出窗口要求确认，点击“添加扩展程序”。扩展程序将被安装，并且一个图标将出现在您的浏览器工具栏上。

我可以在我的文本转语音Chrome扩展程序中自定义语音吗？

是的，大多数文本转语音Chrome扩展程序允许您自定义语音。您通常可以选择各种语音，包括不同口音和语言的男声和女声。要自定义语音，请点击浏览器工具栏上的扩展程序图标，然后导航到设置或选项菜单。在这里，您应该找到更改语音、速度、音调和音量的选项。

文本转语音Chrome扩展程序是免费使用的吗？

许多文本转语音Chrome扩展程序是免费使用的，但有些可能会收取少量费用提供高级功能。这些高级功能可能包括其他语音、无广告使用或保存音频文件的功能。在安装之前，请务必检查Chrome网上应用店中扩展程序的详细信息。

我可以离线使用文本转语音Chrome扩展程序吗？

有些文本转语音Chrome扩展程序可以在离线状态下使用，但并非所有扩展程序都可以。这取决于扩展程序的设计方式。如果离线使用对您很重要，请在安装后检查Chrome网上应用店中扩展程序的描述或扩展程序的设置。

如何使用文本转语音Chrome扩展程序？

要使用文本转语音Chrome扩展程序，首先，导航到您想要大声朗读的网页。然后，点击浏览器工具栏上的扩展程序图标。有些扩展程序会立即开始大声朗读页面，而另一些扩展程序可能需要您选择要朗读的文本。您通常可以使用扩展程序弹出窗口中的控件来暂停、恢复或停止朗读。

我可以在任何网站上使用文本转语音Chrome扩展程序吗？

大多数文本转语音Chrome扩展程序应该可以在任何网站上运行，但可能存在例外情况。某些网站可能与某些扩展程序存在兼容性问题，或者扩展程序可能无法读取某些类型的内容，例如图像或视频。如果您遇到问题，请尝试使用不同的扩展程序或联系扩展程序的开发者以寻求支持。

我的数据在文本转语音Chrome扩展程序中安全吗？

大多数文本转语音Chrome扩展程序都应该尊重您的隐私，并且不会未经您的同意收集或共享您的数据。但是，在安装之前，最好检查扩展程序的隐私策略。如果您对该策略不满意，请考虑寻找其他扩展程序。

我可以更改文本转语音Chrome扩展程序中语音的速度吗？

是的，大多数文本转语音Chrome扩展程序允许您调整语音的速度。这通常可以在扩展程序的设置或选项菜单中完成。您通常可以选择一系列速度，从非常慢到非常快。

我可以在其他浏览器中使用文本转语音Chrome扩展程序吗？

文本转语音Chrome扩展程序旨在在Google Chrome浏览器中运行，可能无法在其他浏览器中运行。但是，许多扩展程序开发者也会为其他浏览器（如Firefox或Edge）创建其扩展程序的版本。请查看开发者的网站或这些浏览器的相关扩展程序商店，看看是否有可用的版本。

我可以在我的移动设备上使用文本转语音Chrome扩展程序吗？

某些文本转语音Chrome扩展程序可能适用于Android或iOS版Chrome，但并非所有扩展程序都适用。这取决于扩展程序的设计方式。如果移动使用对您很重要，请在安装后检查Chrome网上应用店中扩展程序的描述或扩展程序的设置。

以上是创建文本到语音镀铬扩展的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript json html5 firefox chrome html edge 回调函数字符串 JS 对象作用域事件 dom history 样式表 background github android ios http https

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Modular JavaScript: A Beginners Guide to SystemJS & jspm下一篇：Connecting a Raspberry Pi to IBM Watson, Bluemix and Node-RED

查看更多