Η χρήση API μετατροπής κειμένου σε ομιλία (TTS) με JavaScript αναβαθμίζει θεαματικά την εμπειρία του χρήστη σε web εφαρμογές. Το Web Speech API, που υποστηρίζεται από σύγχρονους browsers όπως το Chrome και το Firefox, προσφέρει εργαλεία για σύνθεση και αναγνώριση ομιλίας. Σε αυτόν τον οδηγό θα δείτε πώς να ενσωματώσετε ένα API TTS σε JavaScript, να μετατρέψετε κείμενο σε ομιλία, να ρυθμίσετε παραμέτρους και να αξιοποιήσετε τις διαθέσιμες φωνές.
Ξεκινώντας με JavaScript και μετατροπή κειμένου σε ομιλία
Για αρχή χρειάζεστε βασικές γνώσεις HTML, CSS και JavaScript. Δημιουργήστε ένα αρχείο HTML και συνδέστε το JavaScript σας με script src. Στο JavaScript, αρχικοποιήστε το αντικείμενο speechSynthesis και προσθέστε event listener όταν φορτωθούν οι φωνές. const synth = window.speechSynthesis; // Περιμένετε να φορτωθούν οι φωνές synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Χρησιμοποιήστε τις διαθέσιμες φωνές }; Όταν φορτωθούν, τις παίρνετε με synth.getVoices(). Αυτό επιστρέφει λίστα διαθέσιμων φωνών. Μπορείτε να τις εμφανίσετε με forEach και 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); }); Φτιάξτε συνάρτηση για μετατροπή κειμένου σε φωνή με την επιλεγμένη φωνή. Η συνάρτηση παίρνει κείμενο από textarea και χρησιμοποιεί τη φωνή για ομιλία. 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); }; Προσθέστε event listener σε κουμπί ή φόρμα για να καλείτε το speak. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); Έτσι μετατρέπετε κείμενο σε φωνή σε πραγματικό χρόνο. Ρυθμίστε ταχύτητα, τόνο και ένταση με SpeechSynthesisUtterance. utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; Εξερευνήστε επιπλέον δυνατότητες του Web Speech API και συμβουλευτείτε την τεκμηρίωση για περισσότερες λεπτομέρειες και παραδείγματα.
Ομαλή ενσωμάτωση με το Speechify
Για TTS API με JavaScript, το Speechify είναι κορυφαία επιλογή. Με εύκολη ενσωμάτωση με το Web Speech API, το Speechify διευκολύνει τη μετατροπή κειμένου σε φωνή επί τόπου. Διαθέτει πλήρη τεκμηρίωση και πρακτικούς οδηγούς, ιδανικό για αρχάριους και έμπειρους web developers. Προσφέρει πολλές διαθέσιμες φωνές και μπορείτε να ρυθμίσετε ταχύτητα και τόνο. Για front-end ή software developers, το Speechify είναι ιδανικό για αναβάθμιση εφαρμογών και προσφορά ευχάριστης εμπειρίας χρήστη. Η χρήση TTS API με JavaScript ανοίγει πολλές δυνατότητες για web development. Η ενσωμάτωση speech synthesis κάνει τις εμπειρίες πιο προσβάσιμες και ελκυστικές. Μαθαίνοντας το Web Speech API, ενισχύετε τις δεξιότητές σας και χτίζετε πιο δυναμικές εφαρμογές. Δοκιμάστε το και δώστε «φωνή» στις ιστοσελίδες σας με τη δύναμη του TTS.
