|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Text-to-Speech</title> |
|
</head> |
|
<body> |
|
<h1>Text-to-Speech Conversion</h1> |
|
<form action="/convert" method="post"> |
|
<textarea name="text" rows="5" cols="50" placeholder="Enter text here"></textarea><br> |
|
<select name="voice"> |
|
<option value="">Select Voice</option> |
|
|
|
</select><br> |
|
<label for="rate">Speech Rate Adjustment (%):</label> |
|
<input type="range" id="rate" name="rate" min="-50" max="50" value="0"><br> |
|
<label for="pitch">Pitch Adjustment (Hz):</label> |
|
<input type="range" id="pitch" name="pitch" min="-20" max="20" value="0"><br> |
|
<input type="submit" value="Convert"> |
|
</form> |
|
<script> |
|
async function populateVoices() { |
|
const response = await fetch('/voices'); |
|
const voices = await response.json(); |
|
const select = document.querySelector('select[name="voice"]'); |
|
for (const [key, value] of Object.entries(voices)) { |
|
const option = document.createElement('option'); |
|
option.value = key; |
|
option.textContent = key; |
|
select.appendChild(option); |
|
} |
|
} |
|
populateVoices(); |
|
</script> |
|
</body> |
|
</html> |
