コアポイント

この記事では、HTML5音聲合成APIまたはサードパーティAPIを使用して、強(qiáng)調(diào)表示されたテキストまたはクリップボードコンテンツを音聲に変換するChromeブラウザテキスト（TTS）拡張機(jī)能を作成する方法について説明します。

Chrome拡張機(jī)能には、通常、マニフェストファイル（メタデータファイル）、畫像（拡張子アイコンなど）、HTMLファイル、JavaScriptファイル、およびその他のリソース（スタイルシートなど）が含まれます。

TTS拡張機(jī)能は、ユーザーがアイコンをクリックするか、特定のホットキー（シフトY）を押してから、強(qiáng)調(diào)表示されたテキストまたはクリップボードコンテンツを音聲に変換するのを待ちます。

拡張機(jī)能のコードには、バックグラウンドスクリプトとコンテンツスクリプト、アクティブなタグとユーザークリップボードにアクセスする許可、強(qiáng)調(diào)表示されたテキストまたはクリップボードコンテンツのチェック、拡張機(jī)能の初期化、ホットキーの追加、およびテキストへの変換のチェックが含まれます。

HTML5音聲合成APIが使用できない場合、拡張機(jī)能は音聲RSSなどのサードパーティAPIを使用してテキストをスピーチに変換します。拡張機(jī)能には、200?300語の後にChromeが発音を停止する問題を修正するためのバグ修正も含まれています。

この記事は、Marc Towlerによって査読されました。 SetePointのコンテンツを完璧にするために、SetePointのすべてのピアレビューアに感謝します！ テキストから音聲（音聲合成またはTTSとも呼ばれます）は、人為的に人間の音聲を生み出す方法です。ウィキペディアによると、人々は少なくとも千年にわたって人間の聲を生み出すことができるマシンを作成しようとしたと、これは新しいことではありません。

TTSは今日の私たちの生活の中でますます一般的になりつつあり、誰もがそれから利益を得ることができます。テキストをスピーチに変換するChrome拡張機(jī)能を作成することにより、これを?qū)g証します。 HTML5は、Webアプリケーションが任意のテキスト文字列をスピーチに変換し、ユーザーに無料でプレイできるようにする音聲合成APIを提供します。

Chrome拡張機(jī)能には通常、次のものが含まれています

タレントファイル（メタデータを含む必要なファイル）

畫像（拡張機(jī)能のアイコンなど）

1. htmlファイル（たとえば、ユーザーが拡張機(jī)能のアイコンをクリックすると表示されるポップアップウィンドウ）
2. javaScriptファイル（後で説明するコンテンツやバックグラウンドスクリプトなど）
3. アプリケーションが使用できる他のリソース（スタイルシートなど）
ページから音聲拡張機(jī)能
5. について
Chromeの人気とTTSの臺(tái)頭により、テキストを音聲に変換するChrome拡張機(jī)能を作成します。拡張機(jī)能は、ユーザーがアイコンをクリックするか、特別なホットキー（Shift Y）を押すのを待ってから、ユーザーが現(xiàn)在表示しているページで強(qiáng)調(diào)表示するか、クリップボードにコピーされているものを見つけようとします。何かが見つかった場合、最初にHTML5 Speech Synthesis APIを使用して音聲に変換しようとします。そのAPIが利用できない場合、サードパーティAPIが呼び出されます。

クロム拡張の基本

各クロム拡張機(jī)能には、manifest.jsonという名前のファイルが必要です。マニフェストは、拡張機(jī)能の名前、説明、アイコン、および著者から、拡張機(jī)能の要件を定義するデータまで、アプリケーションにとって重要なデータを含むJSONファイルです。ユーザーが付與する必要がある許可）またはユーザーが特定のWebサイトを閲覧したときに実行するファイルを?qū)g行します。

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

私たちのリストは、拡張機(jī)能の名前、説明、著者、バージョン、アイコンから始まります。アイコンオブジェクトにさまざまなサイズの多くのアイコンを提供できます。

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

