Pronunciation Audio Button Injector

WHAT IT DOES

Pronunciation Audio Button Injector adds a small audio play button next to every word on foreign language web pages. When you click the button, the Web Speech API speaks the word aloud using a natural, native-like voice. This turns any webpage into an interactive language learning tool—read along while hearing correct pronunciation, practice listening comprehension, and build your vocabulary with accurate audio feedback. The tool supports multiple languages including Spanish, French, German, Italian, Portuguese, English, Japanese, Korean, Chinese, and Russian, with auto-detection that picks up the page's language automatically. You can customize button appearance with different styles (inline, superscript, or float) and colors, adjust speech speed and pitch, and set a minimum word length to avoid cluttering the page with buttons on very short words. Perfect for language learners, travelers, translators, and anyone reading content in a foreign language.

WHERE IT RUNS

This script runs on any webpage containing text—news articles, blog posts, Wikipedia, social media, emails, or any other content. It operates entirely within your browser tab, using the browser's built-in Web Speech API for text-to-speech. The script cannot access other tabs, your browsing history, bookmarks, downloads, or any data outside the current page. All settings—including target language, button style, button color, speech rate, pitch, minimum word length, and auto-inject preference—are stored locally using GM_setValue and never transmitted anywhere.

HOW TO USE

After installing with the BotGentz extension, the script automatically injects audio buttons next to words on every page you visit (if auto-inject is enabled). Each word longer than the minimum length gets a small circular ▶ button. Click any button to hear that word pronounced in the target language. The button lights up green while speaking, then returns to its normal color. Use the panel to customize your experience: select a specific target language or use auto-detect, choose button style (inline next to the word, superscript, or floating), pick a button color, and adjust speech rate and pitch. Click "Inject Buttons" to manually add buttons after changing settings, or "Clear Buttons" to remove them all. Use the "Test Pronunciation" button to hear a sample word from the current page.

THE REAL MECHANISM

The script uses the Web Speech API's SpeechSynthesis interface, which is built into all modern browsers. It scans the page's text nodes using a TreeWalker, filtering out content inside script, style, and noscript tags. For each word that meets the minimum length requirement, the script wraps it in a span element and appends a button. When clicked, the script creates a SpeechSynthesisUtterance with the word's text, sets the language based on user preference or page detection, configures speech rate and pitch, and selects an appropriate native voice from the browser's available voices. Voice selection prioritizes voices that match the target language and are marked as default, falling back to the first available voice for that language. The script uses event listeners for speech completion and error handling, with visual feedback on the button. All DOM manipulation uses safe methods with no innerHTML from untrusted content.

THE PANEL

The Pronunciation Injector panel is a BGPanel component that you can drag anywhere on your screen by its header. It snaps to the nearest edge when released, keeping your workspace organized. The panel collapses to a small bubble showing only the emoji icon when minimised—click to expand it again. You can resize the panel horizontally to see more of the settings. Press the Escape key to collapse the panel instantly. Your panel position and size are saved per-site.

PLEASE NOTE

This script requires the free BotGentz browser extension to function. The Web Speech API requires an internet connection to download voices on some platforms, and voice quality varies by browser and operating system. Some browsers may limit concurrent speech synthesis or have different voice selections. The script never reads or writes password fields, hidden inputs, or file inputs. It stores only your target language, button style, button color, speech rate, pitch, minimum word length, and auto-inject preference locally. No page content, spoken audio, or personal information is ever collected, transmitted, or shared.