ホームページ >ウェブフロントエンド >jsチュートリアル >テキストからスピーチのChrome拡張機能を作成します

テキストからスピーチのChrome拡張機能を作成します

Jennifer Anistonオリジナル: 2025-02-18 11:30:16798ブラウズ

Create a Text-to-Speech Chrome Extension

コアポイント

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

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

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

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

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

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

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

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

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

画像（拡張機能のアイコンなど）

htmlファイル（たとえば、ユーザーが拡張機能のアイコンをクリックすると表示されるポップアップウィンドウ）
javaScriptファイル（後で説明するコンテンツやバックグラウンドスクリプトなど）
アプリケーションが使用できる他のリソース（スタイルシートなど）
について

クロム拡張の基本

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

<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>

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

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

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

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

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

ページを作成してChrome拡張機能最初に、ユーザーが拡張機能のアイコンをクリックすると発射されるイベントリスナーを接続する唯一のバックグラウンドスクリプトを作成します。これが発生した場合、Chrome.tabs.sendmessage（tabid、message、callback）メソッドを使用するsendmessage関数を呼び出します。。 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>

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

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

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

最後に、HTML5 Voice Synthesis APIが利用できない場合は、APIを試します。すでに実行されているオーディオを停止する必要があるかどうかを知るのと同じプロパティがあります。次に、新しいオーディオオブジェクトを直接作成し、選択したデモAPIがオーディオを直接ストリーミングするため、目的のAPIエンドポイントのURLを渡します。変換するには、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 ）、またはHotKeyを押した場合、テキストをスピーチ変換オブジェクトに初期化します。

<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拡張機能を作成しましたか、それとも構築しますか？コメントで教えてください！

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

参照：

https://www.php.cn/link/b8b0e04211dce1c104dfcdb685c9b9ad https://www.php.cn/link/e417baa9cdf342027dba89e89ph89a 🎜> テキストから音声Chrome拡張FAQ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上がテキストからスピーチのChrome拡張機能を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：モジュラーJavaScript：SystemJS＆JSPMの初心者ガイド次の記事：モジュラーJavaScript：SystemJS＆JSPMの初心者ガイド

続きを見る