次に、Background.min.jsという背景スクリプトをバックグラウンドオブジェクトに定義します（最小化ファイルを使用していることに注意してください）。バックグラウンドスクリプトは、ユーザーのブラウザが閉じられるか、拡張機(jī)能が無効になるまで実行され続ける長期にわたるスクリプトです。

の後、Wildcards "http：//*/*"および "https：//*/*" "and"のために、Chromeに各Webサイトのリクエストに2つのJavaScriptファイルをロードするように指示するcontent_scriptsの配列があります。 https：//*/*""。バックグラウンドスクリプトとは異なり、コンテンツスクリプトは、ユーザーがアクセスしている実際のWebサイトのDOMにアクセスできます。コンテンツスクリプトは、埋め込まれたWebページのDOMを読み取り、変更できます。したがって、Polyfill.min.jsおよびext.min.jsは、各Webページのすべてのデータを読み取り、変更できます。

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

待って！また、Permissionsと呼ばれる配列もあります。これは、ユーザーが現(xiàn)在開いているWebページ（アクティビティタグ）のみにアクセスすることを要求しています。また、ClipboardReadと呼ばれる別の許可を要求します。これにより、ユーザーのクリップボードを読み取ることができます（コンテンツを音聲に変換できます）。

ページを作成してChrome拡張機(jī)能<

最初に、ユーザーが拡張機(jī)能のアイコンをクリックすると発射されるイベントリスナーを接続する唯一のバックグラウンドスクリプトを作成します。これが発生した場合、Chrome.tabs.sendmessage（tabid、message、callback）メソッドを使用するsendmessage関數(shù)を呼び出します。 。 Chrome.tabs.Queryメソッドを使用して、現(xiàn)在開いているタブページにメッセージを送信します。これは、関心があるものであり、アクセスできるものです。メソッドのパラメーターには、次のものを使用するコールバック関數(shù)が含まれます。 ：タブページの一致のパラメーター呼び出しをクエリします。

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

さて、より冗長なものが私たちのコンテンツスクリプトです。拡張機(jī)能に関連するデータを保持するオブジェクトを作成し、初期化方法を定義します。

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

このメソッドは、ユーザーがクリップボード內(nèi)のテキストで強(qiáng)調(diào)表示されていないか、何も強(qiáng)調(diào)表示されないかどうかをチェックします。この場合、返されるだけです。それ以外の場合は、HTML5音聲合成APIを使用して音聲を生成しようとします。これが失敗した場合、最終的にサードパーティAPIを使用しようとします。

テキストを確認(rèn)する方法は、いくつかのアクションを?qū)g行します。組み込みのgetSelection（）メソッドを使用して強(qiáng)調(diào)表示されたテキストを含むオブジェクトを取得し、toString（）を使用してテキスト文字列に変換しようとします。次に、テキストが強(qiáng)調(diào)表示されない場合、ユーザーのクリップボードでテキストを見つけようとします。これは、ページに入力要素を追加し、焦點(diǎn)を合わせ、execCommand（ 'Paste'）でペーストイベントをトリガーし、プロパティ內(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"
  },

ユーザーがホットキーを使用してテキストからスピーチへの変換を?qū)g行できるようにするため（シフトYとしてハードコード化）、配列を初期化し、OnKeyDownおよびOnKeyUpイベントのイベントリスナーを設(shè)定します。リスナーでは、E.Typeイベントタイプとキーダウンの比較結(jié)果から派生したキープレスのキーコードに対応するインデックスを保存し、ブール値です。したがって、キーが押されると、対応するキーインデックスの値がtrueに設(shè)定され、キーがリリースされると、インデックスの値が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）に存在する場合、ユーザーはそれを使用できることがわかっているため、スピーチが現(xiàn)在実行されているかどうかを確認(rèn)します（pagetospeech.data.speechinprogress booleanを?qū)g行しているかどうかがわかります） 。聲が進(jìn)行中の場合、現(xiàn)在の聲を止めます（TryspeechSynthesizerが新しい音聲を開始するため、同時(shí)に2つのサウンドを作りたくありません）。次に、SpeechInProgressをTrueに設(shè)定し、スピーチが終了するたびに、プロパティを再び偽の値に設(shè)定します。

