Contoh Script Text to Speech Di Antrian Farmasi Pake Webspeech API

<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Panggilan Penyerahan Resep</title>
<style>
.card {
background-color: #ff5722;
color: white;
padding: 20px;
border-radius: 8px;
margin: 10px 0;
}
.debug-info {
margin-top: 20px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 4px;
font-size: 12px;
}
</style>
</head>
<body>
<div class=”row”>
<div class=”col s12″ id=”header-instansi”>
<div class=”card”>
<div class=”card-content”>
<h5>
<table border=’0′ width=’100%’>
<tr>
<td>Panggilan Penyerahan Resep</td>
<td>:</td>
<td>
<!– Simulasi data dari PHP –>
<span>12345 REG001 Nyonya Siti Aminah</span>
<span id=’namaPasien’ data-nama=’Nyonya Siti Aminah’></span>
</td>
</tr>
</table>
</h5>
</div>
</div>
</div>
</div>

<div class=”debug-info”>
<strong>Debug Info:</strong>
<div id=”debugInfo”></div>
<button onclick=”testSpeech()”>Test Suara Manual</button>
<button onclick=”showAvailableVoices()”>Tampilkan Voice Tersedia</button>
</div>

function log(message) {
console.log(message);
if (debugElement) {
debugElement.innerHTML += ‘<br>’ + message;
}
}

function initializeSpeech() {
// Cek dukungan browser
if (!(‘speechSynthesis’ in window)) {
log(‘❌ Browser tidak mendukung Web Speech API’);
return false;
}

log(‘✅ Web Speech API didukung’);
return true;
}

function loadVoices() {
availableVoices = window.speechSynthesis.getVoices();
log(`📢 ${availableVoices.length} suara tersedia`);

// Cari suara bahasa Indonesia
const indonesiaVoices = availableVoices.filter(voice =>
voice.lang.includes(‘id’) || voice.lang.includes(‘ID’)
);

if (indonesiaVoices.length > 0) {
log(`🇮🇩 Ditemukan ${indonesiaVoices.length} suara bahasa Indonesia`);
speechReady = true;

// Panggil pasien jika ada data
const namaPasienElem = document.getElementById(‘namaPasien’);
if (namaPasienElem && namaPasienElem.dataset.nama) {
setTimeout(() => {
panggilPasien(namaPasienElem.dataset.nama);
}, 500); // Delay sedikit untuk memastikan voices siap
}
} else {
log(‘⚠️ Suara bahasa Indonesia tidak ditemukan, akan menggunakan suara default’);
speechReady = true;
}
}

function panggilPasien(namaPasien) {
if (!speechReady) {
log(‘❌ Speech belum siap’);
return;
}

// Hentikan speech yang sedang berjalan
window.speechSynthesis.cancel();

const suara = new SpeechSynthesisUtterance();
suara.text = `Pasien dengan nama ${namaPasien}, silakan menuju loket penyerahan obat.`;

// Pengaturan suara
suara.lang = ‘id-ID’;
suara.rate = 0.8; // Sedikit lebih lambat agar jelas
suara.pitch = 1.0;
suara.volume = 1.0;

// Pilih suara terbaik
const indonesiaVoice = availableVoices.find(voice =>
voice.lang === ‘id-ID’ || voice.lang.includes(‘id’)
);

if (indonesiaVoice) {
suara.voice = indonesiaVoice;
log(`🎤 Menggunakan suara: ${indonesiaVoice.name} (${indonesiaVoice.lang})`);
} else {
log(‘🎤 Menggunakan suara default’);
}

// Event handlers
suara.onstart = function() {
log(‘▶️ Mulai berbicara’);
};

suara.onend = function() {
log(‘✅ Selesai berbicara’);
};

suara.onerror = function(event) {
log(`❌ Error: ${event.error}`);
};

// Jalankan Text-to-Speech
try {
window.speechSynthesis.speak(suara);
log(`📢 Memanggil: ${namaPasien}`);
} catch (error) {
log(`❌ Gagal memanggil: ${error.message}`);
}
}

function testSpeech() {
panggilPasien(‘Test Pasien’);
}

// Inisialisasi
if (initializeSpeech()) {
// Load voices saat halaman dimuat
if (window.speechSynthesis.getVoices().length > 0) {
loadVoices();
}

// Event listener untuk voices changed
window.speechSynthesis.onvoiceschanged = function() {
log(‘🔄 Voices berubah, memuat ulang…’);
loadVoices();
};

// Fallback: coba load voices setelah delay
setTimeout(() => {
if (!speechReady) {
log(‘⏰ Fallback: memuat voices setelah delay’);
loadVoices();
}
}, 1000);
}

// Cleanup saat halaman akan ditutup
window.addEventListener(‘beforeunload’, function() {
window.speechSynthesis.cancel();
});
</script>
</body>
</html>

Contoh Script Text to Speech Di Antrian Farmasi Pake Webspeech API

Arsip

Meta