Urdu AI Pro - مصنوعی ذہانت اردو میں

📑فہرست

1.تعارف
2.Web Speech Synthesis API
3.Voice Selection
4.Implementation
5.مکمل کوڈ
6.Advanced Features

اس سبق میں آپ سیکھیں گے کہ کیسے Web Speech Synthesis API استعمال کرکے متن کو آواز میں تبدیل کیا جائے۔ یہ feature accessibility اور user experience کو بہتر بناتا ہے۔

📋 Prerequisites: HTML, CSS, JavaScript کی بنیادی معلومات ضروری ہے۔

🔊Web Speech Synthesis API

Web Speech Synthesis API ایک browser API ہے جو text-to-speech functionality فراہم کرتی ہے:

✅ Features:

Browser built-in API
Multiple voices
Rate, pitch, volume control
Language selection
Play, pause, stop controls

📊 Browser Support:

Chrome: ✅ Full
Edge: ✅ Full
Safari: ✅ Full
Firefox: ✅ Full

🎵Voice Selection

مختلف browsers مختلف voices فراہم کرتے ہیں:

Available Voice Types:

System Voices: OS میں pre-installed voices
Online Voices: Cloud-based voices (better quality)
Language-specific: Urdu, Arabic, English, etc.

💡 نوٹ: Urdu voices کی availability browser اور OS پر منحصر ہے۔ اگر Urdu voice نہیں ملتی، تو code میں fallback mechanism شامل ہے۔

⚙️Implementation Steps

1. API Initialization

let synth = window.speechSynthesis;
let utterance = new SpeechSynthesisUtterance(text);

2. Configuration

utterance.lang = 'ur-PK';  // Language
utterance.rate = 1.0;      // Speed (0.1 to 10)
utterance.pitch = 1.0;     // Pitch (0 to 2)
utterance.volume = 1.0;    // Volume (0 to 1)
utterance.voice = voices[0]; // Voice selection

3. Controls

synth.speak(utterance);  // Play
synth.pause();            // Pause
synth.resume();           // Resume
synth.cancel();           // Stop

💻مکمل HTML کوڈ

نیچے دیا گیا کوڈ مکمل Text-to-Speech app ہے۔ اسے کاپی کریں اور test کریں۔

Complete Text-to-Speech App

