Konverter Teks ke Suara Bilingual: Solusi Praktis untuk K...

Di era digital yang serba cepat, aksesibilitas konten menjadi hal penting. Dengan

aplikasi Konverter Teks ke Suara

ini, Anda bisa mengubah teks tertulis menjadi audio dalam hitungan detik! ✨

Aplikasi berbasis web ini memungkinkan Anda:

Mengonversi teks ke suara dalam Bahasa Indonesia & Inggris
Memilih jenis suara yang sesuai
Mendengarkan konten secara instan tanpa instalasi
Desain responsive yang bekerja sempurna di mobile dan desktop

Mengapa Anda Perlu Tool Ini?
✔️ Aksesibilitas untuk penyandang disleksia/tunanetra
✔️ Membantu proofreading konten dengan mendengarkan
✔️ Solusi praktis membuat audio dari script
✔️ Media pembelajaran bahasa yang interaktif

Fitur Unggulan:
✅ Konversi real-time dengan Web Speech API
✅ Antarmuka sederhana & mudah digunakan
✅ Ringan & cepat tanpa perlu registrasi
✅ Kode siap pakai yang bisa dimodifikasi

Cara Menggunakan:

Ketik/paste teks di area input
Pilih bahasa (Indonesia/English)
Klik tombol “Dengarkan”
Teks akan dibacakan oleh sistem

Code Snippet

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Konverter Teks ke Suara</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #667eea, #764ba2);
      display: flex; justify-content: center; align-items: center;
      min-height: 100vh; padding: 16px;
    }
    .container {
      background: white; width: 100%; max-width: 400px;
      padding: 20px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    h1 { font-size: 1.4rem; margin-bottom: 8px; color: #333; }
    .app-description { color: #666; font-size: 0.9rem; margin-bottom: 16px; }
    label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: #444; }
    textarea, select {
      width: 100%; padding: 12px; margin-bottom: 16px;
      border: 1px solid #ddd; border-radius: 8px; font-size: 1rem;
    }
    textarea { height: 100px; resize: none; }
    .button-group { display: flex; gap: 12px; margin-top: 16px; }
    button {
      flex: 1; padding: 12px; border: none; border-radius: 8px;
      color: white; font-weight: 500; cursor: pointer;
    }
    .btn-speak { background: #4361ee; }
    .btn-reset { background: #f44336; }
    .voice-info { margin-top: 12px; font-size: 0.8rem; color: #666; display: none; }
    @media (max-width: 480px) {
      .button-group { flex-direction: column; }
      h1 { font-size: 1.3rem; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Konverter Teks ke Suara</h1>
    <p class="app-description">Ubah teks menjadi suara dalam bahasa Indonesia atau Inggris</p>
    
    <label for="text-input">Masukkan teks:</label>
    <textarea id="text-input" placeholder="Ketik teks Anda di sini..."></textarea>
    
    <label for="language">Pilih bahasa:</label>
    <select id="language">
      <option value="id-ID">Bahasa Indonesia</option>
      <option value="en-US">English (US)</option>
    </select>
    
    <div class="button-group">
      <button class="btn-speak" onclick="speakText()">🔊 Dengarkan</button>
      <button class="btn-reset" onclick="resetText()">🗑️ Reset</button>
    </div>
    
    <p class="voice-info" id="voice-info"></p>
  </div>

  <script>
    function speakText() {
      const text = document.getElementById("text-input").value.trim();
      const lang = document.getElementById("language").value;
      const voiceInfo = document.getElementById('voice-info');

      if (!text) {
        alert("Silakan masukkan teks terlebih dahulu");
        return;
      }

      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = lang;
      
      utterance.onstart = function() {
        const voices = window.speechSynthesis.getVoices();
        const currentVoice = voices.find(v => v.lang === lang);
        if (currentVoice) {
          voiceInfo.textContent = `Menggunakan suara: ${currentVoice.name}`;
          voiceInfo.style.display = 'block';
        }
      };
      
      speechSynthesis.speak(utterance);
    }

    function resetText() {
      document.getElementById("text-input").value = "";
      speechSynthesis.cancel();
      document.getElementById('voice-info').style.display = 'none';
    }
  </script>
</body>
</html>

Konverter Teks ke Suara Bilingual: Solusi Praktis untuk Konten Audio

Tinggalkan Balasan Batalkan balasan