<div style="background: #f9f9f9; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #ddd; text-align: center;">
    <button id="speakBtn" style="background-color: #28a745; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; margin-right: 10px;" onclick="toggleSpeech()">
        🔊 استمع للموضوع
    </button>
    <button id="pauseBtn" style="background-color: #ffc107; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; display: none;" onclick="pauseSpeech()">
        ⏸️ إيقاف مؤقت
    </button>
    <button id="stopBtn" style="background-color: #dc3545; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; display: none;" onclick="stopSpeech()">
        ⏹️ إيقاف
    </button>
    <p id="speechStatus" style="margin-top: 10px; font-weight: bold; color: #555;"></p>
</div>

<script>
    var synth = window.speechSynthesis;
    var utterance;
    var isPaused = false;
    // استبدل 'post_message' بـ CSS Class الخاصة بمحتوى المواضيع في قالب المنتدى الخاص بك
    var textToSpeak = document.querySelector('.post_message').innerText || document.querySelector('.post_message').textContent;

    function toggleSpeech() {
        if (!synth) {
            alert('عذراً، متصفحك لا يدعم ميزة القراءة الصوتية.');
            return;
        }

        if (synth.paused) {
            synth.resume();
            document.getElementById('pauseBtn').style.display = 'inline-block';
            document.getElementById('speakBtn').style.display = 'none';
            document.getElementById('speechStatus').innerText = 'جاري القراءة...';
            return;
        }

        if (synth.speaking) {
            return;
        }

        if (textToSpeak) {
            utterance = new SpeechSynthesisUtterance(textToSpeak);
            utterance.lang = 'ar'; // تحديد اللغة العربية
            utterance.rate = 1.0; // سرعة القراءة
            utterance.pitch = 1.0; // طبقة الصوت

            utterance.onstart = function() {
                document.getElementById('speakBtn').style.display = 'none';
                document.getElementById('pauseBtn').style.display = 'inline-block';
                document.getElementById('stopBtn').style.display = 'inline-block';
                document.getElementById('speechStatus').innerText = 'جاري القراءة...';
            };

            utterance.onend = function() {
                document.getElementById('speakBtn').style.display = 'inline-block';
                document.getElementById('pauseBtn').style.display = 'none';
                document.getElementById('stopBtn').style.display = 'none';
                document.getElementById('speechStatus').innerText = 'انتهت القراءة.';
            };

            synth.speak(utterance);
        } else {
            alert('لا يوجد نص لقراءته.');
        }
    }

    function pauseSpeech() {
        if (synth.speaking && !synth.paused) {
            synth.pause();
            document.getElementById('pauseBtn').style.display = 'none';
            document.getElementById('speakBtn').style.display = 'inline-block';
            document.getElementById('speechStatus').innerText = 'تم الإيقاف المؤقت.';
        }
    }

    function stopSpeech() {
        if (synth.speaking) {
            synth.cancel();
            document.getElementById('speakBtn').style.display = 'inline-block';
            document.getElementById('pauseBtn').style.display = 'none';
            document.getElementById('stopBtn').style.display = 'none';
            document.getElementById('speechStatus').innerText = 'تم إيقاف القراءة.';
        }
    }
</script>