Download spoken word - Download spoken word Quellcode

spoken word

AI-Quellcode

1.0.1

Herunterladen

Gesprochenes Wort

Banner Fügen Sie den Inhalt Text-to-Speech (TTS) mit Wiedergabesteuerungen, Read-Along-Hervorhebungen, mehrsprachiger Unterstützung und Einstellungen für Rate, Tonhöhe und Sprache hinzu.

Mitwirkende: Westonruter
Tags: TTS, Sprachsynthese, Text-zu-Sprache, Audio, Stimme, Read-Along
Erfordert mindestens: 4.7
Bis: 4.9 getestet
Stabiles Tag: 1.0.1
Lizenz: MIT
Benötigt PHP: 5.4

Beschreibung

Fügen Sie den Inhalt Text-to-Speech (TTS) mit Wiedergabesteuerungen, Read-Along-Hervorhebungen, mehrsprachiger Unterstützung und Einstellungen für Rate, Tonhöhe und Sprache hinzu.

Verwendet lokale Text-zu-Sprach-Engine im Browser des Benutzers. Direkt mit der speechSynthesis -Browser -API. Null externe Anfragen oder Abhängigkeiten.
Wörter werden ausgewählt/hervorgehoben, wenn sie gesprochen werden, damit Sie mit dem Lesen gelesen werden können.
Überspringt sprechende Elemente, die nicht gelesen werden sollten, einschließlich Fußnote -Superscripts (das sup -Element).
Pausen unterschiedlicher Länge sind zwischen Überschriften und Absätzen.
Während der Wiedergabe bleiben die Bedienelemente in Sichtweite, wobei jeder aktuelle Text dauerhaft gesprochen wird. (Benötigt Browserunterstützung für position:sticky .)
Mit Rück-/Vorwärts -Steuerelementen können Sie zum nächsten Absatz überspringen. Wenn Sie nicht sprechen, wird der nächste zum Lesen ausgewählte Absatz vollständig ausgewählt.
Wählen Sie von diesem Punkt aus Text aus, um sie zu lesen. Klicken Sie während der Sprache auf Text, um die Position sofort zu ändern.
Mehrsprachiger Unterstützung, damit eingebetteter Text mit [lang] Attribut von der entsprechenden Stimme gesprochen werden (vorausgesetzt, der Benutzer hat es installiert).
Einstellungen zum Ändern der Standardstimme (für jede Sprache) sowie Einstellungen für die Sprachrate und ihre Tonhöhe. (Nicht von allen Motoren unterstützt.) Änderungen können während des Sprechens vorgenommen werden.
Schlagen Sie die Flucht, um während der Wiedergabe eine Pause zu erhalten.
Sprachpräferenzen werden in localStorage anhaltend gespeichert, wobei Änderungen über Windows (einer bestimmten Site) synchronisiert sind.
Fähigkeit, JS in eigenständiger Weise zu verwenden (z. B. im Lesezeichen).
Bekannt, in den neuesten Desktop -Versionen von Chrome, Firefox und Safari zu arbeiten. (Getestet auf OSX.) In Mobil-/Touch -Browsern auf Android oder iOS funktioniert es nicht zuverlässig, anscheinend aufgrund der (noch experimentellen) speechSynthesis -API, die auf diesen Systemen nicht gut genug implementiert ist, und/oder programmatische Reichweite funktioniert nicht auf die gleiche Weise wie auf dem Desktop. Aus diesen Gründen wird die Funktionalität standardmäßig in mobilen Betriebssystemen deaktiviert.

Probieren Sie es mit dem eigenständigen Beispiel mit einigen Testinhalten aus.

Themenkonfiguration

Die Einstellungen für gesprochenes Wort werden in einem HTML5 dialog dargestellt. Für Browser, die diese Funktion noch nicht unterstützen, bündelt das Plugin die Dialog-Polyfill. Die Polyfill ist nur enthalten, wenn er erkannt wird, dass der Browser nicht nativ dialog unterstützt. Die Einbeziehung der Polyfill kann deaktiviert werden, indem Ihr Thema oder Ihr Plugin Folgendes hinzugefügt wird:

 add_filter ( ' spoken_word_include_dialog_polyfill ' , ' __return_false ' );

Für Themen mit einem klebrigen Kopfball (z. B. das NAV-Menü in vierundzwanzig Jahren) müssen Sie möglicherweise einige zusätzliche CSS hinzufügen, um sicherzustellen, dass die Sticky-Positionierten-Wiedergabesteuerungen nicht hinter dem klebrigen Header versteckt werden. In vierundzwanzig Jahren können Sie beispielsweise dem benutzerdefinierten CSS im Customizer Folgendes hinzufügen:

 @media screen and ( min-width : 782 px ) {
	body : not (. admin-bar ) . spoken-word--active {
		top : calc ( 0.5 em + 70 px );
	}
	body . admin-bar . spoken-word--active {
		top : calc ( 0.5 em + 32 px + 70 px );
	}
}

Interna

Ein Lesezeichen kann verwendet werden, um die Funktionalität des gesprochenen Wortes in eine beliebige Website zu laden, selbst Nicht-Wort-Sites, auf denen das Plugin nicht installiert ist. Der Schlüssel besteht darin, den entsprechenden contentSelector zu verwenden:

 ( ( ) => {
	const link = document . createElement ( 'link' ) ;
	link . rel = 'stylesheet' ;
	link . href = 'https://unpkg.com/spoken-word/css/style.css' ;
	document . head . appendChild ( link ) ;

	const script = document . createElement ( 'script' ) ;
	script . src = 'https://unpkg.com/spoken-word/dist/spoken-word.js' ;
	script . addEventListener ( 'load' , ( ) => {
		spokenWord . initialize ( {
			contentSelector : [ /* ? Amend as desired. */
				'.hentry' ,
				'.entry-content' ,
				'.h-entry' ,
				'.e-content' ,
				'[itemprop="articleBody"]' ,
			] . join ( ', ' )
		} ) ;
	} ) ;
	document . head . appendChild ( script ) ;
} ) ( ) ;

Die Funktion spokenWord.initialize() nimmt ein Objekt als Argument an, das die folgenden Eigenschaften haben kann:

 * @param {String} ContentSelector - CSS -Selektor, um die Elemente zum Sprechen zu finden.
 * @param {Element} RootElement - Root -Element, in dem nach Inhalten gesucht werden soll.
 * @param {Object} ChunkifyToptions - Optionen, die in Chunkify übergeben wurden.
 * @param {boolean} usedashicons - Ob Dashicons verwendet werden.
 * @param {Object} DefaultOtteranceOptions - Standard -Äußerungsoptionen Wenn keine von LocalStorage geliefert wird.

Der Dialog und die Steuerelemente werden mit Preact gerendert. Eine Liste aller von diesem Plugin verwendeten Module finden Sie im Paket.json.

Dieses Plugin wird auf Github entwickelt, wo die Quelle angezeigt werden kann. Bitte melden Sie dort Probleme. Anfragen willkommen geheißen. Das spoken-word wird auch auf NPM veröffentlicht.