Hugging Face's logo

Spaces:
tx3bas
/
speech
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +29 -25
index.html CHANGED
@@ -5,9 +5,6 @@
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
  }
@@ -21,20 +18,6 @@
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
-
38
  <textarea rows="9" cols="60" id="lines">Enter text here...</textarea><br>
39
 
40
  <button id="speak">Speak</button>
@@ -43,30 +26,51 @@
43
  <button id="cancel">Cancel</button>
44
 
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
 
72
  // Pausar el discurso
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Text to Speech</title>
7
  <style>
 
 
 
8
  textarea {
9
  width: 100%;
10
  }
 
18
  <body>
19
  <h3>Text to Speech - Google Español</h3>
20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  <textarea rows="9" cols="60" id="lines">Enter text here...</textarea><br>
22
 
23
  <button id="speak">Speak</button>
 
26
  <button id="cancel">Cancel</button>
27
 
28
  <script>
 
29
  let tts = new SpeechSynthesisUtterance();
30
  let voices = [];
31
+ let paragraphs = [];
32
+ let currentParagraph = 0;
33
 
34
  // Cargar voces y seleccionar "Google español" si está disponible
35
  window.speechSynthesis.onvoiceschanged = () => {
36
  voices = window.speechSynthesis.getVoices();
37
  let selectedVoice = voices.find(voice => voice.name === "Google español");
38
 
 
39
  if (selectedVoice) {
40
  tts.voice = selectedVoice;
41
+ tts.volume = 0.5; // Volumen predeterminado
42
+ tts.rate = 1; // Velocidad predeterminada
43
+ tts.pitch = 1; // Tono predeterminado
44
  } else {
45
  alert("La voz 'Google español' no está disponible en este navegador.");
46
  }
47
  };
48
 
49
+ // Función para dividir el texto en párrafos
50
+ function splitIntoParagraphs(text) {
51
+ return text.split(/(?<=[.?!])\s+/); // Divide el texto en párrafos por '.' '!' '?'
52
+ }
53
+
54
+ // Función para hablar un párrafo
55
+ function speakParagraph() {
56
+ if (currentParagraph < paragraphs.length) {
57
+ tts.text = paragraphs[currentParagraph];
58
+ window.speechSynthesis.speak(tts);
59
+ currentParagraph++;
60
+ }
61
+ }
62
+
63
+ // Cuando termina de hablar un párrafo, habla el siguiente
64
+ tts.onend = function () {
65
+ speakParagraph();
66
+ };
67
+
68
+ // Función para empezar a hablar el texto ingresado
69
  document.getElementById("speak").addEventListener("click", () => {
70
+ let text = document.getElementById("lines").value;
71
+ paragraphs = splitIntoParagraphs(text);
72
+ currentParagraph = 0;
73
+ speakParagraph();
74
  });
75
 
76
  // Pausar el discurso