前言介紹
- 這款 WordPress 外掛「Spoken Word」是 2018-01-20 上架。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2018-01-21，距離現在已有 2659 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.7 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.4 以上。
- 有 7 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
tts | audio | voice | text to speech | speech synthesis |
內容簡介
將文字轉語音（TTS）功能加入內容，包含播放控制、跟讀高亮、多語言支援，以及語速、音調、聲音等設定選項。
使用用戶端本地的文字轉語音引擎，直接與瀏覽器的 speechSynthesis API 介面互動，無需外部要求或依賴。
在文字被唸出的同時，選取與高亮該文字，以便跟讀。
跳過不需要朗讀的元素，包括腳注上標（sup 元素）。
當唸到標題與段落間會加入不同長度的暫停。
播放控制會保持顯示，朗讀時將會將當前的文字持續捲動至畫面內（需瀏覽器支援 position: sticky）。
可使用前進和後退控制進行跳過至下一段落，未朗讀時將選取整個段落以進行朗讀。
可自由選取文字以朗讀該段文字，也可在朗讀時點選文字以立即更改朗讀位置。
多語言支援，允許嵌入帶有 [lang] 屬性的文字，會以對應的語言朗讀（需用戶端安裝該語言）。
設定可更改預設聲音（每個語言分別設定）、朗讀速度與音調（非所有引擎均支援），設定可在朗讀時變更。
按下 ESC 鍵可在朗讀時暫停。
聲音偏好設定會持續保存在 localStorage 中，並在窗口間（在同一網站下）同步變更。
可使用獨立 JS 模式（例如書籤）。
已知在最新版本的 Chrome、Firefox 和 Safari 桌面版中運作正常（在 OSX 上測試），但在 Android 和 iOS 的手機瀏覽器中並不可靠，可能由於這些系統對尚在實驗階段的 speechSynthesis API 支援尚不足夠，或是可程式化選取的範圍與桌面模式不同而導致。出於這些原因，該功能在行動作業系統上預設為停用狀態。
在獨立範例中試用，並測試一些內容。
主題設定
Spoken Word 的設定以 HTML5 dialog 元素的方式呈現，對於仍未支援此功能的瀏覽器，該外掛也捆綁了 dialog-polyfill 。只有在檢測到瀏覽器不支援 dialog 時才會包含該 polyfill。您可透過在您的主題或外掛中加入以下內容來停用 polyfill 的包含:
add_filter( 'spoken_word_include_dialog_polyfill', '__return_false' );
對於有吸頂式頁首的主題（例如 Twenty Seventeen 的導覽選單），您可能需要加入額外的 CSS 來確保吸頂式播放控制不會被遮蔽在吸頂式頁首之後。例如，在 Twenty Seventeen 中，您可以在自訂器（Customizer）的自訂 CSS 中加入以下內容:
@media screen and (min-width: 782px) {
body:not(.admin-bar) .spoken-word--active {
top: calc( 0.5em + 70px );
}
body.admin-bar .spoken-word--active {
top: calc( 0.5em + 32px + 70px );
}
}
內部結構
您可使用書籤方式將 Spoken Word 功能加載到任何網站中，甚至是未安裝該外掛的非 WordPress 網站。重點是使用適當的 contentSelector，如下:
( () => {
const link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://cdn.jsdelivr.net/npm/spoken-word/dist/spoken-word.css';
document.head.appendChild( link );
const script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/spoken-word/dist/spoken-word.js';
document.body.appendChild( script );
setTimeout( () => {
SpokenWord.boot( {
contentSelector: '.entry-content',
playerPositionSelector: 'body',
} );
}, 2000 );
} )();
原文外掛簡介
Add text-to-speech (TTS) to content, with playback controls, read-along highlighting, multi-lingual support, and settings for rate, pitch, and voice.
Uses local text-to-speech engine in user’s browser. Directly interfaces with the speechSynthesis browser API. Zero external requests or dependencies.
Words are selected/highlighted as they are being spoken to allow you to read along.
Skips speaking elements that should not be read, including footnote superscripts (the sup element).
Pauses of different length added are between headings versus paragraphs.
Controls remain in view during playback, with each the current text being spoken persistently being scrolled into view. (Requires browser support for position:sticky.)
Back/forward controls allow you to skip to the next paragraph; when not speaking, the next paragraph to read will be selected entirely.
Select text to read from that point; click on text during speech to immediately change position.
Multi-lingual support, allowing embedded text with [lang] attribute to be spoken by the appropriate voice (assuming the user has it installed).
Settings for changing the default voice (for each language), along with settings for the rate of speech and its pitch. (Not supported by all engines.) Changes can be made while speaking.
Hit escape to pause during playback.
Voice preferences are persistently stored in localStorage, with changes synced across windows (of a given site).
Ability to use JS in standalone manner (such as in bookmarklet).
Known to work in the latest desktop versions of Chrome, Firefox, and Safari. (Tested on OSX.) It does not work reliably in mobile/touch browsers on Android or iOS, apparently due both to the (still experimental) speechSynthesis API not being implemented well enough on those systems and/or programmatic range selection does not work the same way as on desktop. For these reasons, the functionality is disabled by default on mobile operating systems.
Try it out on standalone example with some test content.
Theme Config
The settings for Spoken Word are presented in an HTML5 dialog element. For browsers that do not yet support this feature, the plugin bundles the dialog-polyfill. The polyfill is only included if it is detected the browser does not support dialog natively. The inclusion of the polyfill can be disabled by adding the following to your theme or plugin:
add_filter( 'spoken_word_include_dialog_polyfill', '__return_false' );
For themes that have a sticky header (such as the nav menu in Twenty Seventeen) you may need to add some additional CSS to ensure that the sticky-positioned playback controls do not get hidden behind the sticky header. For example in Twenty Seventeen, you can add the following to the Custom CSS in the Customizer:
@media screen and (min-width: 782px) {
body:not(.admin-bar) .spoken-word--active {
top: calc( 0.5em + 70px );
}
body.admin-bar .spoken-word--active {
top: calc( 0.5em + 32px + 70px );
}
}
Internals
A bookmarklet can be used to load the Spoken Word functionality into any site, even non-WordPress sites where the plugin is not installed. The key is to use the appropriate 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 );
} )();
The spokenWord.initialize() function takes an object as its argument which can have the following properties:
* @param {string} contentSelector - CSS Selector to find the elements for speaking.
* @param {Element} rootElement - Root element within which to look for content.
* @param {Object} chunkifyOptions - Options passed into chunkify.
* @param {boolean} useDashicons - Whether to use Dashicons.
* @param {Object} defaultUtteranceOptions - Default utterance options when none are supplied from localStorage.
The dialog and the controls are rendered using Preact. For a list of all the modules used by this plugin, see the package.json.
This plugin is developed on GitHub where the source can be viewed. Please report issues there. Pull requests welcome. The spoken-word package is also published on npm.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Spoken Word」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Talkie Text To Speech 》Talkie 是一個免費、簡單的文字轉語音外掛，能在您的網站上為您的訪客提供多種語言選擇，可播放、暫停和繼續閱讀您網頁上的文字內容。, 透過短碼（shortcode...。
TTS Engine Post to Speech 》將免費、高品質的文字轉語音功能新增至您的 WordPress 文章中 – 支援 52 種語言。, 功能：, , 使用 TTSEngine.com 的 API 服務免費生成語音。, 可靠且高品質...。