Spaces:
Running
Running
File size: 2,786 Bytes
3ce6dc6 d3f22a2 3ce6dc6 daf5d92 3ce6dc6 a7f56c1 d3f22a2 3ce6dc6 b6b02d5 104a977 003c2f4 b6b02d5 a723726 b6b02d5 d3f22a2 4d53cd1 2cb1592 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 3ff1634 70ee0db 3ff1634 2a650fb 70ee0db 6dd46b2 70ee0db 6dd46b2 70ee0db 6dd46b2 70ee0db 6dd46b2 70ee0db d393b7a 70ee0db 3ce6dc6 d3f22a2 70ee0db |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html>
<html>
<head>
<title>Fast TTS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/styles.css"> <!-- Link to your external CSS file -->
<!-- Add any CSS links or styles here -->
</head>
<body>
<form method="post" action="/">
<div>
<label for="text_input">Text to synthesize:</label>
<input type="text" id="text_input" name="text_input" value="1, 2, 3. Enter your text here">
</div>
<div>
<label for="selection">Select speaker:</label>
<select id="speaker" name="speaker">
{% for option in data.speaker_options %}
<option {% if option == data.default_speaker %}selected{% endif %}>{{ option }}</option>
{% endfor %}
</select>
</div>
<div id="speaker_selection" style="display: none;">
<!-- Dropdown for speaker selection -->
</div>
<div>
<label for="speed_slider">Rate scale:</label>
<input type="range" id="speed_slider" min="0.25" max="4" step="0.1" value="1">
</div>
<div>
<label for="noise_scale_slider">Phoneme noise scale:</label>
<input type="range" id="noise_scale_slider" min="0.25" max="4" step="0.1" value="0.667">
</div>
<div>
<label for="noise_scale_w_slider">Phoneme stressing scale:</label>
<input type="range" id="noise_scale_w_slider" min="0.25" max="4" step="0.1" value="1">
</div>
<div>
<label for="play">Auto-play:</label>
<input type="checkbox" id="play" checked>
</div>
<div>
<button type="submit" id="synthesize_button">Synthesize</button>
</div>
{% if file_url %}
<h2>Generated Audio</h2>
<audio controls id="audio-player">
<source src="{{ file_url }}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<a href="{{ file_url }}" download>Download Audio</a>
{% endif %}
<!-- Move the JavaScript code outside the conditional block -->
<script>
const playCheckbox = document.getElementById("play");
const audioPlayer = document.getElementById("audio-player");
playCheckbox.addEventListener("change", function () {
console.log("Checkbox state changed"); // Add this line for debugging
if (playCheckbox.checked) {
console.log("Checkbox is checked"); // Add this line for debugging
audioPlayer.setAttribute("autoplay", "");
} else {
console.log("Checkbox is unchecked"); // Add this line for debugging
audioPlayer.removeAttribute("autoplay");
}
});
</script>
</form>
</body>
</html>
|