LevelNetwork Voxis Accessibility & Audio Summarizer

Official Documentation - Version 1.0.4 (Free)

Welcome to LevelNetwork Voxis Accessibility & Audio Summarizer. This plugin adds an elegant and 100% accessible audio player to your WordPress site, converting your text content into spoken audio (Text-to-Speech) utilizing native Web Speech API browser technologies.

Our goal is to increase accessibility and offer an alternative way for your users to consume your content. This guide explains how to configure the free version of the plugin to its full potential.

2. General Settings

Display Area & Placement

You can choose where the player should be automatically added:

  • Posts: The player will appear on blog posts.
  • Pages: The player will appear on standard pages.
  • Both: The player will be enabled globally.
  • None: The automatic display is disabled. You can then use the [voxis_summarizer_player] shortcode to manually insert the player anywhere on your site, including inside Page Builders.

Additionally, if you use the automatic placement (Posts, Pages, or Both), you can choose to display the player Above the content or Below the content.

Exclude by IDs

If you generally want the player engaged on all posts, but excluded on a few specific pages (like your "Contact Us" or "Terms" page), you can define a comma-separated list of Post or Page IDs. The player will never load on these IDs.

Prepend Title to Audio

By default, Voxis will prepend the Article or Page Title to the audio read-out and AI generation prompts. However, if your Content CSS Selector explicitly captures the title as well, the player may read the title twice. You can uncheck this box to disable automatic prepending of the title.

Content CSS Selector

Crucial Configuration: Ensure the plugin reads only the article content (and not menus, sidebars, or footers) by specifying the correct CSS selector that wraps your text content.

By default, this is set to .entry-content, .post-content, article, which works with 90% of classic WordPress themes. If you use a Page Builder, you might need to adjust it:

  • Elementor: Try .elementor-widget-theme-post-content.
  • Divi: Try .et_pb_post_content.
  • You can inspect your site (Right Click -> Inspect Element) to find the primary wrapper class of your articles and enter it here (e.g., .my-article-content).

Exclude CSS Selectors

If your theme or other plugins (like Reading Time or Social Share buttons) insert content directly into your article body, Voxis might try to read them aloud.

To prevent this, use the Exclude CSS Selectors field to provide a comma-separated list of CSS class names or IDs you wish to ignore.

  • Example: .read-time, .share-buttons, #related-posts

When the player reads the article, it will completely skip the text located inside these HTML elements.

3. Voice, Speed, and Volume Configuration

Customize the default behavior of the text-to-speech audio that visitors will hear.

Click the Test button to hear a short audio preview of the selected voice and volume to evaluate its tone.

4. User Player Controls

In the "Frontend Player Options" section, you can decide how much customization freedom to delegate to the site visitor.

  • Show audio track: Displays the real-time progress bar.
  • Show estimated time length: Shows an estimated duration, e.g., -4:30. This helps users understand the content's listening time.
  • User can modify voice speed: Adds a dropdown menu to the player allowing the visitor to speed up or slow down the voice (from 0.50x to 2.00x). This preference is saved in the browser for future visits.
  • Show volume bar: Integrates an interactive slider that allows the user to lower or raise the volume to their comfort level. Under this, you can configure the Default starting volume.
  • Volume bar notify: If enabled, users will see a helpful notification explaining that native voice volume adjustments take effect at the start of the next sentence.
  • User can select their device voice: Different devices have different voice packs. By enabling this, a user (e.g., on iPhone) can manually switch voices directly from the player.
  • Share Audio Snippet: Adds a share button that lets users generate a special URL linking directly to the exact point in the audio they are currently listening to (via the ?voxis_t=XX parameter), instantly Auto-Playing when clicked.

5. Appearance and Custom CSS

The player is designed to highlight your content while maintaining extreme minimalism. Choose from one of the 10 Predefined Color Palettes to align the audio player with your site's branding.

Custom CSS Editor

For developers or advanced visual customizations, the Custom CSS box supports custom stylesheets.

New: The CSS editor now includes line numbering and built-in syntax validation. If you miss a space, brace, or colon, you'll be warned directly with the line number to prevent broken styles!

Basic structure of classes you can override:

/* General Player Container */
.voxis-player-wrapper {
    /* E.g., make borders rounder */
    border-radius: 20px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Play / Pause Buttons */
.voxis-player-wrapper .voxis-btn {
    font-weight: 700;
    text-transform: uppercase;
}

/* Share Snippet Button */
#voxis-share-btn {
    /* Customize the circular share button */
    border-radius: 50%;
}

/* Share Tooltip / Popup Box */
#voxis-share-tooltip {
    /* Modify tooltip appearance or width */
    background: var(--voxis-btn-bg);
}
#voxis-share-link {
    /* Style the input box containing the copyable URL */
    background: #fff;
}

/* Progress Time Tooltip */
#voxis-time-tooltip {
    background: var(--voxis-btn-bg);
    color: var(--voxis-btn-text);
}

/* Progress Track (Background and Fill) */
.voxis-track-container {
    background-color: var(--voxis-bg); 
}
.voxis-track-progress {
    background-color: var(--voxis-status-color); 
}

/* Volume Control Container & Slider */
.voxis-volume-container {
    background-color: var(--voxis-bg);
}
.voxis-volume-progress {
    background-color: var(--voxis-status-color);
}
.voxis-volume-label {
    font-size: 11px;
    color: var(--voxis-icon-color);
}

/* Text Highlight & Tracking Buttons (PRO) */
.voxis-highlight, .voxis-tracking {
    /* Customize the sync option buttons */
    border-radius: 50%;
}

6. Troubleshooting

7. Premium Version (PRO)

To take your audio accessibility to the highest professional level, we offer an upcoming Premium version with major upgrades:

  • AI Audio Summaries: Automatically condense long articles into quick 1-3 minute TL;DR text and audio briefings instead of reading the entire text, using AI engines like GPT-4o Mini, Claude 3, or Google Gemini. Includes automatic MP3 generation for the summary using your Neural Voice. Perfect for busy users.
  • Hyper-Realistic Neural Voices: Bypass the basic browser TTS voices. Provide studio-quality AI voices (like OpenAI, ElevenLabs) that sound perfectly natural and identical on all un-supported platforms and older browsers.
  • Text Highlighting Sync: Visually highlights the text word-by-word as it's read by the player, drastically improving reading comprehension (Disabled during AI Summaries).
  • Draggable Floating Player: The player remains pinned to the corner of the scrolling window, so the user can listen even while navigating deep into the article page. It can be dragged around by the user.
  • Audio Jump Controls: Let users skip forward or backward incrementally (e.g. +/- 10s) while listening to Neural Voices or AI Summaries.
  • MP3 Download: Allow users to download your Cloud/Neural Voice audio file as an MP3 to listen offline (requires Cloud Voice feature).
  • Bulk Generator: Let the plugin run in the background to automatically process all your existing posts and pages, generating MP3s and AI Summaries without you lifting a finger. It even intelligently skips content that has already been generated!
  • Individual Post Control Metabox & Row Actions: A simple box in the post editor and list action rows allowing you to individually trigger or delete audio and summary generations when you heavily update a post.

For more information, please visit Level Network.

Designed and Developed by Level Network.