Hugging Face's logo

Spaces:
tx3bas
/
speech
Running

App Files Community
tx3bas commited on
Commit
8225c45
·
verified ·
1 Parent(s): 7621e24

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +22 -39
index.html CHANGED
@@ -5,13 +5,12 @@
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;
@@ -20,20 +19,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
 
@@ -47,27 +45,27 @@
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
 
@@ -85,21 +83,6 @@
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>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Text to Speech</title>
7
  <style>
 
 
 
 
8
  #vpr {
9
  padding: 30px 10px;
10
  }
11
+ textarea {
12
+ width: 100%;
13
+ }
14
  button {
15
  padding: 10px;
16
  margin: 10px 5px;
 
19
  </style>
20
  </head>
21
  <body>
22
+ <h3>Text to Speech - Google Español</h3>
 
23
 
24
  <div id="vpr">
25
+ <h5>Volume</h5>
26
+ <input type="range" min="0" max="1" value="0.5" step="0.1" id="volume" disabled />
27
  <span id="vol-label">0.5</span>
28
 
29
+ <h5>Rate</h5>
30
+ <input type="range" min="0" max="2" value="1" step="0.1" id="rate" disabled />
31
  <span id="rate-lab">1</span>
32
 
33
+ <h5>Pitch</h5>
34
+ <input type="range" min="0" max="2" value="1" step="0.1" id="pitch" disabled />
35
  <span id="pitch-lab">1</span>
36
  </div>
37
 
 
45
  <script>
46
  // Inicializamos el objeto SpeechSynthesisUtterance
47
  let tts = new SpeechSynthesisUtterance();
 
 
48
  let voices = [];
49
 
50
+ // Cargar voces y seleccionar "Google español" si está disponible
51
  window.speechSynthesis.onvoiceschanged = () => {
52
  voices = window.speechSynthesis.getVoices();
53
+ let selectedVoice = voices.find(voice => voice.name === "Google español");
54
+
55
+ // Si "Google español" está disponible, lo asignamos
56
+ if (selectedVoice) {
57
+ tts.voice = selectedVoice;
58
+ tts.volume = 0.5; // Establecemos el volumen
59
+ tts.rate = 1; // Establecemos la velocidad
60
+ tts.pitch = 1; // Establecemos el tono
61
+ } else {
62
+ alert("La voz 'Google español' no está disponible en este navegador.");
63
+ }
64
  };
65
 
66
  // Función para hablar el texto ingresado
67
  document.getElementById("speak").addEventListener("click", () => {
68
  tts.text = document.getElementById("lines").value;
 
 
 
 
69
  window.speechSynthesis.speak(tts);
70
  });
71
 
 
83
  document.getElementById("cancel").addEventListener("click", () => {
84
  window.speechSynthesis.cancel();
85
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  </script>
87
  </body>
88
  </html>