核心要點(diǎn)

本文闡述瞭如何創(chuàng)建一個(gè)Chrome瀏覽器文本轉(zhuǎn)語(yǔ)音(TTS)擴(kuò)展程序，該程序利用HTML5語(yǔ)音合成API或第三方API將高亮顯示的文本或剪貼板內(nèi)容轉(zhuǎn)換為語(yǔ)音。

Chrome擴(kuò)展程序通常包含清單文件（元數(shù)據(jù)文件）、圖像（例如擴(kuò)展程序的圖標(biāo)）、HTML文件、JavaScript文件以及其他資源（如樣式表）。

TTS擴(kuò)展程序等待用戶點(diǎn)擊其圖標(biāo)或按下特定熱鍵（Shift Y），然後將高亮顯示的文本或剪貼板內(nèi)容轉(zhuǎn)換為語(yǔ)音。

擴(kuò)展程序的代碼包括後臺(tái)腳本和內(nèi)容腳本，訪問(wèn)活動(dòng)標(biāo)籤和用戶剪貼板的權(quán)限，以及檢查高亮顯示的文本或剪貼板內(nèi)容、初始化擴(kuò)展程序、添加熱鍵和將文本轉(zhuǎn)換為語(yǔ)音的方法。

如果HTML5語(yǔ)音合成API不可用，擴(kuò)展程序?qū)⑹褂玫谌紸PI（如Voice RSS）將文本轉(zhuǎn)換為語(yǔ)音。擴(kuò)展程序還包含一個(gè)錯(cuò)誤修復(fù)程序，用於解決Chrome在200-300個(gè)單詞後停止語(yǔ)音合成的問(wèn)題。

本文由Marc Towler同行評(píng)審。感謝所有SitePoint的同行評(píng)審員，使SitePoint的內(nèi)容盡善盡美!

文本轉(zhuǎn)語(yǔ)音（也稱為語(yǔ)音合成或TTS）是一種人工產(chǎn)生人類語(yǔ)音的方式。這並非什麼新鮮事物，據(jù)維基百科記載，人們嘗試創(chuàng)造能夠產(chǎn)生人類語(yǔ)音的機(jī)器至少已有一千年的歷史。

如今，TTS在我們的生活中越來(lái)越普遍，每個(gè)人都可以從中受益。我們將通過(guò)創(chuàng)建一個(gè)將文本轉(zhuǎn)換為語(yǔ)音的Chrome擴(kuò)展程序來(lái)演示這一點(diǎn)。 HTML5為我們帶來(lái)了語(yǔ)音合成API，允許任何Web應(yīng)用程序?qū)⑷我馕谋咀址D(zhuǎn)換為語(yǔ)音，並免費(fèi)播放給用戶。

Chrome擴(kuò)展程序通常包含以下內(nèi)容：

1. 清單文件（包含元數(shù)據(jù)的必需文件）
2. 圖像（例如擴(kuò)展程序的圖標(biāo)）
3. HTML文件（例如，當(dāng)用戶點(diǎn)擊擴(kuò)展程序的圖標(biāo)時(shí)顯示的彈出窗口）
4. JavaScript文件（例如稍後將解釋的內(nèi)容和/或後臺(tái)腳本）
5. 應(yīng)用程序可能使用的任何其他資源（例如樣式表）

關(guān)於頁(yè)面轉(zhuǎn)語(yǔ)音擴(kuò)展程序

由於Chrome的普及和TTS的興起，我們將創(chuàng)建一個(gè)將文本轉(zhuǎn)換為語(yǔ)音的Chrome擴(kuò)展程序。該擴(kuò)展程序?qū)⒌却脩酎c(diǎn)擊其圖標(biāo)或按下特殊熱鍵（Shift Y），然後嘗試查找用戶在其當(dāng)前查看的頁(yè)面上高亮顯示的內(nèi)容，或者嘗試查找複製到其剪貼板的內(nèi)容。如果找到任何內(nèi)容，它將首先嘗試使用HTML5語(yǔ)音合成API將其轉(zhuǎn)換為語(yǔ)音，如果該API不可用，則調(diào)用第三方API。

Chrome擴(kuò)展程序基礎(chǔ)知識(shí)