さて、SpeechTupterCheChunkerを使用する理由について詳しく説明したくありませんが、200-300語を放出した後のクロム停止音聲合成に関連するバグ修正です?；镜膜?、テキスト文字列を多くの小さなチャンク（私たちの場合は120語）に分割し、次々にブロックを使用して音聲合成APIを呼び出します。

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

最後に、HTML5 Voice Synthesis APIが利用できない場合は、APIを試します。すでに実行されているオーディオを停止する必要があるかどうかを知るのと同じプロパティがあります。次に、新しいオーディオオブジェクトを直接作成し、選択したデモAPIがオーディオを直接ストリーミングするため、目的のAPIエンドポイントのURLを渡します。変換するには、APIキーとテキストを渡す必要があります。また、オーディオがエラーをトリガーするかどうかを確認(rèn)します。この場合、この時(shí)點(diǎn)では役立たないというアラートをユーザーに示す必要があります（この特定の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メソッドを呼び出し、バックグラウンドスクリプトからメッセージが受信されるのを待つリスナーを設(shè)定します。正しいメッセージを受け取っている場合（SpeakHighlight ）、またはHotKeyを押した場合、テキストをスピーチ変換オブジェクトに初期化します。

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

結(jié)論

音聲、テキストを音聲に変換する素?cái)长蔆hrome拡張機(jī)能があります。ここでの概念は、さまざまな目的でクロム拡張機(jī)能を作成するために使用できます。興味深いChrome拡張機(jī)能を作成しましたか、それとも構(gòu)築しますか？コメントで教えてください！

このアイデアが好きで、さらに開発したい場合は、GitHubリポジトリに完全なコードを見つけることができます。テストしたい場合は、Chrome Webストアで拡張機(jī)能の本番版を見つけることができます。

參照：

http://ipnx.cn/link/b8b0e04211dce1c104dfcdb685c9b9ad http://ipnx.cn/link/e417baa9cdf342027dba89e89ph89a ??> テキストから音聲Chrome拡張F(tuán)AQ

テキストをインストールしてChrome拡張機(jī)能を音聲化する方法は？

テキストからスピーチのクロム拡張機(jī)能をインストールするのは簡単なプロセスです。まず、Google Chromeブラウザを開き、Chrome Webストアに移動(dòng)します。検索バーに、「聲を出して読む」や「テキストからスピーチ（TTS）」など、インストールする拡張機(jī)能の名前を入力します。検索結(jié)果から拡張機(jī)能をクリックし、[Chromeに追加]ボタンをクリックします。ポップアップウィンドウが確認(rèn)を要求し、「拡張機(jī)能の追加」をクリックします。拡張機(jī)能がインストールされ、アイコンがブラウザツールバーに表示されます。

テキストで聲をスピーチクロム拡張機(jī)能にカスタマイズできますか？

はい、ほとんどのテキストからスピーチクロム拡張機(jī)能を使用すると、スピーチをカスタマイズできます。通常、さまざまなアクセントや言語の男性と女性の聲など、さまざまな聲から選択できます。音聲をカスタマイズするには、ブラウザツールバーの拡張機(jī)能アイコンをクリックし、[設(shè)定]またはオプションメニューに移動(dòng)します。ここでは、音聲、スピード、トーン、ボリュームを変更するオプションを見つける必要があります。

クロム拡張機(jī)能を描くテキストは自由に使用できますか？

