Menggunakan API teks ke pertuturan (TTS) dengan JavaScript boleh meningkatkan pengalaman pengguna aplikasi web dengan ketara. Web Speech API, yang disokong oleh pelayar moden seperti Chrome dan Firefox, menyediakan alat berkuasa untuk sintesis dan pengecaman suara. Dalam tutorial ini, kita akan pelajari cara mengintegrasikan API TTS ke dalam kod JavaScript anda, menukar teks ke suara, melaras tetapan suara, dan menggunakan suara yang tersedia.
Bermula dengan JavaScript dan teks ke pertuturan
Untuk bermula, anda perlu memahami asas HTML, CSS dan JavaScript. Mulakan dengan membuat fail HTML dan pautkan fail JavaScript anda menggunakan tag script src. Dalam fail JavaScript anda, inisialisasi objek speech synthesis dan tetapkan event listener untuk menunggu suara sedia. const synth = window.speechSynthesis; // Tunggu suara dimuat synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Lakukan sesuatu dengan suara yang tersedia }; Selepas suara dimuat, anda boleh mengakses suara tersebut dengan synth.getVoices(). Kaedah ini akan memaparkan senarai suara yang boleh digunakan untuk sintesis. Anda boleh ulang suara dengan forEach dan paparkan dalam HTML anda. 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); }); Seterusnya, buat fungsi untuk menjana audio daripada suara terpilih. Fungsi ini mengambil input teks dari textarea dan menggunakan suara terpilih untuk menghasilkan pertuturan. 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); }; Tambah event listener pada butang atau form submit untuk jalankan fungsi speak. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); Dengan kod ringkas ini, anda boleh menukar teks ke suara secara langsung. Laraskan kadar, nada dan volum dengan menetapkan properties pada objek SpeechSynthesisUtterance. utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; Jika terus meneroka Web Speech API, anda akan temui ciri tambahan untuk pengecaman serta kawalan acara. Rujuk dokumentasi rasmi untuk maklumat lanjut dan atribusi.
Integrasi lancar dengan Speechify
Untuk penggunaan API teks ke pertuturan dengan JavaScript, Speechify adalah pilihan yang tepat. Ia mudah diintegrasi dengan Web Speech API, memudahkan penukaran teks ke suara secara masa nyata. Dokumentasi lengkap dan tutorial mesra pengguna memberikan panduan langkah demi langkah — sesuai untuk pembangun baru dan berpengalaman. Dengan Speechify, anda boleh memilih pelbagai suara dan melaras tetapan seperti kadar dan nada suara. Sama ada anda pembangun front-end atau perisian, Speechify ialah alat ideal untuk meningkatkan pengalaman pengguna aplikasi web anda. Akhir sekali, penggunaan API teks ke pertuturan dengan JavaScript membuka peluang baharu dalam pembangunan web. Sintesis suara menambah pengalaman yang lebih mesra dan mudah diakses. Teruskan meneroka Web Speech API untuk mengasah kemahiran dan membina aplikasi interaktif. Mulakan hari ini dan jadikan laman web anda lebih hidup dengan kehebatan teks ke pertuturan.