每個(gè)Chrome擴(kuò)展程序都需要一個(gè)名為manifest.json的文件。清單是一個(gè)JSON格式的文件，其中包含對(duì)應(yīng)用程序至關(guān)重要的數(shù)據(jù)，從擴(kuò)展程序的名稱、描述、圖標(biāo)和作者等內(nèi)容，到定義擴(kuò)展程序需求的數(shù)據(jù)——擴(kuò)展程序應(yīng)該能夠在哪些網(wǎng)站上運(yùn)行（這些將是用戶必須授予的權(quán)限）或在用戶瀏覽特定網(wǎng)站時(shí)運(yùn)行哪些文件。

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

我們的清單首先記錄了擴(kuò)展程序的名稱、描述、作者、版本和圖標(biāo)。您可以在icons對(duì)像中提供許多響應(yīng)不同大小的圖標(biāo)。

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

然後，我們?cè)赽ackground對(duì)像中定義了一個(gè)名為background.min.js的後臺(tái)腳本（注意我們使用的是最小化文件）。後臺(tái)腳本是長(zhǎng)期運(yùn)行的腳本，將在用戶瀏覽器關(guān)閉或擴(kuò)展程序禁用之前繼續(xù)運(yùn)行。

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

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

等等！我們還有一個(gè)名為permissions的數(shù)組，我們請(qǐng)求只訪問(wèn)用戶當(dāng)前打開(kāi)的網(wǎng)頁(yè)（活動(dòng)標(biāo)籤）。我們還請(qǐng)求另一個(gè)名為clipboardRead的權(quán)限，這將允許我們讀取用戶的剪貼板（以便我們可以將其內(nèi)容轉(zhuǎn)換為語(yǔ)音）。

編寫(xiě)頁(yè)面轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序

首先，我們創(chuàng)建我們唯一一個(gè)後臺(tái)腳本，它掛鉤一個(gè)事件監(jiān)聽(tīng)器，該監(jiān)聽(tīng)器將在用戶點(diǎn)擊擴(kuò)展程序的圖標(biāo)時(shí)觸發(fā)。發(fā)生這種情況時(shí)，我們將調(diào)用sendMessage函數(shù)，該函數(shù)使用chrome.tabs.sendMessage(tabId, message, callback)方法向我們的內(nèi)容腳本發(fā)送消息（內(nèi)容腳本可以讀取DOM並找出用戶高亮顯示的內(nèi)容和/或用戶放在剪貼板上的內(nèi)容）。我們使用chrome.tabs.query方法向當(dāng)前打開(kāi)的標(biāo)籤頁(yè)發(fā)送消息——因?yàn)檫@是我們感興趣的內(nèi)容，也是我們能夠訪問(wèn)的內(nèi)容——該方法的參數(shù)包括一個(gè)回調(diào)函數(shù)，該函數(shù)將使用包含與查詢匹配的標(biāo)籤頁(yè)的參數(shù)調(diào)用。

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

現(xiàn)在，比較冗長(zhǎng)的是我們的內(nèi)容腳本。我們創(chuàng)建一個(gè)對(duì)象來(lái)保存與擴(kuò)展程序相關(guān)的一些數(shù)據(jù)，然後定義我們的初始化方法。

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

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

檢查文本的方法執(zhí)行幾項(xiàng)操作。它嘗試使用內(nèi)置的getSelection()方法獲取包含高亮顯示文本的對(duì)象，並使用toString()將其轉(zhuǎn)換為文本字符串。然後，如果沒(méi)有高亮顯示文本，它將嘗試在用戶的剪貼板中查找文本。它通過(guò)向頁(yè)面添加一個(gè)輸入元素、聚焦它、使用execCommand('paste')觸發(fā)粘貼事件，然後將粘貼到該輸入中的文本保存在一個(gè)屬性中來(lái)實(shí)現(xiàn)這一點(diǎn)。然後它清空輸入。無(wú)論哪種情況，它都會(huì)返回它找到的內(nèi)容。