多くのテキストからスピーチのクロム拡張機(jī)能は無料で使用できますが、高度な機(jī)能を提供するために少額の料金を請(qǐng)求する人もいます。これらの高度な機(jī)能には、他の音聲、広告なしの使用、オーディオファイルの保存などがあります。インストールする前に、Chrome Webストアの拡張機(jī)能の詳細(xì)を必ず確認(rèn)してください。

テキストを使用してクロム拡張機(jī)能をオフラインで表現(xiàn)できますか？

音聲Chrome拡張機(jī)能を音聲するテキストはオフラインで使用できますが、すべての拡張機(jī)能が実行できるわけではありません。拡張機(jī)能の設(shè)計(jì)方法に依存します。オフラインの使用が重要な場合は、Chrome Webストアの拡張機(jī)能の説明またはインストール後の拡張機(jī)能の設(shè)定を確認(rèn)してください。

テキストを使用してクロム拡張機(jī)能をスピーチするにはどうすればよいですか？

テキストを使用するには、クロム拡張機(jī)能をスピーチするには、最初に、聲を出して読みたいWebページに移動(dòng)します。次に、ブラウザツールバーの拡張機(jī)能アイコンをクリックします。いくつかの拡張機(jī)能はすぐにページを聲に出して読み始めますが、他の拡張機(jī)能は読みたいテキストを選択する必要がある場合があります。通常、拡張ポップアップウィンドウでコントロールを使用して、読み取りを一時(shí)停止、履歴、または停止できます。

テキストを使用して、どのWebサイトでChrome拡張機(jī)能を表明できますか？

Voice To Voice Chrome Extensionsへのほとんどのテキストは、例外を除き、任意のWebサイトで動(dòng)作するはずです。一部のWebサイトには、特定の拡張機(jī)能と互換性の問題がある場合があります。または、拡張機(jī)能が畫像やビデオなどの特定の種類のコンテンツを読み取れない場合があります。問題がある場合は、別の拡張機(jī)能を使用するか、サポートのために拡張機(jī)能の開発者に連絡(luò)してください。

私のデータはテキストからスピーチクロム拡張機(jī)能に安全ですか？

ほとんどのテキストからスピーチのクロム拡張機(jī)能は、あなたのプライバシーを尊重する必要があり、同意なしにデータを収集または共有することはありません。ただし、インストールする前に拡張機(jī)能のプライバシーポリシーを確認(rèn)することをお?jiǎng)幛幛筏蓼?。このポリシーに満足していない場合は、他の拡張機(jī)能を探すことを検討してください。

テキストの音速をChrome Extensionの音聲に変更できますか？

はい、ほとんどのテキストから音聲Chrome拡張機(jī)能を使用すると、スピーチの速度を調(diào)整できます。これは通常、拡張機(jī)能の設(shè)定またはオプションメニューで実行できます。通常、非常に遅いから非常に速いまで、さまざまな速度を選択できます。

テキストを使用して他のブラウザでクロム拡張機(jī)能を表明できますか？

テキストからSpeech Chrome拡張機(jī)能は、Google Chromeで実行されるように設(shè)計(jì)されており、他のブラウザで実行されない場合があります。ただし、多くの拡張開発者は、FirefoxやEdgeなど、他のブラウザ向けの拡張機(jī)能のバージョンも作成します。これらのブラウザの開発者のWebサイトまたは関連する拡張ストアを確認(rèn)して、利用可能なバージョンがあるかどうかを確認(rèn)してください。

テキストを使用してモバイルデバイスでChrome拡張機(jī)能を表明できますか？

chrome拡張機(jī)能を音聲するテキストには、AndroidまたはiOSのChromeで動(dòng)作する場合がありますが、すべての拡張機(jī)能が利用可能であるわけではありません。拡張機(jī)能の設(shè)計(jì)方法に依存します。モバイルの使用が重要な場合は、Chrome Webストアの拡張機(jī)能の説明またはインストール後の拡張機(jī)能の設(shè)定を確認(rèn)してください。

以上がテキストからスピーチのChrome拡張機(jī)能を作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。