| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <title>Speak Selection Options</title> |
| 4 <style> |
| 5 body { |
| 6 font-family: arial, helvetica, sans-serif; |
| 7 } |
| 8 .banner { |
| 9 width: 100%; |
| 10 float: left; |
| 11 } |
| 12 .banner_left { |
| 13 padding: 8px; |
| 14 float: left; |
| 15 } |
| 16 .banner_right { |
| 17 padding: 8px; |
| 18 } |
| 19 .body_wrapper { |
| 20 width: 100%; |
| 21 float: left; |
| 22 } |
| 23 .body_left { |
| 24 border: 0; |
| 25 padding: 0; |
| 26 margin: 0; |
| 27 width: 50%; |
| 28 float: left; |
| 29 } |
| 30 .body_right { |
| 31 border: 0; |
| 32 padding: 0; |
| 33 margin: 0; |
| 34 width: 46%; |
| 35 float: left; |
| 36 } |
| 37 .body_inner { |
| 38 padding: 0 32px; |
| 39 } |
| 40 .browser_action { |
| 41 vertical-align: middle; |
| 42 margin: 0 2px 3px 2px; |
| 43 } |
| 44 .ctrl_label { |
| 45 width: 100px; |
| 46 float: left; |
| 47 } |
| 48 .ctrl_wrap { |
| 49 margin: 18px 8px; |
| 50 } |
| 51 .ctrl { |
| 52 width: 200px; |
| 53 } |
| 54 #hotkey { |
| 55 font-size: 16px; |
| 56 width: 15em; |
| 57 margin-left: 12px; |
| 58 } |
| 59 #test { |
| 60 } |
| 61 #defaults { |
| 62 margin-left: 24px; |
| 63 } |
| 64 </style> |
| 65 <script src="keycodes.js"></script> |
| 66 <script src="tabs.js"></script> |
| 67 <script src="options.js"></script> |
| 68 <script src="content_script.js"></script> |
| 69 </head> |
| 70 <body onload="load()"> |
| 71 |
| 72 <div class="banner"> |
| 73 <div class="banner_left"> |
| 74 <img src="SpeakSel128.png" class="logo" alt=""> |
| 75 </div> |
| 76 <div class="banner_right"> |
| 77 <h1>Speak Selection</h1> |
| 78 <p> |
| 79 This extension lets you use Chrome's text-to-speech (TTS) capabilities |
| 80 to speak any text you find on the web. |
| 81 </p> |
| 82 </div> |
| 83 </div> |
| 84 |
| 85 <div class="body_wrapper"> |
| 86 <div class="body_left"> |
| 87 <div class="body_inner"> |
| 88 <h2>Speech Settings</h2> |
| 89 |
| 90 <div class="ctrl_label"> |
| 91 <label for="voice">Voice:</label> |
| 92 </div> |
| 93 <div class="ctrl_wrap"> |
| 94 <select id="voice" class="ctrl"></select> |
| 95 </div> |
| 96 |
| 97 <div class="ctrl_label"> |
| 98 <label for="rate">Rate:</label> |
| 99 </div> |
| 100 <div class="ctrl_wrap"> |
| 101 <input id="rate" type="range" class="ctrl" |
| 102 min=0.5 max=2.0 step=0.1 value=1.0></input> |
| 103 </div> |
| 104 |
| 105 <div class="ctrl_label"> |
| 106 <label for="pitch">Pitch:</label> |
| 107 </div> |
| 108 <div class="ctrl_wrap"> |
| 109 <input id="pitch" type="range" class="ctrl" |
| 110 min=0.5 max=1.5 step=0.1 value=1.0></input> |
| 111 </div> |
| 112 |
| 113 <div class="ctrl_label"> |
| 114 <label for="volume">Volume:</label> |
| 115 </div> |
| 116 <div class="ctrl_wrap"> |
| 117 <input id="volume" type="range" class="ctrl" |
| 118 min=0.0 max=1.0 step=0.1 value=1.0></input> |
| 119 </div> |
| 120 |
| 121 <div class="ctrl_label"> |
| 122 |
| 123 </div> |
| 124 <div class="ctrl_wrap"> |
| 125 <button id="test">Test Speech</button> |
| 126 <button id="defaults">Defaults</button> |
| 127 </div> |
| 128 |
| 129 </div> |
| 130 </div> |
| 131 <div class="body_right"> |
| 132 <div class="body_inner"> |
| 133 <h2>When to speak</h2> |
| 134 <p> |
| 135 <span id="selected">Select some text</span> |
| 136 anywhere on a webpage, then either: |
| 137 </p> |
| 138 |
| 139 <p>1. Click on the |
| 140 <img class="browser_action" src="SpeakSel19.png" alt="Speak Selection"> |
| 141 button in the toolbar ↗, or |
| 142 </p> |
| 143 |
| 144 <p>2. Use this hot key: <input type="text" id="hotkey"></input> |
| 145 </p> |
| 146 <p>Click the button or press the key again to stop speech.</p> |
| 147 </div> |
| 148 </div> |
| 149 </div> |
| 150 |
| 151 </body> |
| 152 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 8114011:
Add sample extensions that use the text-to-speech (TTS) API. (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/