Hugging Face's logo

Spaces:
tx3bas
/
speech
Running

App Files Community
tx3bas commited on
Commit
7621e24
路
verified 路
1 Parent(s): 76c2c16

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +104 -18
index.html CHANGED
@@ -1,19 +1,105 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Text to Speech</title>
7
+ <style>
8
+ select {
9
+ padding: 5px;
10
+ margin: 10px 0;
11
+ }
12
+ #vpr {
13
+ padding: 30px 10px;
14
+ }
15
+ button {
16
+ padding: 10px;
17
+ margin: 10px 5px;
18
+ cursor: pointer;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body>
23
+ <h3> Select Voice </h3>
24
+ <select id="voices"></select>
25
+
26
+ <div id="vpr">
27
+ <h5> Volume </h5>
28
+ <input type="range" min="0" max="1" value="0.5" step="0.1" id="volume" />
29
+ <span id="vol-label">0.5</span>
30
+
31
+ <h5> Rate </h5>
32
+ <input type="range" min="0" max="2" value="1" step="0.1" id="rate" />
33
+ <span id="rate-lab">1</span>
34
+
35
+ <h5> Pitch </h5>
36
+ <input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
37
+ <span id="pitch-lab">1</span>
38
+ </div>
39
+
40
+ <textarea rows="9" cols="60" id="lines">Enter text here...</textarea><br>
41
+
42
+ <button id="speak">Speak</button>
43
+ <button id="pause">Pause</button>
44
+ <button id="resume">Resume</button>
45
+ <button id="cancel">Cancel</button>
46
+
47
+ <script>
48
+ // Inicializamos el objeto SpeechSynthesisUtterance
49
+ let tts = new SpeechSynthesisUtterance();
50
+
51
+ // Listado de voces
52
+ let voices = [];
53
+
54
+ // Cargamos las voces disponibles cuando cambian
55
+ window.speechSynthesis.onvoiceschanged = () => {
56
+ voices = window.speechSynthesis.getVoices();
57
+ let selectVoice = document.getElementById("voices");
58
+ voices.forEach((voice, index) => {
59
+ let option = new Option(voice.name, index);
60
+ selectVoice.add(option);
61
+ });
62
+ };
63
+
64
+ // Funci贸n para hablar el texto ingresado
65
+ document.getElementById("speak").addEventListener("click", () => {
66
+ tts.text = document.getElementById("lines").value;
67
+ tts.voice = voices[document.getElementById("voices").value];
68
+ tts.volume = document.getElementById("volume").value;
69
+ tts.rate = document.getElementById("rate").value;
70
+ tts.pitch = document.getElementById("pitch").value;
71
+ window.speechSynthesis.speak(tts);
72
+ });
73
+
74
+ // Pausar el discurso
75
+ document.getElementById("pause").addEventListener("click", () => {
76
+ window.speechSynthesis.pause();
77
+ });
78
+
79
+ // Reanudar el discurso pausado
80
+ document.getElementById("resume").addEventListener("click", () => {
81
+ window.speechSynthesis.resume();
82
+ });
83
+
84
+ // Cancelar el discurso
85
+ document.getElementById("cancel").addEventListener("click", () => {
86
+ window.speechSynthesis.cancel();
87
+ });
88
+
89
+ // Actualizar la etiqueta de volumen
90
+ document.getElementById("volume").addEventListener("input", () => {
91
+ document.getElementById("vol-label").innerText = document.getElementById("volume").value;
92
+ });
93
+
94
+ // Actualizar la etiqueta de velocidad
95
+ document.getElementById("rate").addEventListener("input", () => {
96
+ document.getElementById("rate-lab").innerText = document.getElementById("rate").value;
97
+ });
98
+
99
+ // Actualizar la etiqueta de tono
100
+ document.getElementById("pitch").addEventListener("input", () => {
101
+ document.getElementById("pitch-lab").innerText = document.getElementById("pitch").value;
102
+ });
103
+ </script>
104
+ </body>
105
  </html>