創建文本到語音鍍鉻擴展

核心要點

本文闡述瞭如何創建一個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擴展程序通常包含以下內容：

1. 清單文件（包含元數據的必需文件）
2. 圖像（例如擴展程序的圖標）
3. HTML文件（例如，當用戶點擊擴展程序的圖標時顯示的彈出窗口）
4. JavaScript文件（例如稍後將解釋的內容和/或後台腳本）
5. 應用程序可能使用的任何其他資源（例如樣式表）

關於頁面轉語音擴展程序

由於Chrome的普及和TTS的興起，我們將創建一個將文本轉換為語音的Chrome擴展程序。該擴展程序將等待用戶點擊其圖標或按下特殊熱鍵（Shift Y），然後嘗試查找用戶在其當前查看的頁面上高亮顯示的內容，或者嘗試查找複製到其剪貼板的內容。如果找到任何內容，它將首先嘗試使用HTML5語音合成API將其轉換為語音，如果該API不可用，則調用第三方API。

Chrome擴展程序基礎知識

每個Chrome擴展程序都需要一個名為manifest.json的文件。清單是一個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"
  },

我們的清單首先記錄了擴展程序的名稱、描述、作者、版本和圖標。您可以在icons對像中提供許多響應不同大小的圖標。

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

然後，我們在background對像中定義了一個名為background.min.js的後台腳本（注意我們使用的是最小化文件）。後台腳本是長期運行的腳本，將在用戶瀏覽器關閉或擴展程序禁用之前繼續運行。

之後，我們有一個content_scripts數組，它指示Chrome由於通配符“http://*/*"和“https://*/*"而在每個網站請求時加載兩個JavaScript文件。與後台腳本不同，內容腳本可以訪問用戶正在訪問的實際網站的DOM。內容腳本既可以讀取也可以修改嵌入其中的任何網頁的DOM。因此，我們的polyfill.min.js和ext.min.js將能夠讀取和修改每個網頁上的所有數據。

  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}

等等！我們還有一個名為permissions的數組，我們請求只訪問用戶當前打開的網頁（活動標籤）。我們還請求另一個名為clipboardRead的權限，這將允許我們讀取用戶的剪貼板（以便我們可以將其內容轉換為語音）。

編寫頁面轉語音Chrome擴展程序

首先，我們創建我們唯一一個後台腳本，它掛鉤一個事件監聽器，該監聽器將在用戶點擊擴展程序的圖標時觸發。發生這種情況時，我們將調用sendMessage函數，該函數使用chrome.tabs.sendMessage(tabId, message, callback)方法向我們的內容腳本發送消息（內容腳本可以讀取DOM並找出用戶高亮顯示的內容和/或用戶放在剪貼板上的內容）。我們使用chrome.tabs.query方法向當前打開的標籤頁發送消息——因為這是我們感興趣的內容，也是我們能夠訪問的內容——該方法的參數包括一個回調函數，該函數將使用包含與查詢匹配的標籤頁的參數調用。

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) {});
  });
}

現在，比較冗長的是我們的內容腳本。我們創建一個對象來保存與擴展程序相關的一些數據，然後定義我們的初始化方法。

initialize: function() {
    if (!pageToSpeech.hasText()) { return;}
    if (!pageToSpeech.trySpeechSynthesizer()) {
        pageToSpeech.trySpeechApi();
    }
},

該方法檢查用戶是否未高亮顯示文本或剪貼板中沒有任何內容，在這種情況下只返回。否則，它將嘗試使用HTML5語音合成API生成語音。如果這也失敗了，它最終將嘗試使用第三方API。

檢查文本的方法執行幾項操作。它嘗試使用內置的getSelection()方法獲取包含高亮顯示文本的對象，並使用toString()將其轉換為文本字符串。然後，如果沒有高亮顯示文本，它將嘗試在用戶的剪貼板中查找文本。它通過向頁面添加一個輸入元素、聚焦它、使用execCommand('paste')觸發粘貼事件，然後將粘貼到該輸入中的文本保存在一個屬性中來實現這一點。然後它清空輸入。無論哪種情況，它都會返回它找到的內容。

{
  "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"
  },

為了使用熱鍵（硬編碼為Shift Y）啟用用戶運行文本轉語音轉換，我們初始化一個數組並為onkeydown和onkeyup事件設置一個事件監聽器。在監聽器中，我們存儲一個與按下鍵的keyCode對應的索引，該值是根據e.type事件類型與keydown的比較結果得出的，並且是一個布爾值。因此，每當一個鍵按下時，對應的鍵索引的值將設置為true，每當一個鍵釋放時，索引的值將更改為false。因此，如果索引16和84都持有真值，我們就知道用戶正在使用我們的熱鍵，因此我們將初始化文本轉語音轉換。

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

為了將文本轉換為語音，我們依賴於trySpeechSynthesizer()方法。如果HTML5語音合成存在於用戶的瀏覽器中（window.speechSynthesis），我們就知道用戶能夠使用它，因此我們檢查當前是否正在運行語音（我們通過pageToSpeech.data.speechInProgress布爾值知道它是否正在運行）。如果語音正在進行中，我們將停止當前語音（因為trySpeechSynthesizer將啟動一個新的語音，我們不希望同時發出兩種聲音）。然後，我們將speechInProgress設置為true，每當語音完成時，再次將該屬性設置為假值。

現在，我不想詳細說明為什麼我們使用speechUtteranceChunker，但它是一個與Chrome在發出200-300個單詞後停止語音合成相關的錯誤修復程序。基本上，它將我們的文本字符串分割成許多較小的塊（在我們的例子中是120個單詞），並使用一個塊接一個塊地調用語音合成API。

  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}

最後，如果HTML5語音合成API不可用，我們將嘗試一個API。我們有相同的屬性，用於知道是否需要停止已經運行的音頻。然後，我們直接創建一個新的Audio對象，並向其傳遞所需API端點的URL，因為我們選擇的演示API直接流式傳輸音頻。我們只需傳遞API密鑰和要轉換的文本。我們還檢查音頻是否觸發錯誤。在這種情況下，我們只需向用戶顯示一個警報，說明此時我們無法提供幫助（我們測試代碼的這個特定的API，Voice RSS，允許免費層級上300次請求）。

{
  "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"
  },

最後，在任何局部作用域之外，我們調用addHotkeys方法，該方法將開始等待用戶按下正確的熱鍵，並且我們設置一個監聽器，該監聽器將等待從後台腳本接收消息。如果接收到正確的消息（speakHighlight）或按下熱鍵，我們將初始化文本轉語音轉換對象。

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

結論

瞧，我們有一個不錯的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中文網其他相關文章！