Contoh Aplikasi

Beranda
CSS

Konverter Teks ke Suara Bilingual: Solusi Praktis untuk Konten Audio

Artikel berikut membahas mengenai Konverter Teks ke Suara Bilingual: Solusi Praktis untuk Konten Audio
Tampilan aplikasi konverter teks ke suara dengan kolom input, dropdown bahasa, dan tombol dengarkan
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:

  1. Ketik/paste teks di area input
  2. Pilih bahasa (Indonesia/English)
  3. Klik tombol "Dengarkan"
  4. Teks akan dibacakan oleh sistem
<!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>