Linux 软件免费装
Banner图

Spoken Word

开发者 westonruter
更新时间 2018年1月22日 06:21
PHP版本: 5.4 及以上
WordPress版本: 4.9
版权: MIT
版权网址: 版权信息

标签

audio tts voice text-to-speech speech-synthesis read-along

下载

1.0.0 1.0.1

详情介绍:

Add text-to-speech (TTS) to content, with playback controls, read-along highlighting, multi-lingual support, and settings for rate, pitch, and voice. 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.

屏幕截图:

  • Words are highlighted (selected) as they are spoken.
  • Change the rate, pitch, and voices used in speech.
  • Skip ahead to the desired paragraph with controls or via selecting with cursor.

更新日志:

1.0.1 (2018-01-21) Disable functionality in Android and iOS devices by default. 1.0.0 (2018-01-20) Initial release.