Kernpunkte

In diesem Artikel wird erl?utert, wie eine Erweiterung (Chrome Browser Text-to-Speech) erstellt wird, bei der die API für die HTML5-Voice-Synthese oder eine API von Drittanbietern verwendet wird, um hervorgehobene Text- oder Zwischenboardinhalte in Sprache umzuwandeln.

Chrome -Erweiterungen enthalten normalerweise Manifestdateien (Metadatendateien), Bilder (z. B. Erweiterungssymbole), HTML -Dateien, JavaScript -Dateien und andere Ressourcen (z. B. Stilbl?tter).

TTS -Erweiterung wartet darauf, dass der Benutzer auf sein Symbol klickt oder einen bestimmten Hotkey (Shift Y) drückt, und konvertiert dann den hervorgehobenen Text- oder Zwischenablage -Inhalt in die Sprache.

Der Code für die Erweiterung enth?lt Hintergrundskripte und Inhaltskripte, Berechtigungen zum Zugriff auf aktive Tags und Benutzerklemme sowie überprüfung hervorgehobener Text- oder Zwischenablettungsinhalt, Initialisierung von Erweiterungen, Hinzufügen von Hotkeys und Konvertierungen in die Sprachmethode.

Wenn die HTML5-Voice-Synthese-API nicht verfügbar ist, verwendet die Erweiterung eine API von Drittanbietern wie Voice RSS, um Text in Sprache umzuwandeln. Die Erweiterung enth?lt auch eine Fehlerbehebung, um das Problem zu beheben, dass Chrom die Aussprache nach 200-300 W?rtern stoppt.

Dieser Artikel wurde von Marc Towler überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, um den Inhalt von SitePoint perfekt zu machen!

Text zur Sprache (auch als Sprachsynthese oder TTS bezeichnet) ist ein Weg, um menschliche Sprache künstlich zu produzieren. Dies ist laut Wikipedia nichts Neues, dass Menschen versucht haben, Maschinen zu schaffen, die mindestens tausend Jahre lang menschliche Stimme produzieren k?nnen.

tts wird heute in unserem Leben immer h?ufiger und jeder kann davon profitieren. Wir werden dies demonstrieren, indem wir eine Chromerweiterung erstellen, die Text in Sprache umwandelt. HTML5 bringt uns eine Sprachsynthese -API, mit der jede Webanwendung willkürliche Textzeichenfolgen in Sprache und KOSTENLOS an Benutzer umwandeln kann.

Chromverl?ngerungen enthalten normalerweise Folgendes:

1. Talentdatei (erforderliche Datei mit Metadaten)
2. Bild (wie Symbol für die Erweiterung)
3. HTML -Datei (z. B. ein Popup -Fenster, das angezeigt wird, wenn der Benutzer auf das Symbol der Erweiterung klickt)
4. JavaScript -Dateien (z. B. Inhalte und/oder Hintergrundskripte, die sp?ter erkl?rt werden)
5. Alle anderen Ressourcen, die die Anwendung verwenden kann (z. B. Stilbl?tter)

über Seite der Sprachausdehnung

Aufgrund der Popularit?t von Chrom und des Aufstiegs von TTs werden wir eine Chromverl?ngerung erstellen, die Text in die Stimme umwandelt. Die Erweiterung wartet darauf, dass der Benutzer auf sein Symbol klickt oder auf einen speziellen Hotkey (Shift Y) drückt, und dann versuchen, zu finden, was der Benutzer auf der Seite hervorhebt, die sie derzeit anzeigen, oder zu versuchen, zu finden, was in ihre Zwischenablage kopiert wird. Wenn etwas gefunden wird, wird zun?chst versucht, sie mit der HTML5-Sprachsynthese-API in Sprache umzuwandeln, und wenn diese API nicht verfügbar ist, wird eine API von Drittanbietern aufgerufen.

Grundlagen der Chromverl?ngerung