<!DOCTYPE html>
<html lang="ur">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>متن سے آواز</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: system-ui, sans-serif; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px; 
            direction: rtl;
            min-height: 100vh;
        }
        .container { 
            max-width: 700px; 
            margin: 0 auto; 
            background: white; 
            padding: 30px; 
            border-radius: 16px; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        h1 {
            text-align: center;
            color: #1e293b;
            margin-bottom: 30px;
            font-size: 28px;
        }
        .input-area {
            margin-bottom: 20px;
        }
        textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 16px;
            min-height: 150px;
            resize: vertical;
            font-family: inherit;
        }
        .controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 20px;
        }
        select {
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            background: white;
        }
        .button-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .btn {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn.play {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }
        .btn.play:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
        }
        .btn.pause {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }
        .btn.stop {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
        }
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .status {
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: 500;
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            color: #64748b;
        }
        .error {
            background: #fee2e2;
            color: #991b1b;
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
            border: 2px solid #ef4444;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔊 متن سے آواز</h1>
        
        <div class="status" id="status">تیار - متن درج کریں اور "پلے" پر کلک کریں</div>

        <div class="input-area">
            <textarea id="textInput" placeholder="یہاں اپنا متن لکھیں...">السلام علیکم! یہ ایک text-to-speech test ہے۔</textarea>
        </div>

        <div class="controls">
            <select id="voiceSelect">
                <option value="">Default Voice</option>
            </select>
            <select id="rateSelect">
                <option value="0.5">0.5x (بہت آہستہ)</option>
                <option value="0.75">0.75x (آہستہ)</option>
                <option value="1" selected>1x (عام)</option>
                <option value="1.25">1.25x (تیز)</option>
                <option value="1.5">1.5x (بہت تیز)</option>
            </select>
        </div>

        <div class="button-group">
            <button class="btn play" id="playBtn" onclick="speak()">▶️ پلے</button>
            <button class="btn pause" id="pauseBtn" onclick="pause()" disabled>⏸️ پاس</button>
            <button class="btn stop" id="stopBtn" onclick="stop()" disabled>⏹️ سٹاپ</button>
        </div>

        <div id="error" class="error" style="display: none;"></div>
    </div>

    <script>
        let synth = window.speechSynthesis;
        let utterance = null;
        let voices = [];

        // Load available voices
        function loadVoices() {
            voices = synth.getVoices();
            const voiceSelect = document.getElementById('voiceSelect');
            
            // Clear existing options
            voiceSelect.innerHTML = '<option value="">Default Voice</option>';
            
            // Filter Urdu/Arabic/Hindi voices
            const urduVoices = voices.filter(voice => 
                voice.lang.includes('ur') || 
                voice.lang.includes('ar') || 
                voice.lang.includes('hi') ||
                voice.lang.includes('en')
            );
            
            urduVoices.forEach((voice, index) => {
                const option = document.createElement('option');
                option.value = index;
                option.textContent = voice.name + ' (' + voice.lang + ')';
                voiceSelect.appendChild(option);
            });
        }

        // Load voices when available
        if (speechSynthesis.onvoiceschanged !== undefined) {
            speechSynthesis.onvoiceschanged = loadVoices;
        }
        loadVoices(); // For Chrome

        function speak() {
            const text = document.getElementById('textInput').value.trim();
            if (!text) {
                showError('براہ کرم متن درج کریں');
                return;
            }

            // Stop any ongoing speech
            synth.cancel();

            utterance = new SpeechSynthesisUtterance(text);
            
            // Set voice
            const voiceIndex = document.getElementById('voiceSelect').value;
            if (voiceIndex) {
                utterance.voice = voices[voiceIndex];
            }

            // Set rate
            utterance.rate = parseFloat(document.getElementById('rateSelect').value);

            // Set language (Urdu)
            utterance.lang = 'ur-PK';

            // Event handlers
            utterance.onstart = function() {
                document.getElementById('status').textContent = '🔊 آواز چل رہی ہے...';
                document.getElementById('status').style.background = '#d1fae5';
                document.getElementById('status').style.borderColor = '#10b981';
                document.getElementById('status').style.color = '#065f46';
                document.getElementById('playBtn').disabled = true;
                document.getElementById('pauseBtn').disabled = false;
                document.getElementById('stopBtn').disabled = false;
            };

            utterance.onend = function() {
                document.getElementById('status').textContent = '✅ آواز مکمل ہو گئی';
                document.getElementById('status').style.background = '#f8fafc';
                document.getElementById('status').style.borderColor = '#e2e8f0';
                document.getElementById('status').style.color = '#64748b';
                document.getElementById('playBtn').disabled = false;
                document.getElementById('pauseBtn').disabled = true;
                document.getElementById('stopBtn').disabled = true;
            };

            utterance.onerror = function(event) {
                showError('خرابی: ' + event.error);
                document.getElementById('playBtn').disabled = false;
                document.getElementById('pauseBtn').disabled = true;
                document.getElementById('stopBtn').disabled = true;
            };

            synth.speak(utterance);
        }

        function pause() {
            if (synth.speaking && !synth.paused) {
                synth.pause();
                document.getElementById('status').textContent = '⏸️ روکا گیا';
                document.getElementById('pauseBtn').textContent = '▶️ Resume';
            } else if (synth.paused) {
                synth.resume();
                document.getElementById('status').textContent = '🔊 آواز چل رہی ہے...';
                document.getElementById('pauseBtn').textContent = '⏸️ پاس';
            }
        }

        function stop() {
            synth.cancel();
            document.getElementById('status').textContent = '⏹️ روک دیا گیا';
            document.getElementById('status').style.background = '#f8fafc';
            document.getElementById('status').style.borderColor = '#e2e8f0';
            document.getElementById('status').style.color = '#64748b';
            document.getElementById('playBtn').disabled = false;
            document.getElementById('pauseBtn').disabled = true;
            document.getElementById('stopBtn').disabled = true;
            document.getElementById('pauseBtn').textContent = '⏸️ پاس';
        }

        function showError(message) {
            const errorDiv = document.getElementById('error');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            setTimeout(function() {
                errorDiv.style.display = 'none';
            }, 5000);
        }

        // Check browser support
        if (!('speechSynthesis' in window)) {
            document.getElementById('status').textContent = '❌ آپ کا براؤزر Text-to-Speech سپورٹ نہیں کرتا';
            document.getElementById('playBtn').disabled = true;
        }
    </script>
</body>
</html>

✨Advanced Features

✨ اضافی فیچرز:

Pitch control (آواز کی اونچائی)
Volume control (آواز کی بلندی)
SSML support (advanced formatting)
Queue management (multiple utterances)
Audio visualization

🎯 Use Cases:

Accessibility features
Language learning apps
News readers
Navigation systems
Educational content