spoken wordダウンロード - spoken wordソースコードのダウンロード

spoken word

AI ソースコード

1.0.1

ダウンロード

話し言葉

バナー再生コントロール、読み取り - ハイライト、多言語サポート、レート、ピッチ、音声の設定を使用して、テキストツースピーチ（TTS）をコンテンツに追加します。

貢献者： Westonruter
タグ： TTS、音声合成、テキストからスピーチ、オーディオ、音声、読み取り
少なくとも必要です： 4.7
テスト：4.9まで
安定したタグ： 1.0.1
ライセンス： MIT
PHP：5.4が必要です

説明

再生コントロール、読み取り - ハイライト、多言語サポート、レート、ピッチ、音声の設定を使用して、テキストツースピーチ（TTS）をコンテンツに追加します。

ユーザーのブラウザでローカルテキストからスピーチへのエンジンを使用します。 speechSynthesis Browser APIと直接インターフェイスします。ゼロ外部リクエストまたは依存関係。
単語は、あなたが一緒に読むことができるように話されているので、選択/強調表示されます。
脚注の上付き文字（ sup要素）を含む、読むべきではない話す要素をスキップします。
追加された異なる長さの一時停止は、見出しと段落の間にあります。
再生中はコントロールが視界のままであり、現在のテキストがそれぞれ視界にスクロールされていると言われています。（ position:sticky 。）
バック/フォワードコントロールを使用すると、次の段落までスキップできます。話していないとき、読む次の段落は完全に選択されます。
その時点から読むテキストを選択します。スピーチ中にテキストをクリックして、すぐに位置を変更します。
[lang]属性を備えた埋め込みテキストを許可する多言語サポート（ユーザーがインストールされていると仮定して）によって話されることを許可します。
デフォルトの音声を変更するための設定（各言語）、および音声率とそのピッチの設定。（すべてのエンジンでサポートされていません。）話し合っている間、変更を加えることができます。
再生中に脱出をして一時停止します。
音声の好みは、（特定のサイトの）Windows全体で変化が同期され、 localStorageに永続的に保存されます。
スタンドアロンでJSを使用する機能（ブックマークレットなど）。
Chrome、Firefox、およびSafariの最新のデスクトップバージョンで機能することが知られています。（OSXでテストされています。）AndroidまたはiOSのモバイル/タッチブラウザでは確実に機能しません。明らかに、（まだ実験的な） speechSynthesis APIがこれらのシステムやプログラム範囲の選択が十分に実装されていないため、デスクトップと同じように機能しません。これらの理由により、機能はデフォルトでモバイルオペレーティングシステムで無効になります。

いくつかのテストコンテンツを使用して、スタンドアロンの例で試してみてください。

テーマ構成

話し言葉の設定は、HTML5 dialog要素に表示されます。この機能をまだサポートしていないブラウザの場合、プラグインはダイアログポリフィルをバンドルします。ポリフィルは、検出された場合にのみ含まれています。ブラウザはdialogネイティブにサポートしません。ポリフィルを含めることは、テーマまたはプラグインに以下を追加することで無効にすることができます。

 add_filter ( ' spoken_word_include_dialog_polyfill ' , ' __return_false ' );

スティッキーヘッダー（17のNAVメニューなど）を備えたテーマでは、スティッキーポジションの再生コントロールが粘着性ヘッダーの後ろに隠されないようにするために、いくつかのCSSを追加する必要がある場合があります。たとえば、27の17では、カスタマイザーのカスタムCSSに以下を追加できます。

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

内部

ブックマークレットは、プラグインがインストールされていないワードプレス以外のサイトであっても、任意のサイトに話し言葉の機能をロードするために使用できます。重要なのは、適切なcontentSelectorを使用することです。

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

spokenWord.initialize()関数は、次のプロパティを持つことができる引数としてオブジェクトを取得します。

 * @param {string} contentselector -cssセレクターで話すための要素を見つけます。
 * @param {element} rootelement-コンテンツを探すためのルート要素。
 * @param {object} chunkifyoptions- chunkifyに渡されたオプション。
 * @param {boolean} usedashicons-ダシコンを使用するかどうか。
 * @param {object} defaultUpterCanceOptions- localStorageから提供されていない場合のデフォルトの発話オプション。

ダイアログとコントロールは、PREACTを使用してレンダリングされます。このプラグインで使用されているすべてのモジュールのリストについては、package.jsonを参照してください。

このプラグインは、ソースを表示できるGitHubで開発されています。そこに問題を報告してください。リクエストをプル歓迎。 spoken-wordパッケージはNPMにも公開されています。