gnilets commited on
Commit
1fe8463
·
verified ·
1 Parent(s): 09db3a4

Update main.ts

Browse files
Files changed (1) hide show
  1. main.ts +34 -42
main.ts CHANGED
@@ -136,36 +136,12 @@ async function handleDemoRequest(req: Request) {
136
  <body>
137
  <div class="container">
138
  <div class="input-area">
139
- <div class="slider-container">
140
- <label for="rate">скорость:</label
141
- ><input
142
- type="range"
143
- min="-1"
144
- max="1"
145
- step="0.1"
146
- value="-0.1"
147
- class="slider"
148
- id="rate"
149
- />
150
- <div class="slider-value" id="rateValue">-0.1</div>
151
- <label for="pitch">тон:</label
152
- ><input
153
- type="range"
154
- min="-1"
155
- max="1"
156
- step="0.1"
157
- value="0.1"
158
- class="slider"
159
- id="pitch"
160
- />
161
- <div class="slider-value" id="pitchValue">0.1</div>
162
- </div>
163
  <div class="textarea-container">
164
  <label for="inputText">текст:</label
165
  ><textarea id="inputText">Привет, хочешь я расскажу сказку?</textarea>
166
  </div>
167
  <div class="dropdown-container">
168
- <label for="voiceSelect">выберите голос:</label>
169
  <select id="voiceSelect">
170
  <option value="ava">ava</option>
171
  <option value="andrew">andrew</option>
@@ -179,10 +155,9 @@ async function handleDemoRequest(req: Request) {
179
  <option value="svetlana">svetlana</option>
180
  </select>
181
  </div>
182
- <button id="synthesizeButton">Синтезировать</button>
183
  </div>
184
  <div class="output-area">
185
- <h1>Результат</h1>
186
  <div id="audioPlayerContainer"></div>
187
  </div>
188
  </div>
@@ -190,9 +165,9 @@ async function handleDemoRequest(req: Request) {
190
  let audio = null;
191
 
192
  document.getElementById('synthesizeButton').addEventListener('click', () => {
193
- const text = document.getElementById('inputText').value || 'Hello world';
194
- const rate = document.getElementById('rate').value || '0.0';
195
- const pitch = document.getElementById('pitch').value || '0.0';
196
  const voice = \`rate:\${rate}|pitch:\${pitch}\`;
197
  const model = document.getElementById('voiceSelect').value;
198
 
@@ -208,18 +183,35 @@ async function handleDemoRequest(req: Request) {
208
  })
209
  .then(response => response.blob())
210
  .then(blob => {
211
- const audioUrl = URL.createObjectURL(blob);
212
- const audioPlayerContainer = document.getElementById('audioPlayerContainer');
213
-
214
- if (audio) {
215
- audio.src = audioUrl;
216
- } else {
217
- audio = new Audio(audioUrl);
218
- audioPlayerContainer.appendChild(audio);
219
- }
220
-
221
- audio.play();
222
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  });
224
 
225
  const rateSlider = document.getElementById('rate');
 
136
  <body>
137
  <div class="container">
138
  <div class="input-area">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
139
  <div class="textarea-container">
140
  <label for="inputText">текст:</label
141
  ><textarea id="inputText">Привет, хочешь я расскажу сказку?</textarea>
142
  </div>
143
  <div class="dropdown-container">
144
+ <label for="voiceSelect">выбери голос:</label>
145
  <select id="voiceSelect">
146
  <option value="ava">ava</option>
147
  <option value="andrew">andrew</option>
 
155
  <option value="svetlana">svetlana</option>
156
  </select>
157
  </div>
158
+ <button id="synthesizeButton">синтезировать</button>
159
  </div>
160
  <div class="output-area">
 
161
  <div id="audioPlayerContainer"></div>
162
  </div>
163
  </div>
 
165
  let audio = null;
166
 
167
  document.getElementById('synthesizeButton').addEventListener('click', () => {
168
+ const text = document.getElementById('inputText').value || 'приветик! давай поболтаем немного?';
169
+ const rate = '0.0';
170
+ const pitch = '0.0';
171
  const voice = \`rate:\${rate}|pitch:\${pitch}\`;
172
  const model = document.getElementById('voiceSelect').value;
173
 
 
183
  })
184
  .then(response => response.blob())
185
  .then(blob => {
186
+ const audioUrl = URL.createObjectURL(blob);
187
+ const audioPlayerContainer = document.getElementById('audioPlayerContainer');
188
+
189
+ // Удаляем старый аудиоплеер, если он существует
190
+ if (audio) {
191
+ audio.pause();
192
+ audioPlayerContainer.innerHTML = '';
193
+ }
194
+
195
+ // Создаем новый аудиоплеер
196
+ audio = new Audio(audioUrl);
197
+ audio.controls = true;
198
+ audioPlayerContainer.appendChild(audio);
199
+
200
+ // Создаем ссылку для скачивания
201
+ const downloadLink = document.createElement('a');
202
+ downloadLink.href = audioUrl;
203
+ downloadLink.download = 'synthesized_voice.mp3';
204
+ downloadLink.textContent = 'Скачать аудио';
205
+ downloadLink.style.display = 'block';
206
+ downloadLink.style.marginTop = '10px';
207
+
208
+ // Добавляем ссылку для скачивания в контейнер
209
+ audioPlayerContainer.appendChild(downloadLink);
210
+
211
+ // Воспроизводим аудио
212
+ audio.play();
213
+ });
214
+
215
  });
216
 
217
  const rateSlider = document.getElementById('rate');