Menggunakan API text-to-speech (TTS) dengan JavaScript dapat sangat meningkatkan pengalaman pengguna aplikasi web Anda. Web Speech API yang didukung browser modern seperti Chrome dan Firefox menyediakan alat sintesis dan pengenalan suara yang mumpuni. Di tutorial ini, kita akan membahas cara mengintegrasikan API TTS ke dalam kode JavaScript, mengonversi teks menjadi suara, mengatur karakteristik suara, dan memanfaatkan berbagai suara yang tersedia.
Mulai menggunakan JavaScript dan Text to Speech
Untuk mulai, Anda perlu memahami dasar HTML, CSS, dan JavaScript. Buat file HTML dan tautkan file JavaScript menggunakan tag script src. Di file JavaScript, inisialisasi objek speech synthesis dan buat event listener untuk saat daftar suara siap digunakan. const synth = window.speechSynthesis; // Tunggu suara ter-load synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Lakukan sesuatu dengan daftar suara }; Setelah daftar suara tersedia, akses dengan synth.getVoices(). Fungsi ini mengembalikan daftar suara yang bisa dipakai untuk sintesis suara. Anda bisa melakukan loop pada suara menggunakan forEach dan menampilkannya di HTML. const voiceSelect = document.getElementById('voice-select'); voices.forEach((voice) => { const option = document.createElement('option'); option.textContent = ${voice.name} (${voice.lang}); option.setAttribute('value', voice.lang); voiceSelect.appendChild(option); }); Lalu, buat fungsi untuk mengubah teks menjadi suara dari suara yang dipilih. Fungsi ini mengambil input teks dari textarea dan menggunakan suara yang dipilih untuk menghasilkan audio. const speak = () => { const text = document.getElementById('text-input').value; const voice = voices[voiceSelect.selectedIndex]; const utterance = new SpeechSynthesisUtterance(text); utterance.voice = voice; synth.speak(utterance); }; Tambahkan event listener ke tombol atau form submit untuk memicu fungsi speak. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); Dengan kode ini, Anda bisa mengubah teks jadi suara secara real time. Atur kecepatan, nada, dan volume suara dengan properti di SpeechSynthesisUtterance. utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; Dengan mengeksplor Web Speech API, Anda akan menemukan fitur pengenalan suara dan kontrol event sintesis lainnya. Selalu cek dokumentasi resmi untuk info dan panduan lebih lanjut.
Integrasi mudah dengan Speechify
Jika Anda ingin memakai API text-to-speech dengan JavaScript, Speechify adalah salah satu pilihan terbaik. Berkat integrasi yang mulus dengan Web Speech API, Speechify memudahkan konversi teks ke suara secara real time. Dokumentasi lengkap dan tutorial ramah pemula memandu langkah demi langkah, cocok untuk pengembang pemula maupun berpengalaman. Speechify menyediakan banyak pilihan suara, serta memungkinkan pengaturan kecepatan dan nada bicara. Baik Anda pengembang front-end maupun software, Speechify sangat membantu untuk meningkatkan kualitas aplikasi web dan menciptakan pengalaman pengguna yang menarik. Singkatnya, memakai API text-to-speech dengan JavaScript membuka banyak kemungkinan baru untuk web. Integrasi sintesis suara membuat situs Anda lebih hidup dan mudah diakses. Pelajari Web Speech API agar keahlian Anda bertambah dan Anda bisa membangun aplikasi yang lebih dinamis. Cobalah sekarang dan hidupkan web Anda dengan text-to-speech.
