|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <html lang="en">
|
3 |
| -<head> |
4 |
| - <meta charset="UTF-8"> |
5 |
| - <title>Speech Synthesis</title> |
6 |
| - <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> |
7 |
| - <link rel="stylesheet" href="style.css"> |
8 |
| -</head> |
9 |
| -<body> |
10 |
| - |
| 3 | + <head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <title>Speech Synthesis</title> |
| 6 | + <link |
| 7 | + href="https://fonts.googleapis.com/css?family=Pacifico" |
| 8 | + rel="stylesheet" |
| 9 | + type="text/css" |
| 10 | + /> |
| 11 | + <link rel="stylesheet" href="style.css" /> |
| 12 | + </head> |
| 13 | + <body> |
11 | 14 | <div class="voiceinator">
|
12 |
| - |
13 | 15 | <h1>The Voiceinator 5000</h1>
|
14 | 16 |
|
15 | 17 | <select name="voice" id="voices">
|
16 | 18 | <option value="">Select A Voice</option>
|
17 | 19 | </select>
|
18 | 20 |
|
19 | 21 | <label for="rate">Rate:</label>
|
20 |
| - <input name="rate" type="range" min="0" max="3" value="1" step="0.1"> |
| 22 | + <input name="rate" type="range" min="0" max="3" value="1" step="0.1" /> |
21 | 23 |
|
22 | 24 | <label for="pitch">Pitch:</label>
|
23 | 25 |
|
24 |
| - <input name="pitch" type="range" min="0" max="2" step="0.1"> |
| 26 | + <input name="pitch" type="range" min="0" max="2" step="0.1" /> |
25 | 27 | <textarea name="text">Hello! I love JavaScript 👍</textarea>
|
26 | 28 | <button id="stop">Stop!</button>
|
27 | 29 | <button id="speak">Speak</button>
|
28 |
| - |
29 | 30 | </div>
|
30 | 31 |
|
31 |
| -<script> |
32 |
| - const msg = new SpeechSynthesisUtterance(); |
33 |
| - let voices = []; |
34 |
| - const voicesDropdown = document.querySelector('[name="voice"]'); |
35 |
| - const options = document.querySelectorAll('[type="range"], [name="text"]'); |
36 |
| - const speakButton = document.querySelector('#speak'); |
37 |
| - const stopButton = document.querySelector('#stop'); |
38 |
| -</script> |
39 |
| - |
40 |
| -</body> |
| 32 | + <script> |
| 33 | + const msg = new SpeechSynthesisUtterance(); |
| 34 | + let voices = []; |
| 35 | + const voicesDropdown = document.querySelector('[name="voice"]'); |
| 36 | + const options = document.querySelectorAll( |
| 37 | + '[type="range"], [name="text"]' |
| 38 | + ); |
| 39 | + const speakButton = document.querySelector('#speak'); |
| 40 | + const stopButton = document.querySelector('#stop'); |
| 41 | + </script> |
| 42 | + </body> |
41 | 43 | </html>
|
0 commit comments