Jede Chrome -Erweiterung erfordert eine Datei namens Manifest.json. Das Manifest ist eine JSON -Datei, die Daten enth?lt, die für die Anwendung von den Namen, Beschreibung, Symbol und Autor der Erweiterung von entscheidender Bedeutung sind, zu den Daten, die die Anforderungen der Erweiterung definieren - auf welchen Websites die Erweiterung in der Lage sein sollte, ausgeführt zu werden (diese werden (diese werden Seien Sie Berechtigungen, die der Benutzer gew?hren muss) oder welche Dateien ausgeführt werden sollen, wenn der Benutzer eine bestimmte Website durchstürzt.

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

Unsere Liste beginnt mit dem Namen, Beschreibung, Autor, Version und Symbol der Erweiterung. Sie k?nnen viele Symbole im Icons -Objekt unterschiedliche Gr??en zur Verfügung stellen.

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

Dann definieren wir ein Hintergrundskript namens Hintergrund.min.js im Hintergrundobjekt (beachten Sie, dass wir eine Minimierungsdatei verwenden). Hintergrundskripte sind langlebige Skripte, die weiter ausgeführt werden, bis der Browser des Benutzers geschlossen oder die Erweiterung deaktiviert ist.

haben wir eine Reihe von content_scripts, die Chrome anweisen, zwei JavaScript -Dateien auf jeder Website -Anforderung zu laden " http: //*/*" und "https: //*/*" "und" https: //*/*"". Im Gegensatz zu Hintergrundskripten k?nnen Inhaltskripte auf die DOM der tats?chlichen Website zugreifen, die der Benutzer besucht. Inhaltskripte k?nnen das DOM einer einzelnen Webseite lesen und ?ndern. Daher k?nnen unsere Polyfill.min.js und ext.min.js alle Daten auf jeder Webseite lesen und ?ndern.

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

Warten Sie! Wir haben auch ein Array namens Berechtigungen, das wir beantragen, nur auf die Webseite (Aktivit?ts -Tag) zugreifen zu k?nnen, die derzeit vom Benutzer ge?ffnet wird. Wir fordern auch eine weitere Berechtigung namens ClipboardRead an, mit der wir die Zwischenablage des Benutzers lesen k?nnen (damit wir den Inhalt in Stimme umwandeln k?nnen).

eine Seite zum Voice Chrome -Erweiterung schreiben

Erstens erstellen wir unser einziges Hintergrundskript, das einen Ereignish?rer anschlie?t, der feuert, wenn der Benutzer auf das Symbol der Erweiterung klickt. In diesem Fall werden wir die SendMessage -Funktion aufrufen, die die Methode von Chrome.Tabs.SendMessage (Tabid, Nachricht, Rückruf) verwendet, um eine Nachricht an unser Inhaltskript zu senden (das Inhaltskript kann das DOM lesen und herausfinden, was der Benutzer hervorhebt . Inhalt und/oder Inhalt des Benutzers in der Zwischenablage). Wir verwenden die Methode von Chrome.tabs.Query, um eine Nachricht an die aktuell ge?ffnete Registerkarte zu senden - da wir daran interessiert sind und was wir zugreifen k?nnen - die Parameter der Methode enthalten eine Rückruffunktion, die die folgenden verwenden : Abfragen Sie den Parameteraufruf für die Registerkarte "Matching".

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

Jetzt ist das ausführlichere Ding unser Content -Skript. Wir erstellen ein Objekt, um einige Daten in Bezug auf die Erweiterung zu enthalten und dann unsere Initialisierungsmethode zu definieren.

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

Diese Methode prüft, ob der Benutzer nicht mit Text oder nichts in der Zwischenablage hervorgehoben wird, und in diesem Fall wird er nur zurückgegeben. Andernfalls wird versucht, Sprache unter Verwendung der HTML5 -Sprachsynthese -API zu generieren. Wenn dies fehlschl?gt, wird schlie?lich versucht, eine API von Drittanbietern zu verwenden.

So überprüfen Sie den Text, führt mehrere Aktionen aus. Es wird versucht, ein Objekt mit hervorgehobenem Text mit der integrierten GetSelection () -Methode zu erhalten und ihn mit toString () in eine Textzeichenfolge umzuwandeln. Wenn der Text nicht hervorgehoben ist, wird versucht, den Text in der Zwischenablage des Benutzers zu finden. Dies geschieht, indem es der Seite ein Eingabeelement hinzufügt, es fokussiert, ein Paste -Ereignis mit ExecCommand ('Paste') ausgel?st und dann den in diese Eingabe eingefügten Text in einer Eigenschaft gespeichert. Dann l?scht es die Eingabe. In beiden F?llen gibt es zurück, was es gefunden hat.

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

Erm?glicht es dem Benutzer, die Konvertierung von Text zu Sprache mithotkeys (hart als Verschiebung y) auszuführen, ein Array initialisieren und einen Ereignish?rer für die Ereignisse von Onkeydown- und OnKeyup-Ereignissen einrichten. Im H?rer speichern wir einen Index, der dem Schlüsselcode des gedrückten Schlüssels entspricht, der aus dem Vergleichsergebnis des Ereignistyps und des Tastens von E. Typs abgeleitet ist und ein boolescher Wert ist. Wenn eine Taste gedrückt wird, wird der Wert des entsprechenden Schlüsselindex auf true gesetzt, und wenn eine Taste freigegeben wird, wird der Wert des Index in False ge?ndert. Wenn beide Indizes 16 und 84 wahre Werte enthalten, wissen wir, dass der Benutzer unsere Hotkeys verwendet, sodass wir den Text in Sprachkonvertierung initialisieren.

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

Um Text in Sprache umzuwandeln, verlassen wir uns auf die Methode der Tryspeechsynthesizer (). Wenn die HTML5 -Sprachsynthese im Browser des Benutzers (window.speechsynthese) vorhanden ist, wissen wir, dass der Benutzer sie verwenden kann. Wir überprüfen also, ob die Sprache derzeit ausgeführt wird (wir wissen, ob sie durch die pagetspeech.data.speechinprogress boolean l?uft) . Wenn die Stimme im Gange ist, werden wir die aktuelle Stimme stoppen (da Tryspeechsynthesizer eine neue Stimme startet, m?chten wir nicht gleichzeitig zwei Ger?usche machen). Anschlie?end setzen wir Sprachprogress auf True, und wenn die Rede abgeschlossen ist, setzen wir die Eigenschaft erneut auf einen falschen Wert.

Nun, ich m?chte nicht n?her darauf eingehen, warum wir Sprachankecher verwenden, aber es handelt sich um eine Fehlerbehebung im Zusammenhang mit der Chrome-Stoping-Sprachsynthese, nachdem sie 200-300 W?rter abgelegt haben. Grunds?tzlich spaltet es unsere Textzeichenfolge in viele kleinere Stücke (in unserem Fall 120 W?rter) und ruft die Sprachsynthese -API mit einem Block nach dem anderen auf.

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

Schlie?lich werden wir eine API ausprobieren, wenn die API der HTML5 -Sprachsynthese nicht verfügbar ist. Wir haben die gleichen Eigenschaften, um zu wissen, ob wir das bereits laufende Audio stoppen müssen. Anschlie?end erstellen wir ein neues Audioobjekt direkt und übergeben ihm die URL des gewünschten API -Endpunkts, da die Demo -API, die wir ausgew?hlt haben, das Audio direkt gestreamt. Wir müssen nur den API -Schlüssel und den zu konvertierten Text übergeben. Wir prüfen auch, ob der Audio einen Fehler ausl?st. In diesem Fall müssen wir dem Benutzer nur eine Benachrichtigung zeigen, die wir zu diesem Zeitpunkt nicht helfen k?nnen (wir testen den Code für diese spezifische API, Voice RSS, und erm?glicht 300 Anforderungen für die freie Hierarchie).

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

Schlie?lich nennen wir au?erhalb eines lokalen Bereichs die Addhotkeys -Methode, mit der der Benutzer auf den richtigen Hotkey drückt, und wir stellen einen Listener ein, der darauf wartet, dass die Nachricht vom Hintergrundskript empfangen wird. Wenn Sie die richtige Nachricht ( speakHighlight ) erhalten oder den Hotkey drücken, werden wir den Text in Sprachkonvertierungsobjekt initialisieren.

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

Schlussfolgerung

Stimme, wir haben eine sch?ne Chromerweiterung, die Text in die Stimme umwandelt. Das Konzept hier kann verwendet werden, um Chromverl?ngerungen für verschiedene Zwecke zu erstellen. Haben Sie interessante Chromverl?ngerungen gebaut oder m?chten Sie eines bauen? Bitte lassen Sie es mich in den Kommentaren wissen!

Wenn Ihnen diese Idee gef?llt und sie weiterentwickeln m?chten, finden Sie den vollst?ndigen Code in unserem Github -Repository. Wenn Sie es testen m?chten, finden Sie eine Produktionsversion der Erweiterung im Chrome Web Store.

References: http://ipnx.cn/link/b8b0e04211dce1c104dfcdb685c9b9ad http://ipnx.cn/link/e417baa9cdf34202f71b55a27da899e8

Text zu Sprachchromerweiterung FAQ

Wie installiere ich den Text in die Erweiterung der Voice -Chrome?

Die Installation der Chrome-Erweiterung von Text-to-Speech-Chrom ist ein einfacher Prozess. ?ffnen Sie zun?chst Ihren Google Chrome -Browser und navigieren Sie zum Chrome -Webladen. Geben Sie in der Suchleiste den Namen der Erweiterung ein, die Sie installieren m?chten, z. B. "Vorlesen" oder "Text-to-Speech (TTS)". Klicken Sie aus den Suchergebnissen auf die Erweiterung und klicken Sie auf die Schaltfl?che "Zu Chrome hinzufügen". Ein Pop-up-Fenster scheint nach Best?tigung zu fragen und auf "Erweiterung hinzufügen" zu klicken. Die Erweiterung wird installiert und in Ihrer Browser -Symbolleiste wird ein Symbol angezeigt.

Kann ich meine Stimme in meinem Text an Sprachchromeerweiterung anpassen?

Ja, die meisten Erweiterungen der Sprachchrome von Text -to Speech -Chrom erm?glichen es Ihnen, Ihre Sprache anzupassen. Sie k?nnen normalerweise aus einer Vielzahl von Stimmen w?hlen, einschlie?lich m?nnlicher und weiblicher Stimmen in verschiedenen Akzenten und Sprachen. Um Ihre Stimme anzupassen, klicken Sie in der Browser -Symbolleiste auf das Erweiterungssymbol und navigieren Sie zu den Einstellungen oder Optionen. Hier sollten Sie Optionen finden, um Sprache, Geschwindigkeit, Ton und Lautst?rke zu ?ndern.

Ist der Text zur Sprachchrom -Erweiterung kostenlos zu verwenden?

Viele Text-zu-Sprach-Chromverl?ngerungen k?nnen kostenlos verwendet werden, einige k?nnen jedoch eine geringe Gebühr erheben, um erweiterte Funktionen anzubieten. Diese erweiterten Funktionen k?nnen andere Sprach-, Anzeigenverwendungen oder Speichern von Audiodateien umfassen. überprüfen Sie die Details der Erweiterung im Chrome -Web Store vor der Installation.

Kann ich den Text offline verwenden, um Chrome -Erweiterung zu spricht?

Ein gewisser Text zur Sprachchrom -Erweiterungen kann offline verwendet werden, aber nicht alle Erweiterungen k?nnen dies tun. Es h?ngt davon ab, wie die Erweiterung gestaltet ist. Wenn Ihnen die Offline -Verwendung wichtig ist, überprüfen Sie die Beschreibung der Erweiterung im Chrome -Web Store oder die Einstellungen für die Erweiterung nach der Installation.

Wie verwendet ich den Text zur Sprachchrom -Erweiterung?

Navigieren Sie zuerst zur Webseite, die Sie vorlesen m?chten. Klicken Sie dann auf das Erweiterungssymbol in der Browser -Symbolleiste. Einige Erweiterungen lesen sofort die Seite vor, w?hrend andere m?glicherweise den Text ausw?hlen, den Sie lesen m?chten. Normalerweise k?nnen Sie Steuerelemente im Erweiterungs-Popup-Fenster verwenden, um zu pausieren, wieder aufzunehmen oder nicht mehr zu lesen.

Kann ich den Text auf einer Website zum Voice Chrome -Erweiterung verwenden?

Die meisten Textverl?ngerungen für Sprachchrom sollten auf einer beliebigen Website mit Ausnahmen funktionieren. Einige Websites haben m?glicherweise Kompatibilit?tsprobleme mit bestimmten Erweiterungen, oder Erweiterungen k?nnen m?glicherweise nicht in der Lage sein, bestimmte Arten von Inhalten wie Bilder oder Videos zu lesen. Wenn Sie Probleme haben, verwenden Sie eine andere Erweiterung oder wenden Sie sich an den Entwickler der Erweiterung, um sie zu unterstützen.

Ist meine Daten in Text -to Speech -Chrom -Erweiterung sicher?

Die meisten Chrom-Erweiterungen von Text-to-Speech-Chrom sollten Ihre Privatsph?re respektieren und Ihre Daten nicht ohne Ihre Zustimmung sammeln oder weitergeben. Es ist jedoch am besten, die Datenschutzrichtlinie der Erweiterung vor der Installation zu überprüfen. Wenn Sie mit dieser Richtlinie nicht zufrieden sind, sollten Sie nach anderen Erweiterungen suchen.

Kann ich die Sprachgeschwindigkeit im Text in der Chromverl?ngerung ?ndern?

Ja, die meisten Erweiterungen der Sprachchrome von Text -to -Sprache k?nnen die Geschwindigkeit Ihrer Sprache anpassen. Dies kann normalerweise im Einstellungs- oder Optionsmenü der Erweiterung erfolgen. Normalerweise k?nnen Sie eine Reihe von Geschwindigkeiten von sehr langsam bis sehr schnell ausw?hlen.

Kann ich den Text verwenden, um Chrome -Erweiterung in anderen Browsern zu sprachen?

Text zur Sprachchrome -Erweiterung ist so ausgelegt, dass sie in Google Chrome ausgeführt wird und m?glicherweise nicht in anderen Browsern ausgeführt wird. Viele Erweiterungsentwickler erstellen jedoch auch Versionen ihrer Erweiterungen für andere Browser wie Firefox oder Edge. Bitte überprüfen Sie die Website des Entwicklers oder den entsprechenden Erweiterungsgesch?ft, damit diese Browser feststellen, ob eine Version verfügbar ist.

Kann ich den Text verwenden, um Chrome -Erweiterung auf meinem mobilen Ger?t zu sprachen?

Ein gewisser Text zur Sprachverchrom -Erweiterungen kann für Chrome auf Android oder iOS funktionieren, aber nicht alle Erweiterungen sind verfügbar. Es h?ngt davon ab, wie die Erweiterung gestaltet ist. Wenn Ihnen die mobile Verwendung wichtig ist, überprüfen Sie die Beschreibung der Erweiterung im Chrome -Web Store oder die Einstellungen für die Erweiterung nach der Installation.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Chrome-Erweiterung von Text-to-Speech-Chrom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!