{
  "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）啟用用戶運(yùn)行文本轉(zhuǎn)語(yǔ)音轉(zhuǎn)換，我們初始化一個(gè)數(shù)組並為onkeydown和onkeyup事件設(shè)置一個(gè)事件監(jiān)聽(tīng)器。在監(jiān)聽(tīng)器中，我們存儲(chǔ)一個(gè)與按下鍵的keyCode對(duì)應(yīng)的索引，該值是根據(jù)e.type事件類型與keydown的比較結(jié)果得出的，並且是一個(gè)布爾值。因此，每當(dāng)一個(gè)鍵按下時(shí)，對(duì)應(yīng)的鍵索引的值將設(shè)置為true，每當(dāng)一個(gè)鍵釋放時(shí)，索引的值將更改為false。因此，如果索引16和84都持有真值，我們就知道用戶正在使用我們的熱鍵，因此我們將初始化文本轉(zhuǎn)語(yǔ)音轉(zhuǎn)換。

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

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

現(xiàn)在，我不想詳細(xì)說(shuō)明為什麼我們使用speechUtteranceChunker，但它是一個(gè)與Chrome在發(fā)出200-300個(gè)單詞後停止語(yǔ)音合成相關(guān)的錯(cuò)誤修復(fù)程序?；旧希鼘⑽覀兊奈谋咀址指畛稍S多較小的塊（在我們的例子中是120個(gè)單詞），並使用一個(gè)塊接一個(gè)塊地調(diào)用語(yǔ)音合成API。

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

最後，如果HTML5語(yǔ)音合成API不可用，我們將嘗試一個(gè)API。我們有相同的屬性，用於知道是否需要停止已經(jīng)運(yùn)行的音頻。然後，我們直接創(chuàng)建一個(gè)新的Audio對(duì)象，並向其傳遞所需API端點(diǎn)的URL，因?yàn)槲覀冞x擇的演示API直接流式傳輸音頻。我們只需傳遞API密鑰和要轉(zhuǎn)換的文本。我們還檢查音頻是否觸發(fā)錯(cuò)誤。在這種情況下，我們只需向用戶顯示一個(gè)警報(bào)，說(shuō)明此時(shí)我們無(wú)法提供幫助（我們測(cè)試代碼的這個(gè)特定的API，Voice RSS，允許免費(fèi)層級(jí)上300次請(qǐng)求）。

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

最後，在任何局部作用域之外，我們調(diào)用addHotkeys方法，該方法將開(kāi)始等待用戶按下正確的熱鍵，並且我們?cè)O(shè)置一個(gè)監(jiān)聽(tīng)器，該監(jiān)聽(tīng)器將等待從後臺(tái)腳本接收消息。如果接收到正確的消息（speakHighlight）或按下熱鍵，我們將初始化文本轉(zhuǎn)語(yǔ)音轉(zhuǎn)換對(duì)象。

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

結(jié)論

瞧，我們有一個(gè)不錯(cuò)的Chrome擴(kuò)展程序，可以將文本轉(zhuǎn)換為語(yǔ)音。此處的概念可用於創(chuàng)建用於不同目的的Chrome擴(kuò)展程序。您是否構(gòu)建了任何有趣的Chrome擴(kuò)展程序，或者您想構(gòu)建一個(gè)？請(qǐng)?jiān)谠u(píng)論中告訴我！

如果您喜歡這個(gè)想法並想進(jìn)一步開(kāi)發(fā)它，您可以在我們的GitHub存儲(chǔ)庫(kù)中找到完整的代碼。如果您想測(cè)試它，可以在Chrome網(wǎng)上應(yīng)用店中找到擴(kuò)展程序的生產(chǎn)版本。

參考文獻(xiàn)：http://www.miracleart.cn/link/b8b0e04211dce1c104dfcdb685c9b9ad http://www.miracleart.cn/link/e417baa9cdf34202f71b55a27da899e8

文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序常見(jiàn)問(wèn)題解答

如何安裝文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序？

安裝文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序是一個(gè)簡(jiǎn)單的過(guò)程。首先，打開(kāi)您的Google Chrome瀏覽器，然後導(dǎo)航到Chrome網(wǎng)上應(yīng)用店。在搜索欄中，輸入您要安裝的擴(kuò)展程序的名稱，例如“Read Aloud”或“Text-to-Speech (TTS)”。從搜索結(jié)果中點(diǎn)擊擴(kuò)展程序，然後點(diǎn)擊“添加到Chrome”按鈕。將出現(xiàn)一個(gè)彈出窗口要求確認(rèn)，點(diǎn)擊“添加擴(kuò)展程序”。擴(kuò)展程序?qū)⒈话惭b，並且一個(gè)圖標(biāo)將出現(xiàn)在您的瀏覽器工具欄上。

我可以在我的文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序中自定義語(yǔ)音嗎？

