-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
101 lines (84 loc) · 39.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Select & Speak by leonar15</title>
</head>
<body>
<header>
<div class="inner">
<h1>Select & Speak</h1>
<h2>Privacy-focused bookmarklet to speak any text on a webpage using speech synthesis</h2>
<a href="https://github.com/leonar15/SelectNSpeak" class="button"><small>View project on</small> GitHub</a>
</div>
</header>
<div id="content-wrapper">
<div class="inner clearfix">
<section id="main-content">
<h1>
<a id="select--speak-bookmarklet" class="anchor" href="#select--speak-bookmarklet" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Select & Speak Bookmarklet</h1>
<p>A privacy-focused bookmarklet to speak any text on a webpage using speech synthesis</p>
<h2>
<a id="why" class="anchor" href="#why" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Why?</h2>
<p>The other night, I found an interesting article, but was feeling too lazy to read it. While searching for a way to have the browser read it aloud, I discovered that most (all?) solutions involve adding yet another browser extension. It turns out that all modern browsers have a built-in library for <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">speech synthesis</a>. This allows anyone to have their browser read any text on any webpage without calling any external services.</p>
<h2>
<a id="why" class="anchor" href="#why" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>How does it look?</h2>
<p><img src="images/selectnspeak_example.png" alt="Select & Speak Control Overlay" style="height:120px"></p>
<h2>
<a id="bookmarklet-code" class="anchor" href="#bookmarklet-code" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Bookmarklet code</h2>
<p>This is equivalent to <a href="selectnspeak.min.js">selectnspeak.min.js</a> shown in this project, with additional escaping for better cross-brower compatibility.</p>
<div class="highlight highlight-source-js"><pre>javascript:<span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">Bvar</span>%<span class="pl-c1">20</span><span class="pl-s1">e</span>%<span class="pl-c1">2</span><span class="pl-v">Ct</span>%<span class="pl-c1">2</span><span class="pl-v">Cn</span>%<span class="pl-c1">2</span><span class="pl-v">Co</span>%<span class="pl-c1">3</span><span class="pl-v">Ddocument</span>%<span class="pl-c1">2</span><span class="pl-v">Ca</span>%<span class="pl-c1">3</span><span class="pl-v">Dwindow</span>%<span class="pl-c1">2</span><span class="pl-v">Ci</span>%<span class="pl-c1">3</span><span class="pl-v">Do</span><span class="pl-kos">.</span><span class="pl-s1">getElementById</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span><span class="pl-s1">selectnspeak_bk_control</span>%<span class="pl-c1">22</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Cl</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>%<span class="pl-c1">5</span><span class="pl-v">B</span>%<span class="pl-c1">5</span><span class="pl-v">D</span>%<span class="pl-c1">2</span><span class="pl-v">Cp</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>%<span class="pl-c1">22</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Cr</span>%<span class="pl-c1">3</span><span class="pl-v">Dnew</span>%<span class="pl-c1">20</span><span class="pl-v">SpeechSynthesisUtterance</span>%<span class="pl-c1">2</span><span class="pl-v">Cs</span>%<span class="pl-c1">3</span><span class="pl-v">Da</span><span class="pl-kos">.</span><span class="pl-c1">speechSynthesis</span>%<span class="pl-c1">3</span><span class="pl-v">Bfunction</span>%<span class="pl-c1">20</span><span class="pl-s1">c</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">Bvar</span>%<span class="pl-c1">20</span><span class="pl-s1">t</span>%<span class="pl-c1">3</span><span class="pl-v">Ba</span><span class="pl-kos">.</span><span class="pl-c1">getSelection</span>%<span class="pl-c1">3</span><span class="pl-v">Fp</span>%<span class="pl-c1">3</span><span class="pl-v">Da</span><span class="pl-kos">.</span><span class="pl-en">getSelection</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toString</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">3</span><span class="pl-v">A</span><span class="pl-kos">(</span><span class="pl-s1">n</span>%<span class="pl-c1">3</span><span class="pl-v">Da</span><span class="pl-kos">.</span><span class="pl-c1">selection</span><span class="pl-kos">)</span>%<span class="pl-c1">26</span>%<span class="pl-c1">26</span>%<span class="pl-c1">22</span><span class="pl-v">Text</span>%<span class="pl-c1">22</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>%<span class="pl-c1">3</span><span class="pl-v">Dn</span><span class="pl-kos">.</span><span class="pl-c1">type</span>%<span class="pl-c1">26</span>%<span class="pl-c1">26</span><span class="pl-kos">(</span><span class="pl-s1">p</span>%<span class="pl-c1">3</span><span class="pl-v">Dn</span><span class="pl-kos">.</span><span class="pl-en">createRange</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">htmlText</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Cd</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Cp</span><span class="pl-kos">.</span><span class="pl-c1">length</span>%<span class="pl-c1">3</span><span class="pl-v">F</span><span class="pl-kos">(</span><span class="pl-s1">r</span><span class="pl-kos">.</span><span class="pl-c1">text</span>%<span class="pl-c1">3</span><span class="pl-v">Dp</span>%<span class="pl-c1">2</span><span class="pl-v">Cr</span><span class="pl-kos">.</span><span class="pl-c1">voice</span>%<span class="pl-c1">3</span><span class="pl-v">D</span><span class="pl-kos">(</span><span class="pl-s1">t</span>%<span class="pl-c1">3</span><span class="pl-v">De</span><span class="pl-kos">.</span><span class="pl-c1">selectedOptions</span><span class="pl-kos">)</span>%<span class="pl-c1">26</span>%<span class="pl-c1">26</span><span class="pl-s1">t</span><span class="pl-kos">.</span><span class="pl-c1">length</span>%<span class="pl-c1">3</span><span class="pl-v">Fl</span>%<span class="pl-c1">5</span><span class="pl-v">Bt</span>%<span class="pl-c1">5</span><span class="pl-c1">B0</span>%<span class="pl-c1">5</span><span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">value</span>%<span class="pl-c1">5</span><span class="pl-v">D</span>%<span class="pl-c1">3</span><span class="pl-v">Anull</span>%<span class="pl-c1">2</span><span class="pl-v">Cs</span><span class="pl-kos">.</span><span class="pl-en">speak</span><span class="pl-kos">(</span><span class="pl-s1">r</span><span class="pl-kos">)</span><span class="pl-kos">)</span>%<span class="pl-c1">3</span><span class="pl-v">Aalert</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span><span class="pl-v">Select</span>%<span class="pl-c1">20</span>%<span class="pl-c1">26</span>%<span class="pl-c1">20</span><span class="pl-v">Speak</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">20</span><span class="pl-v">Please</span>%<span class="pl-c1">20</span><span class="pl-s1">select</span>%<span class="pl-c1">20</span><span class="pl-s1">some</span>%<span class="pl-c1">20</span><span class="pl-s1">text</span>%<span class="pl-c1">20</span><span class="pl-s1">before</span>%<span class="pl-c1">20</span><span class="pl-s1">pressing</span>%<span class="pl-c1">20</span><span class="pl-s1">play</span><span class="pl-kos">.</span>%<span class="pl-c1">22</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">Dfunction</span>%<span class="pl-c1">20</span><span class="pl-s1">d</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">Bs</span><span class="pl-kos">.</span><span class="pl-en">cancel</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">Dfunction</span>%<span class="pl-c1">20</span><span class="pl-s1">x</span><span class="pl-kos">(</span><span class="pl-s1">e</span>%<span class="pl-c1">2</span><span class="pl-v">Ct</span>%<span class="pl-c1">2</span><span class="pl-v">Cn</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">Bvar</span>%<span class="pl-c1">20</span><span class="pl-s1">a</span>%<span class="pl-c1">3</span><span class="pl-v">Do</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span>%<span class="pl-c1">3</span><span class="pl-v">Breturn</span>%<span class="pl-c1">20</span><span class="pl-s1">t</span>%<span class="pl-c1">26</span>%<span class="pl-c1">26</span><span class="pl-s1">t</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-s1">e</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>%<span class="pl-c1">3</span><span class="pl-v">E</span>%<span class="pl-c1">7</span><span class="pl-v">Ba</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span><span class="pl-s1">e</span>%<span class="pl-c1">5</span><span class="pl-c1">B0</span>%<span class="pl-c1">5</span><span class="pl-v">D</span>%<span class="pl-c1">2</span><span class="pl-v">Ce</span>%<span class="pl-c1">5</span><span class="pl-c1">B1</span>%<span class="pl-c1">5</span><span class="pl-v">D</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">D</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Cn</span>%<span class="pl-c1">26</span>%<span class="pl-c1">26</span><span class="pl-kos">(</span><span class="pl-s1">a</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">.</span><span class="pl-c1">cssText</span>%<span class="pl-c1">3</span><span class="pl-v">Dn</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Ca</span>%<span class="pl-c1">7</span><span class="pl-v">Dfunction</span>%<span class="pl-c1">20</span><span class="pl-s1">g</span><span class="pl-kos">(</span><span class="pl-s1">e</span>%<span class="pl-c1">2</span><span class="pl-v">Ct</span>%<span class="pl-c1">2</span><span class="pl-v">Cn</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">Bvar</span>%<span class="pl-c1">20</span><span class="pl-s1">o</span>%<span class="pl-c1">3</span><span class="pl-v">Dx</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span><span class="pl-s1">button</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Cnull</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>%<span class="pl-c1">22</span><span class="pl-s1">margin</span>%<span class="pl-c1">3</span><span class="pl-v">A10px</span>%<span class="pl-c1">205</span><span class="pl-s1">px</span>%<span class="pl-c1">3</span><span class="pl-v">Bvertical</span><span class="pl-c1">-</span><span class="pl-s1">align</span>%<span class="pl-c1">3</span><span class="pl-v">Amiddle</span>%<span class="pl-c1">3</span><span class="pl-v">Bheight</span>%<span class="pl-c1">3</span><span class="pl-v">A32px</span>%<span class="pl-c1">3</span><span class="pl-v">Bwidth</span>%<span class="pl-c1">3</span><span class="pl-v">A32px</span>%<span class="pl-c1">3</span><span class="pl-v">Bbackground</span><span class="pl-c1">-</span><span class="pl-s1">color</span>%<span class="pl-c1">3</span><span class="pl-v">Awhite</span>%<span class="pl-c1">3</span><span class="pl-v">Bcolor</span>%<span class="pl-c1">3</span><span class="pl-v">Ablack</span>%<span class="pl-c1">3</span><span class="pl-v">Bborder</span>%<span class="pl-c1">3</span><span class="pl-v">A1px</span>%<span class="pl-c1">20</span><span class="pl-s1">solid</span>%<span class="pl-c1">20</span>%<span class="pl-c1">23333</span>%<span class="pl-c1">3</span><span class="pl-v">Bwhite</span><span class="pl-c1">-</span><span class="pl-s1">space</span>%<span class="pl-c1">3</span><span class="pl-v">Anowrap</span>%<span class="pl-c1">3</span><span class="pl-v">Bpadding</span>%<span class="pl-c1">3</span><span class="pl-v">A2px</span>%<span class="pl-c1">3</span><span class="pl-v">Bborder</span><span class="pl-c1">-</span><span class="pl-s1">radius</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">206</span><span class="pl-s1">px</span>%<span class="pl-c1">3</span><span class="pl-v">B</span>%<span class="pl-c1">22</span><span class="pl-kos">)</span>%<span class="pl-c1">3</span><span class="pl-v">Breturn</span>%<span class="pl-c1">20</span><span class="pl-s1">o</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span>%<span class="pl-c1">3</span><span class="pl-v">De</span>%<span class="pl-c1">2</span><span class="pl-v">Co</span><span class="pl-kos">.</span><span class="pl-c1">title</span>%<span class="pl-c1">3</span><span class="pl-v">Dt</span>%<span class="pl-c1">2</span><span class="pl-v">Co</span><span class="pl-kos">.</span><span class="pl-c1">onclick</span>%<span class="pl-c1">3</span><span class="pl-v">Dn</span>%<span class="pl-c1">2</span><span class="pl-v">Co</span>%<span class="pl-c1">7</span><span class="pl-v">Di</span>%<span class="pl-c1">3</span><span class="pl-v">Fe</span>%<span class="pl-c1">3</span><span class="pl-v">Di</span><span class="pl-kos">.</span><span class="pl-c1">getelementsByTagName</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span><span class="pl-s1">select</span>%<span class="pl-c1">22</span><span class="pl-kos">)</span>%<span class="pl-c1">5</span><span class="pl-c1">B0</span>%<span class="pl-c1">5</span><span class="pl-v">D</span>%<span class="pl-c1">3</span><span class="pl-v">A</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">i</span>%<span class="pl-c1">3</span><span class="pl-v">Dx</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span><span class="pl-s1">div</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>%<span class="pl-c1">5</span><span class="pl-v">B</span>%<span class="pl-c1">5</span><span class="pl-v">B</span>%<span class="pl-c1">22</span><span class="pl-s1">draggable</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>!<span class="pl-c1">0</span>%<span class="pl-c1">5</span><span class="pl-v">D</span>%<span class="pl-c1">5</span><span class="pl-v">D</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>%<span class="pl-c1">22</span><span class="pl-s1">font</span><span class="pl-c1">-</span><span class="pl-s1">family</span>%<span class="pl-c1">3</span><span class="pl-v">Asans</span><span class="pl-c1">-</span><span class="pl-s1">serif</span>%<span class="pl-c1">3</span><span class="pl-v">Bborder</span>%<span class="pl-c1">3</span><span class="pl-v">A1px</span>%<span class="pl-c1">20</span><span class="pl-s1">solid</span>%<span class="pl-c1">20</span>%<span class="pl-c1">23</span><span class="pl-s1">bdbdbd</span>%<span class="pl-c1">3</span><span class="pl-v">Bpadding</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">206</span><span class="pl-s1">px</span>%<span class="pl-c1">2010</span><span class="pl-s1">px</span>%<span class="pl-c1">3</span><span class="pl-v">Bposition</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">20</span><span class="pl-s1">fixed</span>%<span class="pl-c1">3</span><span class="pl-v">Btop</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">2010</span><span class="pl-s1">px</span>%<span class="pl-c1">3</span><span class="pl-v">B</span>%<span class="pl-c1">20</span><span class="pl-s1">left</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">2010</span><span class="pl-s1">px</span>%<span class="pl-c1">3</span><span class="pl-v">Bbackground</span><span class="pl-c1">-</span><span class="pl-s1">color</span>%<span class="pl-c1">3</span><span class="pl-v">Argba</span><span class="pl-kos">(</span><span class="pl-c1">236</span>%<span class="pl-c1">2</span><span class="pl-c1">C236</span>%<span class="pl-c1">2</span><span class="pl-c1">C236</span>%<span class="pl-c1">2</span><span class="pl-c1">C0</span><span class="pl-c1">.9</span><span class="pl-kos">)</span>%<span class="pl-c1">3</span><span class="pl-v">Bwidth</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">20275</span><span class="pl-s1">px</span>%<span class="pl-c1">3</span><span class="pl-v">Btext</span><span class="pl-c1">-</span><span class="pl-s1">align</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">20</span><span class="pl-s1">center</span>%<span class="pl-c1">3</span><span class="pl-v">Bz</span><span class="pl-c1">-</span><span class="pl-s1">index</span>%<span class="pl-c1">3</span><span class="pl-c1">A9999999</span>%<span class="pl-c1">3</span><span class="pl-v">Bbox</span><span class="pl-c1">-</span><span class="pl-s1">shadow</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">200</span><span class="pl-s1">px</span>%<span class="pl-c1">200</span><span class="pl-s1">px</span>%<span class="pl-c1">2017</span><span class="pl-s1">px</span>%<span class="pl-c1">20</span><span class="pl-c1">-</span><span class="pl-c1">3</span><span class="pl-s1">px</span>%<span class="pl-c1">20</span><span class="pl-en">rgba</span><span class="pl-kos">(</span><span class="pl-c1">255</span>%<span class="pl-c1">2</span><span class="pl-c1">C255</span>%<span class="pl-c1">2</span><span class="pl-c1">C255</span>%<span class="pl-c1">2</span><span class="pl-c1">C1</span><span class="pl-kos">)</span>%<span class="pl-c1">3</span><span class="pl-v">Bfont</span><span class="pl-c1">-</span><span class="pl-s1">size</span>%<span class="pl-c1">3</span><span class="pl-v">A16px</span>%<span class="pl-c1">3</span><span class="pl-v">Bbox</span><span class="pl-c1">-</span><span class="pl-s1">sizing</span>%<span class="pl-c1">3</span><span class="pl-v">Aborder</span><span class="pl-c1">-</span><span class="pl-s1">box</span>%<span class="pl-c1">3</span><span class="pl-v">Bborder</span><span class="pl-c1">-</span><span class="pl-s1">radius</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">206</span><span class="pl-s1">px</span>%<span class="pl-c1">3</span><span class="pl-v">B</span>%<span class="pl-c1">22</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">id</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>%<span class="pl-c1">22</span><span class="pl-s1">selectnspeak_bk_control</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Ci</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span>%<span class="pl-c1">3</span><span class="pl-v">D</span><span class="pl-s">'%3Cdiv%20style%3D%22font-size%3A18px%3Bfont-weight%3A600%3Bborder-bottom%3A1px%20solid%3Bpadding%3A7px%200%3B%22%3ESelect%20%26amp%3B%20Speak%20Controls%20%3Ca%20title%3D%22Select%20%26amp%3B%20Speak%20v0.2%22%20href%3D%22https%3A%2F%2Fgithub.com%2Fleonar15%2FSelectNSpeak%22%20style%3D%22position%3Aabsolute%3Btop%3A3px%3Bright%3A6px%3Bfont-size%3A12px%3B%22%3E%26%239432%3B%3C%2Fa%3E%3C%2Fdiv%3E'</span>%<span class="pl-c1">2</span><span class="pl-v">Ce</span>%<span class="pl-c1">3</span><span class="pl-v">Dx</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span><span class="pl-s1">select</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Cnull</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>%<span class="pl-c1">22</span><span class="pl-s1">width</span>%<span class="pl-c1">3</span><span class="pl-c1">A100</span>%<span class="pl-c1">25</span>%<span class="pl-c1">3</span><span class="pl-v">B</span>%<span class="pl-c1">22</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">C</span><span class="pl-kos">(</span><span class="pl-s1">t</span>%<span class="pl-c1">3</span><span class="pl-v">Do</span><span class="pl-kos">.</span><span class="pl-c1">createElement</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span><span class="pl-s1">option</span>%<span class="pl-c1">22</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">disabled</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>!<span class="pl-c1">0</span>%<span class="pl-c1">2</span><span class="pl-v">Ct</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>%<span class="pl-c1">22</span><span class="pl-v">Select</span>%<span class="pl-c1">20</span><span class="pl-s1">a</span>%<span class="pl-c1">20</span><span class="pl-s1">voice</span>%<span class="pl-c1">3</span><span class="pl-v">A</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Ce</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s1">t</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Ce</span><span class="pl-kos">.</span><span class="pl-c1">onchange</span>%<span class="pl-c1">3</span><span class="pl-v">Dc</span>%<span class="pl-c1">2</span><span class="pl-v">Cl</span>%<span class="pl-c1">3</span><span class="pl-v">Ds</span><span class="pl-kos">.</span><span class="pl-en">getVoices</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">CsetTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">B</span><span class="pl-kos">(</span><span class="pl-s1">l</span>%<span class="pl-c1">3</span><span class="pl-v">Ds</span><span class="pl-kos">.</span><span class="pl-s1">getVoices</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-s1">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">t</span>%<span class="pl-c1">2</span><span class="pl-v">Cn</span><span class="pl-kos">)</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>%<span class="pl-c1">3</span><span class="pl-v">E</span>%<span class="pl-c1">7</span><span class="pl-v">Bvar</span>%<span class="pl-c1">20</span><span class="pl-s1">o</span>%<span class="pl-c1">3</span><span class="pl-v">Dx</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span><span class="pl-s1">option</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>%<span class="pl-c1">5</span><span class="pl-v">B</span>%<span class="pl-c1">5</span><span class="pl-v">B</span>%<span class="pl-c1">22</span><span class="pl-s1">value</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Cn</span>%<span class="pl-c1">5</span><span class="pl-v">D</span>%<span class="pl-c1">5</span><span class="pl-v">D</span><span class="pl-kos">)</span>%<span class="pl-c1">3</span><span class="pl-v">Bo</span><span class="pl-kos">.</span><span class="pl-s1">textContent</span>%<span class="pl-c1">3</span><span class="pl-v">Dt</span><span class="pl-kos">.</span><span class="pl-s1">name</span>%<span class="pl-c1">2</span><span class="pl-v">B</span>%<span class="pl-c1">22</span>%<span class="pl-c1">20</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Bt</span><span class="pl-kos">.</span><span class="pl-s1">lang</span>%<span class="pl-c1">2</span><span class="pl-v">B</span>%<span class="pl-c1">22</span><span class="pl-kos">)</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Ct</span><span class="pl-kos">.</span><span class="pl-c1">default</span>%<span class="pl-c1">26</span>%<span class="pl-c1">26</span><span class="pl-kos">(</span><span class="pl-s1">o</span><span class="pl-kos">.</span><span class="pl-c1">selected</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>!<span class="pl-c1">0</span>%<span class="pl-c1">2</span><span class="pl-v">Co</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span>%<span class="pl-c1">2</span><span class="pl-v">B</span>%<span class="pl-c1">3</span><span class="pl-v">D</span>%<span class="pl-c1">22</span>%<span class="pl-c1">20</span><span class="pl-c1">--</span>%<span class="pl-c1">20</span><span class="pl-c1">DEFAULT</span>%<span class="pl-c1">22</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Ce</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s1">o</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">D</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">D</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-c1">C30</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Ci</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s1">g</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span>%<span class="pl-c1">26</span>%<span class="pl-c1">239654</span>%<span class="pl-c1">3</span><span class="pl-v">B</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>%<span class="pl-c1">22</span><span class="pl-v">Speak</span>%<span class="pl-c1">20</span><span class="pl-s1">current</span>%<span class="pl-c1">20</span><span class="pl-s1">selection</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Cc</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Cg</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span>%<span class="pl-c1">26</span>%<span class="pl-c1">2310074</span>%<span class="pl-c1">3</span><span class="pl-v">B</span>%<span class="pl-c1">20</span>%<span class="pl-c1">26</span>%<span class="pl-c1">2310074</span>%<span class="pl-c1">3</span><span class="pl-v">B</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>%<span class="pl-c1">22</span><span class="pl-v">Pause</span>%<span class="pl-c1">2</span><span class="pl-v">FUnpause</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">C</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">Bs</span><span class="pl-kos">.</span><span class="pl-c1">speaking</span>%<span class="pl-c1">26</span>%<span class="pl-c1">26</span><span class="pl-s1">s</span><span class="pl-kos">.</span><span class="pl-c1">paused</span>%<span class="pl-c1">3</span><span class="pl-v">Fs</span><span class="pl-kos">.</span><span class="pl-en">resume</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">3</span><span class="pl-v">As</span><span class="pl-kos">.</span><span class="pl-en">pause</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">D</span><span class="pl-kos">)</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Cg</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span>%<span class="pl-c1">26</span>%<span class="pl-c1">239724</span>%<span class="pl-c1">3</span><span class="pl-v">B</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>%<span class="pl-c1">22</span><span class="pl-v">Stop</span>%<span class="pl-c1">20</span><span class="pl-s1">all</span>%<span class="pl-c1">20</span><span class="pl-s1">playback</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">Cd</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Cg</span><span class="pl-kos">(</span>%<span class="pl-c1">22</span>%<span class="pl-c1">26</span><span class="pl-s1">times</span>%<span class="pl-c1">3</span><span class="pl-v">B</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">C</span>%<span class="pl-c1">22</span><span class="pl-v">Stop</span>%<span class="pl-c1">20</span><span class="pl-s1">playback</span>%<span class="pl-c1">20</span>%<span class="pl-c1">26</span>%<span class="pl-c1">20</span><span class="pl-v">Close</span>%<span class="pl-c1">20</span><span class="pl-s1">controls</span>%<span class="pl-c1">22</span>%<span class="pl-c1">2</span><span class="pl-v">C</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">Bd</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Ci</span><span class="pl-kos">.</span><span class="pl-c1">parentNode</span><span class="pl-kos">.</span><span class="pl-en">removeChild</span><span class="pl-kos">(</span><span class="pl-s1">i</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">D</span><span class="pl-kos">)</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Ce</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Co</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s1">i</span><span class="pl-kos">)</span><span class="pl-kos">)</span>%<span class="pl-c1">2</span><span class="pl-v">Cc</span><span class="pl-kos">(</span><span class="pl-kos">)</span>%<span class="pl-c1">7</span><span class="pl-v">D</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<h2>
<a id="how-to-install" class="anchor" href="#how-to-install" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>How to Install</h2>
<h3>
<a id="manual-installation" class="anchor" href="#manual-installation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Easy Installation</h3>
<p>Drag the button below into your browser's bookmarks bar. Click the new bookmark to use. That's it! </p>
<a href="javascript:(function()%7Bvar%20e%2Ct%2Cn%2Co%3Ddocument%2Ca%3Dwindow%2Ci%3Do.getElementById(%22selectnspeak_bk_control%22)%2Cl%3D%5B%5D%2Cp%3D%22%22%2Cr%3Dnew%20SpeechSynthesisUtterance%2Cs%3Da.speechSynthesis%3Bfunction%20c()%7Bvar%20t%3Ba.getSelection%3Fp%3Da.getSelection().toString()%3A(n%3Da.selection)%26%26%22Text%22%3D%3Dn.type%26%26(p%3Dn.createRange().htmlText)%2Cd()%2Cp.length%3F(r.text%3Dp%2Cr.voice%3D(t%3De.selectedOptions)%26%26t.length%3Fl%5Bt%5B0%5D.value%5D%3Anull%2Cs.speak(r))%3Aalert(%22Select%20%26%20Speak%3A%20Please%20select%20some%20text%20before%20pressing%20play.%22)%7Dfunction%20d()%7Bs.cancel()%7Dfunction%20x(e%2Ct%2Cn)%7Bvar%20a%3Do.createElement(e)%3Breturn%20t%26%26t.forEach(e%3D%3E%7Ba.setAttribute(e%5B0%5D%2Ce%5B1%5D)%7D)%2Cn%26%26(a.style.cssText%3Dn)%2Ca%7Dfunction%20g(e%2Ct%2Cn)%7Bvar%20o%3Dx(%22button%22%2Cnull%2C%22margin%3A10px%205px%3Bvertical-align%3Amiddle%3Bheight%3A32px%3Bwidth%3A32px%3Bbackground-color%3Awhite%3Bcolor%3Ablack%3Bborder%3A1px%20solid%20%23333%3Bwhite-space%3Anowrap%3Bpadding%3A2px%3Bborder-radius%3A%206px%3B%22)%3Breturn%20o.innerHTML%3De%2Co.title%3Dt%2Co.onclick%3Dn%2Co%7Di%3Fe%3Di.getelementsByTagName(%22select%22)%5B0%5D%3A((i%3Dx(%22div%22%2C%5B%5B%22draggable%22%2C!0%5D%5D%2C%22font-family%3Asans-serif%3Bborder%3A1px%20solid%20%23bdbdbd%3Bpadding%3A%206px%2010px%3Bposition%3A%20fixed%3Btop%3A%2010px%3B%20left%3A%2010px%3Bbackground-color%3Argba(236%2C236%2C236%2C0.9)%3Bwidth%3A%20275px%3Btext-align%3A%20center%3Bz-index%3A9999999%3Bbox-shadow%3A%200px%200px%2017px%20-3px%20rgba(255%2C255%2C255%2C1)%3Bfont-size%3A16px%3Bbox-sizing%3Aborder-box%3Bborder-radius%3A%206px%3B%22)).id%3D%22selectnspeak_bk_control%22%2Ci.innerHTML%3D'%3Cdiv%20style%3D%22font-size%3A18px%3Bfont-weight%3A600%3Bborder-bottom%3A1px%20solid%3Bpadding%3A7px%200%3B%22%3ESelect%20%26amp%3B%20Speak%20Controls%20%3Ca%20title%3D%22Select%20%26amp%3B%20Speak%20v0.2%22%20href%3D%22https%3A%2F%2Fgithub.com%2Fleonar15%2FSelectNSpeak%22%20style%3D%22position%3Aabsolute%3Btop%3A3px%3Bright%3A6px%3Bfont-size%3A12px%3B%22%3E%26%239432%3B%3C%2Fa%3E%3C%2Fdiv%3E'%2Ce%3Dx(%22select%22%2Cnull%2C%22width%3A100%25%3B%22)%2C(t%3Do.createElement(%22option%22)).disabled%3D!0%2Ct.textContent%3D%22Select%20a%20voice%3A%22%2Ce.append(t)%2Ce.onchange%3Dc%2Cl%3Ds.getVoices()%2CsetTimeout((function()%7B(l%3Ds.getVoices()).forEach((t%2Cn)%3D%3E%7Bvar%20o%3Dx(%22option%22%2C%5B%5B%22value%22%2Cn%5D%5D)%3Bo.textContent%3Dt.name%2B%22%20(%22%2Bt.lang%2B%22)%22%2Ct.default%26%26(o.selected%3D!0%2Co.textContent%2B%3D%22%20--%20DEFAULT%22)%2Ce.append(o)%7D)%7D)%2C30)%2Ci.append(g(%22%26%239654%3B%22%2C%22Speak%20current%20selection%22%2Cc)%2Cg(%22%26%2310074%3B%20%26%2310074%3B%22%2C%22Pause%2FUnpause%22%2C(function()%7Bs.speaking%26%26s.paused%3Fs.resume()%3As.pause()%7D))%2Cg(%22%26%239724%3B%22%2C%22Stop%20all%20playback%22%2Cd)%2Cg(%22%26times%3B%22%2C%22Stop%20playback%20%26%20Close%20controls%22%2C(function()%7Bd()%2Ci.parentNode.removeChild(i)%7D))%2Ce)%2Co.body.append(i))%2Cc()%7D)()" class="button-blue" style="display: inline-block">Select & Speak</a>
<h3>
<a id="manual-installation" class="anchor" href="#manual-installation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Manual Installation</h3>
<ol>
<li>Create a new bookmark (e.g. bookmark this page)</li>
<li>Right-click the bookmark in your bookmark bar and edit the URL
<ul>
<li>Chrome: Right-click on a bookmark and select "Edit..."</li>
<li>Safari: Right-click on a bookmark and select "Edit Address..."</li>
<li>Firefox: Right-click on a bookmark and select "Properties". Paste the bookmarklet code in the "Location" input</li>
</ul>
</li>
<li>Copy & paste the bookmarklet code into the URL location, making sure to remove the prior content entirely</li>
<li>Change the bookmark label to "Select & Speak" (optional)</li>
</ol>
<h2>
<a id="how-to-use" class="anchor" href="#how-to-use" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>How to Use</h2>
<ol>
<li>Select some text on any webpage, then click the bookmark you just made.</li>
<li>Enjoy!</li>
<li>For fun, try the other available voices on your system</li>
</ol>
</section>
<aside id="sidebar">
<div class="instruct">
<h2>Easy install:</h2>
<p>Drag the button below to your bookmarks bar</p>
</div>
<a href="javascript:(function()%7Bvar%20e%2Ct%2Cn%2Co%3Ddocument%2Ca%3Dwindow%2Ci%3Do.getElementById(%22selectnspeak_bk_control%22)%2Cl%3D%5B%5D%2Cp%3D%22%22%2Cr%3Dnew%20SpeechSynthesisUtterance%2Cs%3Da.speechSynthesis%3Bfunction%20c()%7Bvar%20t%3Ba.getSelection%3Fp%3Da.getSelection().toString()%3A(n%3Da.selection)%26%26%22Text%22%3D%3Dn.type%26%26(p%3Dn.createRange().htmlText)%2Cd()%2Cp.length%3F(r.text%3Dp%2Cr.voice%3D(t%3De.selectedOptions)%26%26t.length%3Fl%5Bt%5B0%5D.value%5D%3Anull%2Cs.speak(r))%3Aalert(%22Select%20%26%20Speak%3A%20Please%20select%20some%20text%20before%20pressing%20play.%22)%7Dfunction%20d()%7Bs.cancel()%7Dfunction%20x(e%2Ct%2Cn)%7Bvar%20a%3Do.createElement(e)%3Breturn%20t%26%26t.forEach(e%3D%3E%7Ba.setAttribute(e%5B0%5D%2Ce%5B1%5D)%7D)%2Cn%26%26(a.style.cssText%3Dn)%2Ca%7Dfunction%20g(e%2Ct%2Cn)%7Bvar%20o%3Dx(%22button%22%2Cnull%2C%22margin%3A10px%205px%3Bvertical-align%3Amiddle%3Bheight%3A32px%3Bwidth%3A32px%3Bbackground-color%3Awhite%3Bcolor%3Ablack%3Bborder%3A1px%20solid%20%23333%3Bwhite-space%3Anowrap%3Bpadding%3A2px%3Bborder-radius%3A%206px%3B%22)%3Breturn%20o.innerHTML%3De%2Co.title%3Dt%2Co.onclick%3Dn%2Co%7Di%3Fe%3Di.getelementsByTagName(%22select%22)%5B0%5D%3A((i%3Dx(%22div%22%2C%5B%5B%22draggable%22%2C!0%5D%5D%2C%22font-family%3Asans-serif%3Bborder%3A1px%20solid%20%23bdbdbd%3Bpadding%3A%206px%2010px%3Bposition%3A%20fixed%3Btop%3A%2010px%3B%20left%3A%2010px%3Bbackground-color%3Argba(236%2C236%2C236%2C0.9)%3Bwidth%3A%20275px%3Btext-align%3A%20center%3Bz-index%3A9999999%3Bbox-shadow%3A%200px%200px%2017px%20-3px%20rgba(255%2C255%2C255%2C1)%3Bfont-size%3A16px%3Bbox-sizing%3Aborder-box%3Bborder-radius%3A%206px%3B%22)).id%3D%22selectnspeak_bk_control%22%2Ci.innerHTML%3D'%3Cdiv%20style%3D%22font-size%3A18px%3Bfont-weight%3A600%3Bborder-bottom%3A1px%20solid%3Bpadding%3A7px%200%3B%22%3ESelect%20%26amp%3B%20Speak%20Controls%20%3Ca%20title%3D%22Select%20%26amp%3B%20Speak%20v0.2%22%20href%3D%22https%3A%2F%2Fgithub.com%2Fleonar15%2FSelectNSpeak%22%20style%3D%22position%3Aabsolute%3Btop%3A3px%3Bright%3A6px%3Bfont-size%3A12px%3B%22%3E%26%239432%3B%3C%2Fa%3E%3C%2Fdiv%3E'%2Ce%3Dx(%22select%22%2Cnull%2C%22width%3A100%25%3B%22)%2C(t%3Do.createElement(%22option%22)).disabled%3D!0%2Ct.textContent%3D%22Select%20a%20voice%3A%22%2Ce.append(t)%2Ce.onchange%3Dc%2Cl%3Ds.getVoices()%2CsetTimeout((function()%7B(l%3Ds.getVoices()).forEach((t%2Cn)%3D%3E%7Bvar%20o%3Dx(%22option%22%2C%5B%5B%22value%22%2Cn%5D%5D)%3Bo.textContent%3Dt.name%2B%22%20(%22%2Bt.lang%2B%22)%22%2Ct.default%26%26(o.selected%3D!0%2Co.textContent%2B%3D%22%20--%20DEFAULT%22)%2Ce.append(o)%7D)%7D)%2C30)%2Ci.append(g(%22%26%239654%3B%22%2C%22Speak%20current%20selection%22%2Cc)%2Cg(%22%26%2310074%3B%20%26%2310074%3B%22%2C%22Pause%2FUnpause%22%2C(function()%7Bs.speaking%26%26s.paused%3Fs.resume()%3As.pause()%7D))%2Cg(%22%26%239724%3B%22%2C%22Stop%20all%20playback%22%2Cd)%2Cg(%22%26times%3B%22%2C%22Stop%20playback%20%26%20Close%20controls%22%2C(function()%7Bd()%2Ci.parentNode.removeChild(i)%7D))%2Ce)%2Co.body.append(i))%2Cc()%7D)()" class="button">Select & Speak</a>
<a href="https://github.com/leonar15/SelectNSpeak/zipball/master" class="button-download">
<small>Download</small>
.zip file
</a>
<p class="repo-owner"><a href="https://github.com/leonar15/SelectNSpeak"></a> is maintained by <a href="https://github.com/leonar15">leonar15</a>.</p>
<p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the Architect theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.</p>
</aside>
</div>
</div>
</body>
</html>