<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text to Speech Converter with Download</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            width: 100%;
            background: rgba(255, 255, 255, 0.93);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            padding: 40px;
            position: relative;
            overflow: hidden;
        }
        
        .container:before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent 80%);
            z-index: 0;
            transform: rotate(30deg);
        }
        
        .content {
            position: relative;
            z-index: 1;
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 2.8rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            background: linear-gradient(135deg, #1a2a6c, #b21f1f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .subtitle {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 30px;
            font-size: 1.2rem;
        }
        
        .input-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: #34495e;
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        textarea {
            width: 100%;
            height: 180px;
            padding: 20px;
            border: 2px solid #3498db;
            border-radius: 15px;
            font-size: 17px;
            resize: vertical;
            transition: all 0.3s;
            background: #f8f9fa;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
        }
        
        textarea:focus {
            outline: none;
            border-color: #e74c3c;
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
        }
        
        .controls {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .voice-controls {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .voice-options {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }
        
        .voice-option {
            flex: 1;
            min-width: 120px;
        }
        
        .voice-option input[type="radio"] {
            display: none;
        }
        
        .voice-option label {
            display: block;
            background: #ecf0f1;
            padding: 15px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
            border: 2px solid transparent;
            color: #2c3e50;
        }
        
        .voice-option input[type="radio"]:checked + label {
            background: #3498db;
            color: white;
            border-color: #2980b9;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .voice-option input[type="radio"]:checked + label.female {
            background: linear-gradient(135deg, #b21f1f, #ff6b6b);
        }
        
        .voice-option input[type="radio"]:checked + label.male {
            background: linear-gradient(135deg, #1a2a6c, #4a90e2);
        }
        
        .voice-option label:hover {
            background: #d6dbdf;
        }
        
        .voice-option label i {
            margin-right: 8px;
            font-size: 1.2em;
        }
        
        .rate-control, .pitch-control, .volume-control {
            margin-bottom: 22px;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .slider-container label {
            min-width: 80px;
            margin-bottom: 0;
        }
        
        .slider-container input {
            flex: 1;
            height: 10px;
            border-radius: 5px;
            background: #e0e0e0;
            outline: none;
            -webkit-appearance: none;
        }
        
        .slider-container input::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .slider-container span {
            width: 40px;
            text-align: center;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        button {
            padding: 15px 32px;
            border: none;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }
        
        .speak-btn {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
        }
        
        .stop-btn {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
        }
        
        .download-btn {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
        }
        
        button:hover:not(:disabled) {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }
        
        button:active:not(:disabled) {
            transform: translateY(0);
        }
        
        .status {
            text-align: center;
            margin-top: 25px;
            font-weight: 600;
            min-height: 25px;
            color: #2c3e50;
            font-size: 1.1rem;
            background: rgba(52, 152, 219, 0.1);
            padding: 12px;
            border-radius: 10px;
            border-left: 4px solid #3498db;
        }
        
        .icon {
            font-size: 20px;
        }
        
        .preview-box {
            margin-top: 25px;
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            display: none;
        }
        
        .preview-box h3 {
            margin-bottom: 15px;
            color: #2c3e50;
            text-align: center;
        }
        
        .preview-audio {
            width: 100%;
        }
        
        @media (max-width: 700px) {
            .container {
                padding: 25px;
            }
            
            .buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            button {
                width: 100%;
                justify-content: center;
            }
            
            h1 {
                font-size: 2.3rem;
            }
        }
        
        .footer {
            margin-top: 30px;
            text-align: center;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .progress-bar {
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            margin-top: 5px;
            overflow: hidden;
            display: none;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            width: 0%;
            transition: width 0.3s;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <h1><i class="fas fa-microphone-alt"></i> Text to Speech Converter</h1>
            <p class="subtitle">Convert text to natural-sounding speech and download as audio</p>
            
            <div class="input-group">
                <label for="text-input">Enter your text:</label>
                <textarea id="text-input" placeholder="Type or paste your text here...">Hello! Welcome to this text-to-speech converter. You can convert any text to speech with male or female voices. Try typing something and press the speak button!</textarea>
            </div>
            
            <div class="controls">
                <div class="voice-controls">
                    <p style="font-weight: 600; color: #34495e; margin-bottom: 15px; font-size: 1.2rem;"><i class="fas fa-voice"></i> Voice Options:</p>
                    <div class="voice-options">
                        <div class="voice-option">
                            <input type="radio" id="female-voice" name="voice" value="female" checked>
                            <label for="female-voice" class="female"><i class="fas fa-female"></i> Female Voice</label>
                        </div>
                        <div class="voice-option">
                            <input type="radio" id="male-voice" name="voice" value="male">
                            <label for="male-voice" class="male"><i class="fas fa-male"></i> Male Voice</label>
                        </div>
                    </div>
                    
                    <div class="rate-control">
                        <div class="slider-container">
                            <label for="rate"><i class="fas fa-tachometer-alt"></i> Speed:</label>
                            <input type="range" id="rate" min="0.5" max="2" value="1" step="0.1">
                            <span id="rate-value">1.0</span>
                        </div>
                    </div>
                    
                    <div class="pitch-control">
                        <div class="slider-container">
                            <label for="pitch"><i class="fas fa-sliders-h"></i> Pitch:</label>
                            <input type="range" id="pitch" min="0.5" max="2" value="1" step="0.1">
                            <span id="pitch-value">1.0</span>
                        </div>
                    </div>
                    
                    <div class="volume-control">
                        <div class="slider-container">
                            <label for="volume"><i class="fas fa-volume-up"></i> Volume:</label>
                            <input type="range" id="volume" min="0" max="1" value="1" step="0.1">
                            <span id="volume-value">1.0</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="progress-bar">
                <div class="progress" id="progress"></div>
            </div>
            
            <div class="buttons">
                <button id="speak-btn" class="speak-btn">
                    <span class="icon"><i class="fas fa-play"></i></span> Speak
                </button>
                <button id="stop-btn" class="stop-btn">
                    <span class="icon"><i class="fas fa-stop"></i></span> Stop
                </button>
                <button id="download-btn" class="download-btn">
                    <span class="icon"><i class="fas fa-download"></i></span> Download
                </button>
            </div>
            
            <div class="status" id="status">Ready to convert your text</div>
            
            <div class="preview-box" id="preview-box">
                <h3><i class="fas fa-headphones"></i> Audio Preview</h3>
                <audio controls class="preview-audio" id="preview-audio"></audio>
            </div>
            
            <div class="footer">
                <p>Text to Speech Converter &copy; 2023 | Works on Chrome, Edge, and Safari</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // DOM elements
            const textInput = document.getElementById('text-input');
            const speakButton = document.getElementById('speak-btn');
            const stopButton = document.getElementById('stop-btn');
            const downloadButton = document.getElementById('download-btn');
            const rateSlider = document.getElementById('rate');
            const pitchSlider = document.getElementById('pitch');
            const volumeSlider = document.getElementById('volume');
            const rateValue = document.getElementById('rate-value');
            const pitchValue = document.getElementById('pitch-value');
            const volumeValue = document.getElementById('volume-value');
            const statusDisplay = document.getElementById('status');
            const femaleVoice = document.getElementById('female-voice');
            const maleVoice = document.getElementById('male-voice');
            const previewBox = document.getElementById('preview-box');
            const previewAudio = document.getElementById('preview-audio');
            const progressBar = document.querySelector('.progress-bar');
            const progress = document.getElementById('progress');
            
            // Initialize speech synthesis
            const synth = window.speechSynthesis;
            let voices = [];
            let selectedVoice = null;
            let currentUtterance = null;
            let audioData = [];
            let mediaRecorder;
            let audioChunks = [];
            let recording = false;
            
            // Load voices
            function loadVoices() {
                voices = synth.getVoices();
                if (voices.length === 0) {
                    setTimeout(loadVoices, 100);
                    return;
                }
                
                // Set default voice based on selection
                setVoice();
            }
            
            // Set voice based on selection
            function setVoice() {
                // Find voices based on user selection
                if (femaleVoice.checked) {
                    // Prefer female voices
                    selectedVoice = voices.find(voice => 
                        voice.name.includes('Female') || 
                        voice.name.includes('Woman') ||
                        voice.name.includes('Zira') ||   // For Edge
                        voice.name.includes('Karen')     // For Chrome
                    );
                    
                    // Fallback to a female-sounding voice if not found
                    if (!selectedVoice) {
                        selectedVoice = voices.find(voice => !voice.name.includes('Male'));
                    }
                } else {
                    // Prefer male voices
                    selectedVoice = voices.find(voice => 
                        voice.name.includes('Male') || 
                        voice.name.includes('Man') ||
                        voice.name.includes('David') ||  // For Chrome
                        voice.name.includes('Mark')      // For Safari
                    );
                    
                    // Fallback to a male-sounding voice if not found
                    if (!selectedVoice) {
                        selectedVoice = voices.find(voice => voice.name.includes('Male'));
                    }
                }
                
                // Fallback to first available voice
                if (!selectedVoice && voices.length > 0) {
                    selectedVoice = voices[0];
                }
            }
            
            // Update slider values
            rateSlider.addEventListener('input', () => {
                rateValue.textContent = rateSlider.value;
            });
            
            pitchSlider.addEventListener('input', () => {
                pitchValue.textContent = pitchSlider.value;
            });
            
            volumeSlider.addEventListener('input', () => {
                volumeValue.textContent = volumeSlider.value;
            });
            
            // Voice selection change
            femaleVoice.addEventListener('change', setVoice);
            maleVoice.addEventListener('change', setVoice);
            
            // Start recording
            function startRecording() {
                audioChunks = [];
                
                // Check if MediaRecorder is supported
                if (navigator.mediaDevices && MediaRecorder) {
                    navigator.mediaDevices.getUserMedia({ audio: true })
                        .then(stream => {
                            mediaRecorder = new MediaRecorder(stream);
                            
                            mediaRecorder.ondataavailable = e => {
                                audioChunks.push(e.data);
                            };
                            
                            mediaRecorder.onstop = () => {
                                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                                const audioUrl = URL.createObjectURL(audioBlob);
                                audioData = audioUrl;
                                
                                // Show preview and set audio source
                                previewBox.style.display = 'block';
                                previewAudio.src = audioUrl;
                                
                                // Stop all tracks
                                stream.getTracks().forEach(track => track.stop());
                            };
                            
                            mediaRecorder.start();
                            recording = true;
                        })
                        .catch(err => {
                            console.error('Error accessing microphone:', err);
                            statusDisplay.textContent = "Microphone access required for recording";
                        });
                } else {
                    statusDisplay.textContent = "Recording not supported in your browser";
                }
            }
            
            // Stop recording
            function stopRecording() {
                if (recording && mediaRecorder) {
                    mediaRecorder.stop();
                    recording = false;
                }
            }
            
            // Speak function
            function speakText() {
                if (synth.speaking) {
                    statusDisplay.textContent = "Already speaking...";
                    return;
                }
                
                if (textInput.value.trim() === '') {
                    statusDisplay.textContent = "Please enter some text";
                    return;
                }
                
                // Start recording
                startRecording();
                
                // Create utterance
                const utterance = new SpeechSynthesisUtterance(textInput.value);
                currentUtterance = utterance;
                
                // Set voice and properties
                utterance.voice = selectedVoice;
                utterance.rate = parseFloat(rateSlider.value);
                utterance.pitch = parseFloat(pitchSlider.value);
                utterance.volume = parseFloat(volumeSlider.value);
                
                // Events
                utterance.onstart = () => {
                    statusDisplay.textContent = "Speaking...";
                    speakButton.disabled = true;
                    stopButton.disabled = false;
                    downloadButton.disabled = true;
                    progressBar.style.display = 'block';
                };
                
                utterance.onend = () => {
                    statusDisplay.textContent = "Speech completed";
                    speakButton.disabled = false;
                    stopButton.disabled = true;
                    downloadButton.disabled = false;
                    progress.style.width = '100%';
                    
                    // Stop recording after a short delay
                    setTimeout(stopRecording, 300);
                };
                
                utterance.onerror = (event) => {
                    console.error('Speech error:', event);
                    statusDisplay.textContent = "Error occurred during speech";
                    speakButton.disabled = false;
                    stopButton.disabled = true;
                    downloadButton.disabled = true;
                    stopRecording();
                };
                
                utterance.onboundary = (event) => {
                    const charIndex = event.charIndex;
                    const textLength = textInput.value.length;
                    const progressPercent = (charIndex / textLength) * 100;
                    progress.style.width = `${progressPercent}%`;
                };
                
                // Speak
                synth.speak(utterance);
            }
            
            // Stop function
            function stopSpeaking() {
                if (synth.speaking) {
                    synth.cancel();
                    statusDisplay.textContent = "Speech stopped";
                    speakButton.disabled = false;
                    stopButton.disabled = true;
                    downloadButton.disabled = false;
                    progressBar.style.display = 'none';
                    stopRecording();
                }
            }
            
            // Download function
            function downloadAudio() {
                if (audioData) {
                    const a = document.createElement('a');
                    a.href = audioData;
                    const fileName = `speech-${new Date().getTime()}.wav`;
                    a.download = fileName;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    statusDisplay.textContent = "Download started!";
                } else {
                    statusDisplay.textContent = "No audio to download. Please generate speech first.";
                }
            }
            
            // Event listeners
            speakButton.addEventListener('click', speakText);
            stopButton.addEventListener('click', stopSpeaking);
            downloadButton.addEventListener('click', downloadAudio);
            
            // Initialize voices
            loadVoices();
            
            // For browsers that don't fire the "voiceschanged" event
            setTimeout(loadVoices, 1000);
        });
    </script>
</body>
</html>