Create static/tts.js

static/tts.js

@@ -0,0 +1,61 @@
+async function setEngine() {
+    var engine = document.getElementById("engine").value;
+    await fetch('/set_engine?engine_name=' + engine);
+}
+
+async function speak() {
+    var text = document.getElementById("text").value;
+    try {
+        var url = '/tts?text=' + encodeURIComponent(text);
+        var audio = document.getElementById("audio");
+        audio.src = url;
+        audio.play();
+    } catch (error) {
+        console.error('Error during fetch or audio playback:', error);
+    }
+}
+
+async function fetchVoices() {
+    try {
+        var response = await fetch('/voices');
+        if (!response.ok) {
+            throw new Error('Network response was not ok: ' + response.statusText);
+        }
+        var data = await response.json();
+        var voicesDropdown = document.getElementById("voice");
+        voicesDropdown.innerHTML = ''; // Clear previous options
+        data.forEach(function(voice) {
+            var option = document.createElement("option");
+            option.text = voice;
+            option.value = voice;
+            voicesDropdown.add(option);
+        });
+    } catch (error) {
+        console.error('Error fetching voices:', error);
+    }
+}
+
+async function setVoice() {
+    var voice = document.getElementById("voice").value;
+    try {
+        var response = await fetch('/setvoice?voice_name=' + encodeURIComponent(voice));
+        if (!response.ok) {
+            throw new Error('Network response was not ok: ' + response.statusText);
+        }
+        console.log('Voice set successfully:', voice);
+    } catch (error) {
+        console.error('Error setting voice:', error);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    document.getElementById("text").value = "This is a text to speech demo text";
+    document.getElementById("speakButton").addEventListener("click", speak);
+    document.getElementById("engine").addEventListener("change", async function() {
+        await setEngine();
+        await fetchVoices();
+    });
+    document.getElementById("voice").addEventListener("change", setVoice);
+
+    fetchVoices();
+});