spoken word下載 - spoken word字源代碼下載

spoken word

Ai源碼

1.0.1

下載

口語

將文本對語音（TTS）添加到內容中，具有播放控件，讀取突出顯示，多語言支持以及速率，音高和語音的設置。

貢獻者： Westonruter
標籤： TTS，語音合成，文本到語音，音頻，語音，讀取
至少需要： 4.7
測試到： 4.9
穩定標籤： 1.0.1
許可證：麻省理工學院
需要PHP： 5.4

描述

將文本對語音（TTS）添加到內容中，具有播放控件，讀取突出顯示，多語言支持以及速率，音高和語音的設置。

在用戶瀏覽器中使用本地文本對語音引擎。直接與speechSynthesis瀏覽器API接口。零外部請求或依賴項。
說話時會選擇/突出顯示，以便您繼續閱讀。
跳過不應閱讀的元素，包括腳註上標（ sup元素）。
添加不同長度的停頓是在標題與段落之間的。
在播放期間，控件仍在查看，每個當前文本都持續滾動到視圖中。（需要瀏覽器支持position:sticky 。）
向後/向前的控件使您可以跳到下一段；當不說話時，將完全選擇要閱讀的下一段。
從此開始選擇要閱讀的文本；在語音期間單擊文本以立即更改位置。
多語言支持，允許適當的語音使用具有[lang]屬性的嵌入式文本（假設用戶已安裝了它）。
更改默認語音的設置（每種語言），以及語音及其音調速度的設置。（所有引擎都不支持。）可以在講話時進行更改。
在播放期間打開逃生。
語音偏好持續存儲在localStorage中，並且在Windows（給定站點的）上同步更改。
能夠以獨立方式使用JS（例如在書籤中）。
已知可以在Chrome，Firefox和Safari的最新桌面版本中工作。（在OSX上進行了測試。）它在Android或iOS上的移動/觸摸瀏覽器中無法可靠地工作，這顯然是由於（仍在實驗性的） speechSynthesis API在這些系統和/或程序化範圍選擇上的實現不夠好，與桌面上的方法相同。由於這些原因，默認情況下，在移動操作系統上可以禁用該功能。

在具有一些測試內容的獨立示例上嘗試一下。

主題配置

口語的設置在HTML5 dialog元素中介紹。對於尚未支持此功能的瀏覽器，該插件將捆綁在對話框中。僅當檢測到瀏覽器本身不支持dialog時，才包括多填充。可以通過將以下內容添加到您的主題或插件來禁用多填充：

 add_filter ( ' spoken_word_include_dialog_polyfill ' , ' __return_false ' );

對於具有粘頭標頭的主題（例如二十7個17中的導航菜單），您可能需要添加一些其他CSS，以確保粘性位置的播放控件不會隱藏在粘性標頭後面。例如，在二十7個中，您可以將以下內容添加到Customizer中的自定義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} contentsEtector -CSS選擇器以找到語言的元素。
 * @param {element} rootElement-在其中尋找內容的根元素。
 * @param {object} chunkifyOptions-選項傳遞到塊狀。
 * @param {boolean} underashicons-是否使用dashicons。
 * @param {object} defaultusteranceOptions-當localStorage提供無提供時，默認的話語選項。

對話框和控件是使用預先反應進行的。有關此插件使用的所有模塊的列表，請參見package.json。

該插件是在可以查看源的GitHub上開發的。請在那里報告問題。拉動請求歡迎。 spoken-word包裝也在NPM上發布。