Untitled

avatar
unknown
plain_text
2 years ago
1.9 kB
7
Indexable
<!DOCTYPE html>
<html>
<head>
    <title>Text-to-Speech Demo</title>
    <script>
        function speak() {
            var text = document.getElementById("text-input").value;
            var voice = document.getElementById("voice-select").value;
            var pitch = document.getElementById("pitch-range").value;
            var rate = document.getElementById("rate-range").value;
            var volume = document.getElementById("volume-range").value;

            var url = "http://localhost:5000/speak?text=" + encodeURIComponent(text) +
                "&voice=" + encodeURIComponent(voice) +
                "&pitch=" + pitch +
                "&rate=" + rate +
                "&volume=" + volume;

            var audio = new Audio(url);
            audio.play();
        }
    </script>
</head>
<body>
    <h1>Text-to-Speech Demo</h1>
    <div>
        <textarea id="text-input" rows="4" cols="50" placeholder="Enter text"></textarea>
    </div>
    <div>
        <label for="voice-select">Voice:</label>
        <select id="voice-select">
            <option value="com.apple.speech.synthesis.voice.Alex">Alex (Male)</option>
            <option value="com.apple.speech.synthesis.voice.Victoria">Victoria (Female)</option>
        </select>
    </div>
    <div>
        <label for="pitch-range">Pitch:</label>
        <input type="range" id="pitch-range" min="0.5" max="2.0" step="0.1" value="1.0">
    </div>
    <div>
        <label for="rate-range">Speech Rate:</label>
        <input type="range" id="rate-range" min="0.5" max="2.0" step="0.1" value="1.0">
    </div>
    <div>
        <label for="volume-range">Volume:</label>
        <input type="range" id="volume-range" min="0.0" max="1.0" step="0.1" value="1.0">
    </div>
    <div>
        <button onclick="speak()">Speak</button>
    </div>
</body>
</html>
Editor is loading...