Text-to-Speech Selection Reader

WHAT IT DOES

This script adds a floating text-to-speech reader to any webpage. When you select text on the page, a "Play" button appears in the corner. Click it to have the selected text read aloud using your browser's built-in Speech Synthesis API. You can pause, resume, and stop playback using the button or controls in the settings panel. Adjust the speech rate (speed) to your preference, and choose from available system voices. An optional highlight feature highlights the text as it's being read, helping you follow along. All your preferences are saved locally and persist across sessions.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with selectable text—articles, documents, emails, forums, and more. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable TTS reader" toggle enables or disables the floating play button.

- Adjust the "Speech rate" slider to control the reading speed (0.5x to 2.0x).

- Toggle "Highlight text being read" to highlight the text as it's spoken.

- Select a voice from the dropdown to choose a specific voice (available system voices are listed).

- Click "Read selected text" to read the currently selected text.

- Click "Stop reading" to stop the speech immediately.

Select any text on the page and the play button will appear. Click it to start reading. Click the button again to pause or resume.

TECHNICAL SECTION — REAL MECHANISM

The script listens for selection changes using the selectionchange event. When text is selected, it shows the play button. The button's icon changes based on the speech state: play (▶️), pause (⏸️), or resume (▶️). The speech is handled by the Web Speech API (SpeechSynthesis). The selected text is passed to a SpeechSynthesisUtterance object with the configured rate and voice. The utterance's onend and onerror events update the button state and clear highlights. The highlight feature uses the Selection API to get the selected range, then walks through the text nodes in the range and wraps each with a styled span element (background: #eab308). The highlighted elements are stored in an array and cleared when speech ends or is stopped. The speech rate is stored via GM_setValue and loaded on page load. The voice list is populated from window.speechSynthesis.getVoices(), which loads asynchronously.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The Web Speech API is supported on most modern browsers, but voice availability and quality may vary by browser and operating system. The script may not work on pages with restrictive Content Security Policies that block speech synthesis. The highlight feature modifies the DOM temporarily—this may break on pages with complex JavaScript or if the selection spans multiple elements. The script stores only your preferences via GM_setValue. No data is sent externally—all speech synthesis is performed locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.