是的，大多數(shù)文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序允許您自定義語(yǔ)音。您通常可以選擇各種語(yǔ)音，包括不同口音和語(yǔ)言的男聲和女聲。要自定義語(yǔ)音，請(qǐng)點(diǎn)擊瀏覽器工具欄上的擴(kuò)展程序圖標(biāo)，然後導(dǎo)航到設(shè)置或選項(xiàng)菜單。在這裡，您應(yīng)該找到更改語(yǔ)音、速度、音調(diào)和音量的選項(xiàng)。

文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序是免費(fèi)使用的嗎？

許多文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序是免費(fèi)使用的，但有些可能會(huì)收取少量費(fèi)用提供高級(jí)功能。這些高級(jí)功能可能包括其他語(yǔ)音、無(wú)廣告使用或保存音頻文件的功能。在安裝之前，請(qǐng)務(wù)必檢查Chrome網(wǎng)上應(yīng)用店中擴(kuò)展程序的詳細(xì)信息。

我可以離線使用文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序嗎？

有些文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序可以在離線狀態(tài)下使用，但並非所有擴(kuò)展程序都可以。這取決於擴(kuò)展程序的設(shè)計(jì)方式。如果離線使用對(duì)您很重要，請(qǐng)?jiān)诎惭b後檢查Chrome網(wǎng)上應(yīng)用店中擴(kuò)展程序的描述或擴(kuò)展程序的設(shè)置。

如何使用文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序？

要使用文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序，首先，導(dǎo)航到您想要大聲朗讀的網(wǎng)頁(yè)。然後，點(diǎn)擊瀏覽器工具欄上的擴(kuò)展程序圖標(biāo)。有些擴(kuò)展程序會(huì)立即開(kāi)始大聲朗讀頁(yè)面，而另一些擴(kuò)展程序可能需要您選擇要朗讀的文本。您通?？梢允褂脭U(kuò)展程序彈出窗口中的控件來(lái)暫停、恢復(fù)或停止朗讀。

我可以在任何網(wǎng)站上使用文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序嗎？

大多數(shù)文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序應(yīng)該可以在任何網(wǎng)站上運(yùn)行，但可能存在例外情況。某些網(wǎng)站可能與某些擴(kuò)展程序存在兼容性問(wèn)題，或者擴(kuò)展程序可能無(wú)法讀取某些類型的內(nèi)容，例如圖像或視頻。如果您遇到問(wèn)題，請(qǐng)嘗試使用不同的擴(kuò)展程序或聯(lián)繫擴(kuò)展程序的開(kāi)發(fā)者以尋求支持。

我的數(shù)據(jù)在文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序中安全嗎？

大多數(shù)文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序都應(yīng)該尊重您的隱私，並且不會(huì)未經(jīng)您的同意收集或共享您的數(shù)據(jù)。但是，在安裝之前，最好檢查擴(kuò)展程序的隱私策略。如果您對(duì)該策略不滿意，請(qǐng)考慮尋找其他擴(kuò)展程序。

我可以更改文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序中語(yǔ)音的速度嗎？

是的，大多數(shù)文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序允許您調(diào)整語(yǔ)音的速度。這通常可以在擴(kuò)展程序的設(shè)置或選項(xiàng)菜單中完成。您通?？梢赃x擇一系列速度，從非常慢到非?？臁?

我可以在其他瀏覽器中使用文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序嗎？

文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序旨在在Google Chrome瀏覽器中運(yùn)行，可能無(wú)法在其他瀏覽器中運(yùn)行。但是，許多擴(kuò)展程序開(kāi)發(fā)者也會(huì)為其他瀏覽器（如Firefox或Edge）創(chuàng)建其擴(kuò)展程序的版本。請(qǐng)查看開(kāi)發(fā)者的網(wǎng)站或這些瀏覽器的相關(guān)擴(kuò)展程序商店，看看是否有可用的版本。

我可以在我的移動(dòng)設(shè)備上使用文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序嗎？

某些文本轉(zhuǎn)語(yǔ)音Chrome擴(kuò)展程序可能適用於Android或iOS版Chrome，但並非所有擴(kuò)展程序都適用。這取決於擴(kuò)展程序的設(shè)計(jì)方式。如果移動(dòng)使用對(duì)您很重要，請(qǐng)?jiān)诎惭b後檢查Chrome網(wǎng)上應(yīng)用店中擴(kuò)展程序的描述或擴(kuò)展程序的設(shè)置。

以上是創(chuàng)建文本到語(yǔ)音鍍鉻擴(kuò)展的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！