Spaces:
Running
Running
Update main.ts
Browse files
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"
|
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"
|
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 || '
|
194 |
-
const rate =
|
195 |
-
const pitch =
|
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 |
-
|
212 |
-
|
213 |
-
|
214 |
-
|
215 |
-
|
216 |
-
|
217 |
-
|
218 |
-
|
219 |
-
|
220 |
-
|
221 |
-
|
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');
|