Speak Selection

Advanced Topics Mods & Extensions
,
1

Speak Selection

If you're blind, or you have issues seeing text, this simple tool may help. It speaks the text you select in the web. It also works with inputs in the Snap! interface. Try out now!

Instructions

Add this page to your bookmarks:

javascript:currentSelection = String(getSelection()); if (currentSelection == '') {window.alert('You must select some text!');} else {toSpeak = new SpeechSynthesisUtterance(currentSelection); speechSynthesis.speak(toSpeak);};

Chrome

  1. Open chrome://bookmarks in the address bar.
  2. Click the triple-dot icon > Add new bookmark.
  3. Enter a name and paste the URL above given to the URL there.
  4. Congrats you can now use the bookmark!

Edge

  1. Open edge://favorites in the address bar.
  2. Click Add favorite.
  3. Enter a name and paste the URL above given to the URL there.
  4. Congrats you can now use the bookmark!

More browsers coming soon.

How to use

  1. Press Ctrl + Shift + B to open the bookmarks bar.
  2. Select some text.
  3. Click the bookmark you added.
  4. You'll hear the text you select.

Thanks for reading!

2

snap doesn't support screenreaders very much yet
also screen readers exist

3

Experimental: Speak Selection Bubble

With this bubble, you can select text without the bookmarks bar. This is easier to use, and helps you so that you don't have to click on the bookmark to speak some text you selected. You can copy the text below and put it in a userscript.

let speakselectionbubble = document.createElement('div');
document.body.appendChild(speakselectionbubble);
speakselectionbubble.textContent = 'Speak Selection';

speakselectionbubble.style.backgroundColor = '#00000080';
speakselectionbubble.style.color = '#ffffff';
speakselectionbubble.style.position = 'fixed';
speakselectionbubble.style.zIndex = 'fixed';
speakselectionbubble.style.right = '6px';
speakselectionbubble.style.bottom = '6px';
speakselectionbubble.style.padding = '4px';
speakselectionbubble.style.fontFamily = 'sans-serif';
speakselectionbubble.style.fontSize = '12px';
speakselectionbubble.style.cursor = 'pointer';
speakselectionbubble.style.borderRadius = '10px';
speakselectionbubble.style.userSelect = 'none';
speakselectionbubble.addEventListener('click', () => {
    currentSelection = String(getSelection());
    if (currentSelection == '') {
        window.alert('You must select some text!');
    } else {
        toSpeak = new SpeechSynthesisUtterance(currentSelection);
        speechSynthesis.speak(toSpeak);
    };
});

Bookmarklet version for people who can't use userscripts:

javascript:let speakselectionbubble = document.createElement('div'); document.body.appendChild(speakselectionbubble); speakselectionbubble.textContent = 'Speak Selection'; speakselectionbubble.style.backgroundColor = '#00000080'; speakselectionbubble.style.color = '#ffffff'; speakselectionbubble.style.position = 'fixed'; speakselectionbubble.style.zIndex = 'fixed'; speakselectionbubble.style.right = '6px'; speakselectionbubble.style.bottom = '6px'; speakselectionbubble.style.padding = '4px'; speakselectionbubble.style.fontFamily = 'sans-serif'; speakselectionbubble.style.fontSize = '12px'; speakselectionbubble.style.cursor = 'pointer'; speakselectionbubble.style.borderRadius = '10px'; speakselectionbubble.style.userSelect = 'none'; speakselectionbubble.addEventListener('click', () => { currentSelection = String(getSelection()); if (currentSelection == '') { window.alert('You must select some text!'); } else { toSpeak = new SpeechSynthesisUtterance(currentSelection); speechSynthesis.speak(toSpeak); }; });