Ultimate" dari AI Voice Reader.

<b:if cond='data:view.isPost'>
  <style>
    /* Desain Panel AI Reader */
    #ai-audio-player {
      background: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 16px;
      padding: 15px;
      margin: 20px 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .ai-controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .ai-btn {
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      background: #007bff;
      color: white;
      box-shadow: 0 4px 10px rgba(0,123,255,0.3);
    }
    .ai-btn:active { transform: scale(0.9); }
    .ai-btn.playing { background: #333; }
    
    .ai-info { flex-grow: 1; }
    .ai-title { font-size: 14px; font-weight: bold; color: #333; display: block; }
    .ai-status { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
    
    .ai-settings { display: flex; align-items: center; gap: 8px; border-left: 1px solid #eee; padding-left: 12px; }
    #ai-speed { border: 1px solid #ddd; border-radius: 5px; font-size: 12px; padding: 4px; outline: none; }

    /* Efek Highlight Teks */
    .ai-reading-now {
      background-color: rgba(255, 235, 59, 0.4) !important;
      border-radius: 4px;
      transition: background-color 0.4s ease;
      position: relative;
    }
  </style>

  <div id='ai-audio-player'>
    <div class='ai-controls'>
      <button class='ai-btn' id='ai-main-btn' onclick='handleAIAction()'>
        <span id='ai-icon'>▶</span>
      </button>
      
      <div class='ai-info'>
        <span class='ai-title'>AI Voice Reader</span>
        <span class='ai-status' id='ai-msg'>Ready to Read</span>
      </div>

      <div class='ai-settings'>
        <select id='ai-speed'>
          <option value='0.8'>0.8x</option>
          <option value='1' selected='selected'>1.0x</option>
          <option value='1.2'>1.2x</option>
        </select>
      </div>
    </div>
    <div id='ai-progress' style='width: 0%; height: 3px; background: #007bff; margin-top: 10px; transition: width 0.3s; border-radius: 2px;'/>
  </div>
</b:if>

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
    const synth = window.speechSynthesis;
    let articleParagraphs = [];
    let currentIdx = 0;
    let isSpeaking = false;

    // Fungsi Utama: Mengatur alur tombol di HP & Desktop
    function handleAIAction() {
        if (synth.speaking && !synth.paused) {
            pauseAI();
        } else if (synth.paused) {
            resumeAI();
        } else {
            // Penting: HP butuh "suara kosong" dulu agar ijin terbuka
            const wakeUp = new SpeechSynthesisUtterance("");
            synth.speak(wakeUp);
            startAI();
        }
    }

    function startAI() {
        synth.cancel();
        
        // Deteksi area konten utama secara cerdas
        const entry = document.querySelector('.post-body') || 
                      document.querySelector('.entry-content') || 
                      document.querySelector('article');

        if (!entry) return;

        // Ambil paragraf, abaikan yang isinya cuma iklan/link
        articleParagraphs = Array.from(entry.querySelectorAll('p, h2, h3'))
                                 .filter(p => p.innerText.trim().length > 20);

        if (articleParagraphs.length === 0) {
            alert("Konten tidak terdeteksi");
            return;
        }

        currentIdx = 0;
        isSpeaking = true;
        readLoop();
    }

    function readLoop() {
        if (currentIdx >= articleParagraphs.length) {
            resetAI();
            return;
        }

        const el = articleParagraphs[currentIdx];
        const text = el.innerText.trim();

        // Highlight & Scroll
        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
        el.classList.add('ai-reading-now');

        const utter = new SpeechSynthesisUtterance(text);
        utter.lang = 'id-ID';
        utter.rate = parseFloat(document.getElementById('ai-speed').value);
        utter.pitch = 1.0;

        utter.onstart = () => {
            document.getElementById('ai-icon').innerText = "⏸";
            document.getElementById('ai-msg').innerText = "Membaca...";
            // Update progress bar
            let prog = ((currentIdx + 1) / articleParagraphs.length) * 100;
            document.getElementById('ai-progress').style.width = prog + "%";
        };

        utter.onend = () => {
            el.classList.remove('ai-reading-now');
            currentIdx++;
            if (isSpeaking) readLoop();
        };

        utter.onerror = () => {
            el.classList.remove('ai-reading-now');
            resetAI();
        };

        synth.speak(utter);
    }

    function pauseAI() {
        synth.pause();
        document.getElementById('ai-icon').innerText = "▶";
        document.getElementById('ai-msg').innerText = "Paused";
    }

    function resumeAI() {
        synth.resume();
        document.getElementById('ai-icon').innerText = "⏸";
        document.getElementById('ai-msg').innerText = "Membaca...";
    }

    function resetAI() {
        synth.cancel();
        isSpeaking = false;
        document.getElementById('ai-icon').innerText = "▶";
        document.getElementById('ai-msg').innerText = "Ready to Read";
        document.getElementById('ai-progress').style.width = "0%";
        articleParagraphs.forEach(p => p.classList.remove('ai-reading-now'));
    }

    // Stop otomatis jika pengunjung menutup halaman
    window.addEventListener('beforeunload', () => synth.cancel());
//]]>
</script>
</b:if>